Context Cards
Show the passages an agent retrieved, each with its title, text, and source.
Overview
Context Cards lists what an agent retrieved before it answered. Each card has a title, the passage itself, and where it came from. The heading carries a count, computed from the passages you pass.
Showing the retrieved text lets a person check an answer against its evidence. Pass the passages your retrieval step returned, unedited.
Anatomy
- HeadingThe title and a count of passages
- CardOne passage: title, an optional size or score, and the text
- SourceWhere the passage came from, as a link when you pass an address
context-cards has no registry dependencies.
Behavior
Sources
A source with href is a link. A source without one is plain text, for files a person cannot open from the page.
Empty
With no passages, the count reads 0 and emptyMessage is shown in place of the list. Say what that means for the answer.
Accessibility
The component is a section named by its heading, and the cards are a list. Source links are underlined, so they are not marked by color alone. Icons are decorative.
Context Cards has no motion and no keyboard interaction beyond its links.
Installation
Usage
import { ContextCards } from "@/components/ai/context-cards"
<ContextCards
title="Retrieved context"
chunks={retrieval.chunks.map((chunk) => ({
id: chunk.id,
title: chunk.heading,
body: chunk.text,
meta: `${chunk.text.length} characters`,
source: { label: chunk.document.name, href: chunk.document.url },
}))}
/>Examples
Nothing retrieved
The empty state, with a message written for this case.
API reference
ContextCards
Accepts native section props beyond those listed.