Getting Started
Stepsailors AI Command Bar Setup
To configure the Stepsailors AI Command Bar, follow these two steps:
Integrate the Script-Tag (already done in onboarding) Incorporate the script tag to load dynamic resources such as stylesheets and scripts.
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.
'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
import StepsailorSdk from '@/util/StepsailorSdk';
export default async function Layout({
children
}) {
return (
<SomeClientSideProvider>
{/* [...] other providers and layout structure */}
{children}
<StepsailorSdk />
</SomeClientSideProvider>
);
}
Okay what now?
The command now should work and actually you should be able to run ask to create a folder.

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