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

Hybrid Mode

info

Currently Hybrid Mode is only available when using the React usage approach. Hybrid Mode is not available in the JavaScript-only (vanilla) integration.

Introduction​

Sidepanel can run alongside the DocSearch Modal through what we call "Hybrid Mode." When a user initiates an Ask AI action from within the DocSearch Modal, such as submitting a prompt or selecting an AI-related suggestion, the interface automatically transitions into the Sidepanel for the continuation of the conversation.

Set up​

To set up the Hybrid Mode experience, you will need the following:

The Sidepanel Component package can be installed as follows:

npm install @docsearch/sidepanel

Or using your package manager of choice

Implementation​

Once everything is installed, you can set up Hybrid Mode as such:

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

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

function HybridMode() {
  return (
    <DocSearch>
      <DocSearchButton />
      <DocSearchModal
        indexName="YOUR_INDEX_NAME"
        appId="YOUR_APP_ID"
        apiKey="YOUR_SEARCH_API_KEY"
        askAi="YOUR_ASSISTANT_ID" // Or configuration object
      />

      <SidepanelButton />
      <Sidepanel
        indexName="YOUR_INDEX_NAME"
        appId="YOUR_APP_ID"
        apiKey="YOUR_SEARCH_API_KEY"
        assistantId="YOUR_ASSISTANT_ID"
      />
    </DocSearch>
  );
}

There is no manual opt-in for Hybrid Mode to work. When both the Modal and Sidepanel are rendered inside the same <DocSearch> context, Hybrid Mode is enabled automatically. No additional configuration is required.