Chat

Displays a chat interface to interact with a generative AI assistant built with Algolia’s Agent Studio.

This widget is and is subject to change in minor versions.

Signature

<Chat
  // Required prop, either one of
  agentId={string}
  transport={object}
  // Optional props
  getSearchPageURL={function}
  tools={object}
  classNames={object}
  translations={object}
  // Optional component props
  itemComponent={function}
  headerCloseIconComponent={function}
  headerMaximizeIconComponent={function}
  headerMinimizeIconComponent={function}
  headerTitleIconComponent={function}
  messagesErrorComponent={function}
  messagesLoaderComponent={function}
  promptFooterComponent={function}
  promptHeaderComponent={function}
  toggleButtonIconComponent={function}

  ...props={ComponentProps<'div'>}
/>

Import

JavaScript

import { Chat } from "react-instantsearch";

About this widget

<Chat> is a widget to display a chat interface that interacts with a generative AI assistant.

See also: Agent Studio

Examples

JavaScript

import React from "react";
import { liteClient as algoliasearch } from "algoliasearch/lite";
import { InstantSearch, Chat } from "react-instantsearch";

const searchClient = algoliasearch("YourApplicationID", "YourSearchOnlyAPIKey");

function App() {
  return (
    <InstantSearch indexName="instant_search" searchClient={searchClient}>
      <Chat agentId="8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9" />
    </InstantSearch>
  );
}

Props

agentId · string

The unique identifier of the agent to connect to. You can find the agentId in the Agent Studio dashboard.

JavaScript

<Chat agentId="8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9" />;

transport · HttpChatTransportInitOptions

A custom transport object to handle the communication between the chat widget and the agent. The API endpoint must be compatible with Vercel AI SDK 5.

JavaScript

<Chat transport={{
  api: 'https://chatapi.example.com/api/v1/chat',
  headers: {
    'X-Session-Id': '8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9',
    'X-Api-Version': '2025-01-01',
  },
}} />;

getSearchPageURL · (nextUiState: object) => string

A function to return the URL of the main search page with the nextUiState. This is used to navigate to the main search page when the user clicks on “View all” in the search tool.

JavaScript

<Chat getSearchPageURL={(nextUiState) => {
  return `/search?${qs.stringify(nextUiState)}`;
}} />;

tools · Record<string, Tool>

An object defining the client-side tools that the agent can use to interact with your application. A tool’s name must match what is defined in the Agent Studio dashboard.

JavaScript

<Chat tools={{
  addToCart: {
    layoutComponent: ({ message, addToolResult }) => <div>
      <p>Add {message.input.objectID} to the cart?</p>
      <button onClick={async () => {
        // add the product to the cart
        await addProductToCart(message.input.objectID);
        // notify the agent that the tool has been used
        addToolResult({
          output: {
            text: `added ${message.input.objectID} to cart`,
            done: true,
          },
        });
      }}>Add to cart</button>
    </div>,
    onToolCall: ({ addToolResult }) => addToolResult({ output: {} }),
  },
  viewProduct: {
    layoutComponent: ({ message }) => {
      if (!message.output) {
        return <span>Loading product...</span>;
      }

      return <div>
        <h2>{message.output.productName}</h2>
        <p>{message.output.brand}</p>
        <img src={message.output.imageUrl} />
      </div>;
    },
    onToolCall: async ({ message, addToolResult }) => {
      addToolResult({
        // fetch product details from your index
        output: await fetchProductDetails(message.input.objectID),
      });
    },
  },
}} />;

components props · () => JSX.Element

Components to customize the rendering of the widget.

• itemComponent. Custom component for each result. Receives an object containing a single record.
• headerCloseIconComponent. Header: close icon component.
• headerMaximizeIconComponent. Header: maximize icon component. Receives a prop containing { maximized: boolean } for conditional rendering.
• headerMinimizeIconComponent. Header: minimize icon component.
• headerTitleIconComponent. Header: title icon component (defaults to sparkles).
• messagesErrorComponent. Messages: custom error component.
• messagesLoaderComponent. Messages: custom loader component.
• assistantMessageLeadingComponent. Assistant message: custom leading component (e.g. avatar).
• assistantMessageFooterComponent. Assistant message: custom footer component.
• userMessageLeadingComponent. User message: custom leading component (e.g. avatar).
• userMessageFooterComponent. User message: custom footer component.
• promptFooterComponent. Prompt: custom footer component.
• promptHeaderComponent. Prompt: custom header component.
• toggleButtonIconComponent. Toggle button: custom icon component. Receives a prop containing { isOpen: boolean } for conditional rendering.

JavaScript

<Chat
  // ...
  headerTitleIconComponent={() => <span>✨</span>}
  headerMaximizeIconComponent={({ maximized }) => (
    <span>{maximized ? '🔽' : '🔼'}</span>
  )}
  promptFooterComponent={() => (
    <a href="https://example.com/privacy-policy">
      Privacy policy
    </a>
  )}
/>;

classNames · Partial<ChatClassNames>

The CSS classes you can override and pass to the widget’s elements. It’s useful to style widgets with class-based CSS frameworks like Bootstrap or Tailwind CSS.

• root. The root element of the widget.
• container. The container element.
• header. The header section of the widget.
  • root. The root element.
  • clear. The clear button.
  • close. The close button.
  • maximize. The maximize button.
  • title. The title element.
  • titleIcon. The title icon element.
• messages. The messages section of the widget.
  • root. The root element.
  • content. The scrollable content.
  • scroll. The scroll container.
  • scrollToBottom. The scroll to bottom button.
  • scrollToBottomHidden. The hidden state of the scroll to bottom button.
• message. The message in the messages section.
  • root. The root element.
  • container. The message container.
  • leading. The leading element (e.g., avatar).
  • content. The content element.
  • message. The message text element.
  • actions. The action buttons container.
  • footer. The footer element.
• prompt. The prompt section of the widget.
  • root. The root element.
  • actions. The actions container.
  • body. The body element.
  • footer. The footer element.
  • header. The header element.
  • submit. The submit button.
  • textarea. The textarea element.
• toggleButton. The toggle button of the widget.
  • root. The root element.

JavaScript

<Chat
  classNames={{
    root: "MyCustomChat",
    container: "MyCustomChatContainer MyCustomChatContainer--subclass",
    header: {
      root: "MyCustomChatHeader",
      title: ["MyCustomChatHeaderTitle", "MyCustomChatHeaderTitle--subclass"],
      // ...
    },
    // ...
  }}
/>;

translations · Partial<ChatTranslations>

A dictionary of translations to customize the UI text and support internationalization.

• header. The header section of the widget.
  • clearLabel. Accessible label for the clear button.
  • closeLabel. Accessible label for the close button.
  • maximizeLabel. Accessible label for the maximize button.
  • minimizeLabel. Accessible label for the minimize button.
  • title. Title to display.
• messages. The messages section of the widget.
  • copyToClipboardLabel. Accessible label for the copy to clipboard action.
  • loaderText. Text to display in the loader.
  • regenerateLabel. Accessible label for the regenerate action.
  • scrollToBottomLabel. Accessible label for the scroll to bottom button.
• message. Individual message in the messages section.
  • messageLabel. Accessible label for the message.
  • actionsLabel. Accessible label for the actions container.
• prompt. The prompt section of the widget.
  • disclaimer. Disclaimer text shown in the prompt footer.
  • emptyMessageTooltip. Tooltip for the submit button when message is empty.
  • sendMessageTooltip. Tooltip for the send button.
  • stopResponseTooltip. Tooltip for the stop button.
  • textareaLabel. Accessible label for the textarea.
  • textareaPlaceholder. Placeholder text for the textarea.

JavaScript

<Chat
  translations={{
    header: {
      title: "My AI shopping assistant",
      closeLabel: "Close chat",
      // ...
    },
    // ...
  }}
/>;

...props · React.ComponentProps<'div'>

Any <div> prop to forward to the root element of the widget.

JavaScript

<Chat className="MyCustomChat" title="My custom title" />;