docsearch/packages/website/versioned_docs/version-v4/sidepanel/api-reference.mdx

---
title: Sidepanel API Reference
---

import Tabs from  '@theme/Tabs';
import TabItem from '@theme/TabItem';

## `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**

:::warning[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][2] as the chat backend instead of the Ask AI backend. More can be learned about setting up Agent Studio on their dedicated [documentation page][3].

## `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`.

```tsx
<Sidepanel
  indexName="YOUR_INDEX_NAME"
  appId="YOUR_APP_ID"
  apiKey="YOUR_SEARCH_API_KEY"
  assistantId="YOUR_ASSISTANT_ID"
  searchParameters={{
    facetFilters: ['language:en'],
    distinct: true,
  }}
/>
```

```tsx
<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 its default state.

## `expandedWidth`

> `type: number | string` | default: `'580px'` | **optional**

Width of the Sidepanel (px or any CSS width) while in its 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][1]

## `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

```ts
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.
:::

<Tabs>
  <TabItem value="React">
    ```tsx
    // 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}
    />
    ```
  </TabItem>

  <TabItem value="JavaScript">
    ```js
    sidepanel({
      // The element that will contain the Sidepanel Button and Sidepanel
      container: '#sidepanel-root',
      indexName: 'YOUR_INDEX_NAME',
      appId: 'YOUR_APP_ID',
      apiKey: 'YOUR_SEARCH_API_KEY',
      assistantId: 'YOUR_ASSISTANT_ID',
    })
    ```
  </TabItem>
</Tabs>

[1]: https://www.algolia.com/doc/guides/algolia-ai/askai/guides/suggested-questions
[2]: https://www.algolia.com/products/ai/agent-studio
[3]: https://www.algolia.com/doc/guides/algolia-ai/agent-studio