Skip to main content
Version: Stable (v5.x)

Sidepanel package

@docsearch/sidepanel provides composable React components for an Agent Studio chat panel.

v5 beta

These instructions use the ^5 range. Use the same range for every DocSearch package.

Install​

npm install @docsearch/core@^5 @docsearch/sidepanel@^5 @docsearch/css@^5

Render the Sidepanel​

Import both the main DocSearch stylesheet and the Sidepanel stylesheet.

HelpAssistant.tsx
import { DocSearch } from '@docsearch/core';
import { Sidepanel, SidepanelButton } from '@docsearch/sidepanel';

import '@docsearch/css';
import '@docsearch/css/dist/sidepanel.css';

export function HelpAssistant() {
  return (
    <DocSearch>
      <SidepanelButton />
      <Sidepanel
        appId="YOUR_APPLICATION_ID"
        apiKey="YOUR_SEARCH_API_KEY"
        assistantId="YOUR_AGENT_ID"
        indexName="YOUR_INDEX_NAME"
      />
    </DocSearch>
  );
}

Use a search-only API key. The assistantId is an Agent Studio agent ID. V5 doesn't provide the legacy Ask AI backend or an agentStudio switch.

The default button and panel float over the page. Press Control+I or Command+I to toggle the panel, and press Escape to close it.

Configure the provider​

Set the theme and lifecycle callbacks on DocSearch.

HelpAssistant.tsx
<DocSearch
  theme="dark"
  keyboardShortcuts={{ 'Ctrl/Cmd+I': true }}
  onSidepanelOpen={() => track('assistant_opened')}
  onSidepanelClose={() => track('assistant_closed')}
>
  <SidepanelButton variant="inline" />
  <Sidepanel
    appId="YOUR_APPLICATION_ID"
    apiKey="YOUR_SEARCH_API_KEY"
    assistantId="YOUR_AGENT_ID"
    indexName="YOUR_INDEX_NAME"
  />
</DocSearch>

Continue with advanced use cases or review the Sidepanel API. For a combined search and assistant experience, see Hybrid Mode.