# Getting Started

## Stepsailors AI Command Bar Setup

To configure the Stepsailors AI Command Bar, follow these two steps:

1. **Integrate the Script-Tag &#x20;**<mark style="color:green;">**(already done in onboarding)**</mark>\
   Incorporate the script tag to load dynamic resources such as stylesheets and scripts.
2. **Setup the SDK &#x20;**<mark style="color:purple;">**(That is what we do now)**</mark>\
   Configure the Software Development Kit (SDK) to enable communication with these resources.

## What happens in the background?

<figure><img src="https://2252461020-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FofioeNC6qXfkmRmLOwy9%2Fuploads%2FBtG84QI2DSDRPljj5NHx%2FScreenshot%202025-04-07%20at%2020.39.45.png?alt=media&#x26;token=218ac5fd-da8b-4359-9626-338f04c74518" alt=""><figcaption><p>A simple overview</p></figcaption></figure>

The SDK acts as an API to the command bar. Here you define what the command bar is capable of doing.

## Setting up the SDK

```bash
npm install @stepsailor/sdk
```

### Copy the starter template

Create a file called `StepsailorSdk.tsx` and copy the following starter template.

{% code title=" StepsailorSdk.tsx" %}
```tsx
'use client';

import { useEffect } from 'react';
import { CommandBarApi, defineSchema, fillableByAI, z, setupSdk } from '@stepsailor/sdk';

export default function StepsailorSdk() {
  useEffect(() => {
    defineSdk();
  }, []);

  return null;
}

function defineSdk() {

  setupSdk({
    companyId: 'company-id-from-stepsailor-platform',
    deployConfigId: 'dc-id-from-stepsailor-platform'
    apiKey: 'api-key-from-stepsailor-platform',
  });

  const cmdBar = new CommandBarApi<{}>();

  cmdBar.defineContext({});

  // Example action
  cmdBar.defineAction({
    name: 'createAFolder',
    description: 'Creates a folder with a given name',
    displayName: 'Create a folder',
    inputSchema: defineSchema({
      name: fillableByAI(z.string()),
    }),
    handler: async (input, context) => {
      const { display } = context.hil;
      display.log(`Creating folder with name ${input.name}`);
    },
  });

  // This makes your defined actions available for the command bar
  cmdBar.activate();
}
```
{% endcode %}

This is where everything your command bar can do will be defined. This is where you connect the command bar to your product logic.

### Add component to your application

{% tabs %}
{% tab title="Next.js" %}
{% code title="Layout.tsx" %}
```tsx
import StepsailorSdk from '@/util/StepsailorSdk';

export default async function Layout({
  children
}) {

  return (
    <SomeClientSideProvider>
         {/* [...] other providers and layout structure */}
         {children}
         <StepsailorSdk />
    </SomeClientSideProvider>
  );
}
```
{% endcode %}
{% endtab %}

{% tab title="React" %}
Most applications written in React have a place for your global providers. Ensuring that what is run there is run everywhere in your application, no matter the route or state configuration.\
&#x20;

{% code title="ProviderWrapper.tsx" %}
```tsx
import StepsailorSdk from '@/util/StepsailorSdk';

export default function ProviderWrapper({ children }: React.PropsWithChildren) {
  // [...] some state logic
  return (
    <SomeProviderA>
      <SomeProviderB>
        <StepsailorSdk />
        {children}
      </SomeProviderB>
    </SomeProviderA>
  );
}
```
{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Before you publish your changes make sure that the StepsailorSdk component is only available in authenticated routes.
{% endhint %}

{% hint style="info" %}
Its recommended to place the \<StepsailorSdk /> component within the providers to enable the command bar to access contexts.
{% endhint %}



## Okay what now?

The command now should work and actually you should be able to run ask to create a folder.

<figure><img src="https://2252461020-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FofioeNC6qXfkmRmLOwy9%2Fuploads%2F5tSKk9fRhxWcWopYrwbP%2FBaseExampleFolder.gif?alt=media&#x26;token=d99a3982-f712-4b0c-8d33-fa270d169953" alt=""><figcaption><p>This is how it should look like in your product (maybe try refresh if it doesn't pop up)</p></figcaption></figure>



In the [next section ](../connecting-your-logic)you will see how to add your logic.&#x20;

