Add an AI Overview card to search results

​

Before you begin

• You need an Agent Studio agent with an Algolia Search tool connected to the index that your search page uses. The result card uses the same agent as your chat, so the agent’s prompt and tools apply.
• You need an InstantSearch.js or React InstantSearch search page. For the base setup, see Integrate Agent Studio.
• To let users continue in chat, your page needs the chat widget with the same agent ID as the card.

​

How the result card works

1. Users search. The widget adds the rule context agent-studio-result-card-AGENT_ID to the search request.
2. If an activation rule matches the search, the search response tells the widget to show the card. Without a matching rule, the card stays hidden.
3. If the query has at least two words, the widget sends the query, the active filters, and the first five hits to your agent as per-turn context. It asks which of these results the agent recommends and why.
4. The card shows a skeleton placeholder until the first text arrives, then streams the answer.
5. The widget only sends another request when the query, the filters, or the first five hits change. Going to another page of results doesn’t send a request.

​

Set up the result card

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

const searchClient = algoliasearch(
  "ALGOLIA_APPLICATION_ID",
  "ALGOLIA_SEARCH_API_KEY"
);

function App() {
  return (
    <InstantSearch indexName="INDEX_NAME" searchClient={searchClient}>
      <SearchBox />
      <ResultCard agentId="AGENT_ID" />
      <Hits />
      <Chat agentId="AGENT_ID" />
    </InstantSearch>
  );
}

import { liteClient as algoliasearch } from "algoliasearch/lite";
import instantsearch from "instantsearch.js";
import { chat, hits, resultCard, searchBox } from "instantsearch.js/es/widgets";

const searchClient = algoliasearch(
  "ALGOLIA_APPLICATION_ID",
  "ALGOLIA_SEARCH_API_KEY"
);

const search = instantsearch({
  indexName: "INDEX_NAME",
  searchClient,
});

search.addWidgets([
  searchBox({ container: "#searchbox" }),
  resultCard({ container: "#result-card", agentId: "AGENT_ID" }),
  hits({ container: "#hits" }),
  chat({ container: "#chat", agentId: "AGENT_ID" }),
]);

search.start();

​

Continue in chat

• A Continue in chat button.
• Up to two follow-up suggestions from the agent, when Follow-up prompt suggestions is on.

​

Know how users interact with the card

• Users can collapse the card to its header. The answer keeps generating, and the card stays collapsed for later searches until users restore it.
• The card clips long answers and shows a Show more button to reveal the full text.
• If the request fails, the card shows a Retry button.
• If the answer completes without any text, the card doesn’t render.

​

Customize the card

• Rename the title and buttons with translations. The title defaults to “AI Overview”.
• Restyle the card with cssClasses in JavaScript or classNames in React.
• Replace the markup with templates.layout in JavaScript or layoutComponent in React.
• Build a fully custom UI with the connectResultCard connector in JavaScript or the useResultCard Hook in React.

​

Send requests to your own backend

​

See also

• Result Card Widget
• Per-turn context
• Integrate Agent Studio