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

Sidepanel API Reference

appId​

type: string | required

Your Algolia application ID.

apiKey​

type: string | required

Your Algolia Search API key.

assistantId​

type: string | required

The ID for which Ask AI assistant to use.

indexName​

type: string | required

The name of the index to be used with the Ask AI service.

agentStudio​

type: boolean | optional | experimental

Experimental

agentStudio is currently an experimental property. It is targeted to be stable in release 5.0.0.

If agentStudio is true, the Ask AI chat will use Algolia's Agent Studio as the chat backend instead of the Ask AI backend. More can be learned about setting up Agent Studio on their dedicated documentation page.

searchParameters​

type: AskAiSearchParameters | Record<string, Omit<AskAiSearchParameters, 'facetFilters'>> | optional

Additional search parameters used to scope Ask AI or Agent Studio retrieval.

  • When agentStudio is omitted or false, pass a flat object such as facetFilters, filters, attributesToRetrieve, restrictSearchableAttributes, and distinct.
  • When agentStudio is true, searchParameters must be keyed by index name and supports filters, attributesToRetrieve, restrictSearchableAttributes, and distinct.
<Sidepanel
  indexName="YOUR_INDEX_NAME"
  appId="YOUR_APP_ID"
  apiKey="YOUR_SEARCH_API_KEY"
  assistantId="YOUR_ASSISTANT_ID"
  searchParameters={{
    facetFilters: ['language:en'],
    distinct: true,
  }}
/>
<Sidepanel
  indexName="YOUR_INDEX_NAME"
  appId="YOUR_APP_ID"
  apiKey="YOUR_SEARCH_API_KEY"
  assistantId="YOUR_ASSISTANT_ID"
  agentStudio={true}
  searchParameters={{
    YOUR_INDEX_NAME: {
      filters: 'type:content AND language:en',
      attributesToRetrieve: ['title', 'content', 'url'],
      restrictSearchableAttributes: ['title', 'content'],
      distinct: 'url',
    },
  }}
/>

variant​

type: 'floating' | 'inline' | default: 'floating' | optional

Variant of the Sidepanel positioning.

  • inline pushes page content when opened.
  • floating is positioned above all other content on the page.

side​

type: 'right' | 'left' | default: 'right' | optional

The side of the page which the panel will originate from.

width​

type: number | string | default: '360px' | optional

Width of the Sidepanel (px or any CSS width) while in it's default state.

expandedWidth​

type: number | string | default: '580px' | optional

Width of the Sidepanel (px or any CSS width) while in it's expanded state.

suggestedQuestions​

type: boolean | default: false | optional

Enables displaying suggested questions on new conversation screen.

More information on setting up Suggested Questions can be found on Algolia Docs

keyboardShortcuts​

type: { 'Ctrl/Cmd+I': boolean } | optional

Configuration for keyboard shortcuts. Allows enabling/disabling specific shortcuts.

Default behavior:​

  • Ctrl/Cmd+I - Opens and closes the Sidepanel

Interface:​

interface SidepanelShortcuts {
  'Ctrl/Cmd+I'?: boolean; // default: true
}

theme​

type: 'light' | 'dark' | default: 'light' | optional

portalContainer (React only)​

type: Element | DocumentFragment | default: document.body | optional

The container element where the panel should be portaled to. Use this when you need the Sidepanel to render in a custom DOM node.

warning

This prop only exists in the React based versions of Sidepanel. If you are using the @docsearch/sidepanel-js package, use the container option instead.

// assume you have a dedicated DOM node in your HTML
<div id="sidepanel-root" />

const portalEl = document.getElementById('sidepanel-root');

<Sidepanel
  appId="YOUR_APP_ID"
  apiKey="YOUR_SEARCH_API_KEY"
  assistantId="YOUR_ASSISTANT_ID"
  indexName="YOUR_INDEX_NAME"
  // Render the Sidepanel inside of #sidepanel-root instead of document.body
  portalContainer={portalEl}
/>