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

Hybrid Mode

warning
Ask AI is being migrated from a standalone DocSearch feature into Algolia's Agent Studio. DocSearch v5 will fully support Agent Studio and transition to using it. A more detailed migration guide will be published before the DocSearch v5 release.
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.