docsearch/packages/website/docs/sidepanel/advanced-use-cases.mdx

---
title: Advanced use cases
---

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

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

<Tabs>
<TabItem value="npm">

```bash
npm install @docsearch/sidepanel
```

</TabItem>

<TabItem value="yarn">

```bash
yarn add @docsearch/sidepanel
```

</TabItem>

<TabItem value="pnpm">

```bash
pnpm add @docsearch/sidepanel
```

</TabItem>

<TabItem value="bun">

```bash
bun add @docsearch/sidepanel
```

</TabItem>
</Tabs>

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

```tsx
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:

```tsx
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][1].

[1]: /docs/sidepanel/hybrid