Stepsailor
  • 👋Welcome
  • Command Bar
    • Getting Started
  • Connecting your logic
  • CMD Bar Search
  • Customisation
  • Platform
    • Knowledge Bases
    • Orion Config
    • Deploy Config
  • Understanding Credits
  • Data jobs
  • Integrating Orion
  • Other
    • FAQ
Powered by GitBook
On this page
  • Stepsailors AI Command Bar Setup
  • What happens in the background?
  • Setting up the SDK
  • Copy the starter template
  • Add component to your application
  • Okay what now?
  1. Command Bar

Getting Started

PreviousWelcomeNextConnecting your logic

Last updated 26 days ago

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?

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

Layout.tsx
import StepsailorSdk from '@/util/StepsailorSdk';

export default async function Layout({
  children
}) {

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

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.

In the you will see how to add your logic.

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