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

Sidepanel JS package

@docsearch/sidepanel-js mounts the Agent Studio Sidepanel into an existing HTML element. It bundles its rendering dependencies and returns an imperative instance.

v5 beta

These instructions use the ^5 range.

Install​

npm install @docsearch/sidepanel-js@^5 @docsearch/css@^5

Add a container to your page:

index.html
<div id="docsearch-sidepanel"></div>

Mount the Sidepanel and retain the returned instance:

load-sidepanel.js
import sidepanel from '@docsearch/sidepanel-js';

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

const assistant = sidepanel({
  container: '#docsearch-sidepanel',
  appId: 'YOUR_APPLICATION_ID',
  apiKey: 'YOUR_SEARCH_API_KEY',
  assistantId: 'YOUR_AGENT_ID',
  indexName: 'YOUR_INDEX_NAME',
  onReady() {
    console.info('DocSearch sidepanel is ready');
  },
});

document.querySelector('#ask-docs').addEventListener('click', () => {
  assistant.open();
});

Use a search-only API key. The assistantId is an Agent Studio agent ID. V5 doesn't provide an agentStudio switch.

Open with a question​

Pass an initial message to open:

load-sidepanel.js
assistant.open({
  query: 'How do I configure a search-only API key?',
});

Call assistant.destroy() before removing the container or remounting another Sidepanel in it.

Load from a CDN​

index.html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@docsearch/css@^5/dist/style.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@docsearch/css@^5/dist/sidepanel.css"
/>

<div id="docsearch-sidepanel"></div>

<script src="https://cdn.jsdelivr.net/npm/@docsearch/sidepanel-js@^5/dist/umd/index.js"></script>
<script>
  const assistant = docsearchSidepanel({
    container: '#docsearch-sidepanel',
    appId: 'YOUR_APPLICATION_ID',
    apiKey: 'YOUR_SEARCH_API_KEY',
    assistantId: 'YOUR_AGENT_ID',
    indexName: 'YOUR_INDEX_NAME',
  });
</script>

See the JavaScript Sidepanel API for configuration, Agent Studio options, callbacks, and instance methods.