> ## Documentation Index
> Fetch the complete documentation index at: https://www.algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add an AI Overview card to search results

> Show an Agent Studio recommendation above your search results, and let users continue the conversation in chat.

The result card shows an "AI Overview" above your search results.
An Agent Studio agent reads the query and the top hits, then recommends which results fit best and explains why.
The answer streams into the card as the agent writes it.

When your page also has a chat, the card lets users continue the conversation there, with the answer and follow-up suggestions carried over.

The card is an InstantSearch widget.
For all options, see the [JavaScript](https://www.algolia.com/doc/api-reference/widgets/result-card/js.md) and [React](https://www.algolia.com/doc/api-reference/widgets/result-card/react.md) widget references.

## Before you begin

* You need an Agent Studio agent with an [Algolia Search tool](https://www.algolia.com/doc/guides/algolia-ai/agent-studio/how-to/tools/algolia-search.md) connected to the index that your search page uses.
  The result card uses the same agent as your chat, so the agent's [prompt](https://www.algolia.com/doc/guides/algolia-ai/agent-studio/how-to/prompting.md) and tools apply.
* You need an InstantSearch.js or React InstantSearch search page. For the base setup, see [Integrate Agent Studio](https://www.algolia.com/doc/guides/algolia-ai/agent-studio/how-to/integration.md).
* To let users continue in chat, your page needs the [`chat`](https://www.algolia.com/doc/api-reference/widgets/chat/js) 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](https://www.algolia.com/doc/guides/algolia-ai/agent-studio/how-to/turn-context.md). 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

You set up the result card once for each agent.
Agent Studio creates a base set of activation rules for you.

**1. Open the Result Card component**

In the [Agent Studio dashboard](https://dashboard.algolia.com/generativeAi/agent-studio/agents), open your agent, go to the **Components** tab, and select **Result Card**.

**2. Select an index and enable the card**

Select the **Index** that your search page queries, then turn on **Enabled**.

**3. Optional: configure follow-up suggestions**

Use **Follow-up prompt suggestions** to control whether the agent suggests follow-up prompts.
When it's on, the agent suggests follow-up prompts that users can select to continue in chat.
This setting also applies to your chat.

**4. Review the activation rules**

**Activation Rules** control which searches show the card.
The default **Result Card** rule applies to this agent and matches queries that contain any of these words:
`for`, `is`, `choose`, `should`, `recommend`, `versus`, `best`, `which`, `what`, `how`, `vs`, `compare`, `difference`, `between`, and `suggest`.
These words signal questions that call for a recommendation, such as "best laptop for gaming".

To change when the card shows, edit the default rule or select **Add Rule**.
For each rule, you can set:

* **Name**.
* **Enabled**.
* One or more conditions on the **Query**, **Filters**, or **Context**.
* Optional: a start and end date in **From** and **Until**.

The widget sends the context `agent-studio-result-card-AGENT_ID`.
Keep it in the **Context** condition to limit a rule to this agent.
Select a custom context instead if your integration supplies its own.

**5. Test in the live preview**

In the **Live preview** panel, enter a test query of at least two words, then select **Generate preview**.
The preview also shows whether your activation rules match the query.

**6. Add the widget to your search page**

Select the code icon next to **Enabled** to open **Integration**.
It generates the code for your agent and index in React InstantSearch or InstantSearch.js.
Place the widget before your hits, in the same InstantSearch index, and use the same agent ID in every widget that connects to the agent.

```jsx React expandable theme={"system"}
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>
  );
}
```

```js JavaScript expandable theme={"system"}
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();
```

**7. Search with at least two words**

Open your page and search with a query that matches an activation rule.
A one-word query keeps the card hidden.

## Continue in chat

When a `chat` widget with the same agent ID is on the same index, the card shows:

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

Both open the chat with the card's conversation.
Selecting a suggestion also sends it as the next message.
If the chat is generating a response, the handoff doesn't happen.

The card is also an entry point for the chat, so a page with both widgets doesn't need a [`chatTrigger`](https://www.algolia.com/doc/api-reference/widgets/chat-trigger/js) widget.

Without a matching `chat` widget, the card hides these actions.

## 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

The widget lets you change the card without building your own UI:

* 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.

The widget references list every option and include examples.

## Send requests to your own backend

By default, the widget sends requests to Agent Studio.
To send them to your own backend, pass a `transport` option.
To add headers or query parameters to Agent Studio requests, pass `requestOptions`.
You can't use both options together.
The `agentId` stays required with a custom transport, because the widget derives its rule context from it.

## See also

* [Result Card Widget](https://www.algolia.com/doc/api-reference/widgets/result-card/js.md)
* [Per-turn context](https://www.algolia.com/doc/guides/algolia-ai/agent-studio/how-to/turn-context.md)
* [Integrate Agent Studio](https://www.algolia.com/doc/guides/algolia-ai/agent-studio/how-to/integration.md)