The <Chat> component provides an AI-powered conversational search interface for interacting with your search results using natural language.
Import
import { Chat } from 'react-instantsearch';
Props
The title displayed in the chat header.<Chat title="Ask about our products" />
Custom tools for the chat agent to use.import { SearchIndexToolType } from 'react-instantsearch';
<Chat
tools={{
[SearchIndexToolType]: {
// custom tool configuration
},
}}
/>
Component to render individual items in search results.<Chat
itemComponent={({ item }) => (
<div>
<h4>{item.name}</h4>
<p>{item.description}</p>
</div>
)}
/>
Function to generate URLs for search result pages.<Chat
getSearchPageURL={(uiState) => `/search?q=${uiState.query}`}
/>
Props to customize the toggle button.
Props to customize the chat header.
Props to customize the messages area.
Props to customize the prompt input area.
Custom component for the toggle button.
Custom component for the chat header.
Custom component for the prompt input.
Custom component for displaying suggestions.
Customize the text strings.<Chat
translations={{
prompt: { placeholder: 'Ask me anything...' },
header: { title: 'Search Assistant' },
}}
/>
CSS classes to customize the component styling.
Example
import { InstantSearch, Chat } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';
const searchClient = algoliasearch(
'YourApplicationID',
'YourSearchOnlyAPIKey'
);
function App() {
return (
<InstantSearch searchClient={searchClient} indexName="products">
<Chat
title="Product Assistant"
itemComponent={({ item }) => (
<div>
<img src={item.image} alt={item.name} />
<h4>{item.name}</h4>
<p>${item.price}</p>
</div>
)}
/>
</InstantSearch>
);
}