React Components

CommandBar

Universal ⌘K command bar for all ShipShit.dev apps.


import { CommandBar } from '@shipshit/ai/react'
 
<CommandBar
  app="sdr"
  getToken={() => clerk.session?.getToken() ?? null}
  commands={[
    {
      id: 'new-lead',
      label: 'New Lead',
      icon: '👤',
      action: () => router.push('/leads/new')
    },
    {
      id: 'import',
      label: 'Import CSV',
      icon: '📥',
      action: () => setImportOpen(true)
    },
  ]}
/>

Props

Prop	Type	Description
`app`	`AppId`	Current app identifier
`getToken`	`() => Promise<string \| null>`	Clerk session token getter
`commands`	`AppCommand[]`	App-specific commands
`placeholder`	`string`	Input placeholder text
`apiUrl`	`string`	Custom AI API URL

Keyboard Shortcuts

Key	Action
`⌘K` / `Ctrl+K`	Open command bar
`Enter`	Execute command or send message
`Tab`	Switch to AI chat mode
`Escape`	Close

useAI Hook

React hook for AI chat with cross-app context.


const {
  messages,   // ChatMessage[]
  isLoading,  // boolean
  error,      // Error | null
  context,    // SearchResult[] (related cross-app data)
  send,       // (content: string) => Promise<void>
  reset,      // () => void
  search,     // (query: string) => Promise<SearchResult[]>
} = useAI({
  app: 'sdr',
  getToken: () => clerk.session?.getToken() ?? null,
  crossAppContext: true, // default
})