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

Hybrid Mode

warning
Ask AI is being migrated into Algolia's Agent Studio. You can migrate your assistant now and update DocSearch to use your Agent Studio agent ID. See the Ask AI → Agent Studio migration guide.
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.