Skip to main content
The <FilterSuggestions> component provides AI-powered suggestions for filtering search results based on the current query and results.

​
Import

import { FilterSuggestions } from 'react-instantsearch';

​
Props

​
agentId
string
required
The ID of the AI agent to use for generating suggestions.
<FilterSuggestions agentId="your-agent-id" />
​
attributes
string[]
Attributes to generate filter suggestions for.
<FilterSuggestions
  agentId="your-agent-id"
  attributes={['brand', 'category', 'color']}
/>
​
maxSuggestions
number
Maximum number of suggestions to display.
<FilterSuggestions agentId="your-agent-id" maxSuggestions={5} />
​
debounceMs
number
Debounce time in milliseconds before fetching suggestions.
<FilterSuggestions agentId="your-agent-id" debounceMs={300} />
​
hitsToSample
number
Number of hits to sample when generating suggestions.
<FilterSuggestions agentId="your-agent-id" hitsToSample={10} />
​
transformItems
function
Transform the suggestion items before displaying them.
<FilterSuggestions
  agentId="your-agent-id"
  transformItems={(items) => items.slice(0, 3)}
/>
​
itemComponent
React.Component
Custom component to render each suggestion item.
<FilterSuggestions
  agentId="your-agent-id"
  itemComponent={({ item, refine }) => (
    <button onClick={() => refine(item)}>
      {item.label}
    </button>
  )}
/>
​
headerComponent
React.Component
Custom component to render the header.
​
emptyComponent
React.Component
Custom component to render when there are no suggestions.
​
transport
object
Custom transport configuration for API requests.
​
classNames
object
CSS classes to customize the component styling.

​
Example

import { InstantSearch, FilterSuggestions, SearchBox } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

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

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <SearchBox />
      <FilterSuggestions
        agentId="your-agent-id"
        attributes={['brand', 'category', 'color']}
        maxSuggestions={5}
      />
    </InstantSearch>
  );
}