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

Advanced use cases

Introduction​

This guide will cover some advanced implementations/use cases for the Sidepanel. The examples below assume you're using the Sidepanel React package, available from @docsearch/sidepanel. The @docsearch/sidepanel package can be installed as follows:

npm install @docsearch/sidepanel

Or using your package manager of choice

Complex implementation​

Below is an example of a more complex implementation with searchParameters, a different variant, and some translations.

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

function App() {
  return (
    <DocSearch>
      <SidepanelButton
        translations={{
          buttonAriaLabel: 'Open Ask AI Sidepanel',
        }}
      />
      <Sidepanel
        indexName="YOUR_INDEX_NAME"
        appId="YOUR_APP_ID"
        apiKey="YOUR_SEARCH_API_KEY"
        assistantId="YOUR_ASSISTANT_ID"
        variant="inline"
        searchParameters={{
          facetFilters: ['language:en'],
          distinct: false,
        }}
        translations={{
          header: {
            title: 'Ask our assistant',
          },
          promptForm: {
            promptPlaceholderText: 'e.g. How do I migrate my DB?',
          },
        }}
      />
    </DocSearch>
  );
}

Dynamic importing​

Sidepanel is built in a way that allows for dynamic importing of its components to help reduce bundle size. Below is a brief example of how to do so:

import { DocSearch } from '@docsearch/core';
import { SidepanelButton } from '@docsearch/sidepanel/button';
import type { Sidepanel as SidepanelType} from '@docsearch/sidepanel/sidepanel';
import { useState } from 'react';

let Sidepanel: typeof SidepanelType | null = null;

async function importSidepanelIfNeeded() {
  if (Sidepanel) {
    return;
  }

  const { Sidepanel: Panel } = await import('@docsearch/sidepanel/sidepanel');

  Sidepanel = Panel;
}

export default function DynamicSidepanel() {
  const [sidepanelLoaded, setSidepanelLoaded] = useState(false);

  const loadSidepanel = () => {
    importSidepanelIfNeeded().then(() => {
      setSidepanelLoaded(true);
    });
  };

  return (
    <DocSearch>
      <SidepanelButton onClick={loadSidepanel} />
      {sidepanelLoaded && Sidepanel && (
        <Sidepanel
          indexName="YOUR_INDEX_NAME"
          appId="YOUR_APP_ID"
          apiKey="YOUR_SEARCH_API_KEY"
          assistantId="YOUR_ASSISTANT_ID"
        />
      )}
    </DocSearch>
  );
}

Hybrid Mode​

Hybrid Mode allows you to combine the Sidepanel and the original DocSearch Modal in one integrated experience.

You can trigger the Modal for search and the Sidepanel for AI-powered assistance.

Learn more in the Hybrid Mode guide.