Getting Started

Stepsailors AI Command Bar Setup

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

1. Integrate the Script-Tag (already done in onboarding) Incorporate the script tag to load dynamic resources such as stylesheets and scripts.

2. Setup the SDK (That is what we do now) Configure the Software Development Kit (SDK) to enable communication with these resources.

What happens in the background?

A simple overview

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

npm install @stepsailor/sdk

Copy the starter template

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

StepsailorSdk.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();
}

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

Next.js

Layout.tsx

import StepsailorSdk from '@/util/StepsailorSdk';

export default async function Layout({
  children
}) {

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

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.

ProviderWrapper.tsx

import StepsailorSdk from '@/util/StepsailorSdk';

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

Before you publish your changes make sure that the StepsailorSdk component is only available in authenticated routes.

Its recommended to place the <StepsailorSdk /> component within the providers to enable the command bar to access contexts.

Okay what now?

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

This is how it should look like in your product (maybe try refresh if it doesn't pop up)

In the next section you will see how to add your logic.