Context cards

A React component in Beamline's AI & agents category.

The knowledge an agent retrieved before it answered: one card per chunk with what it is about, the text it read with the search words marked, how relevant it was and where it came from, filterable by source; optionally each chunk can be left out of the next answer.

Use it for

Showing what a retrieval step found, so people can judge an answer's grounding.
Letting people leave a retrieved chunk out and ask again.

Not for

Numbered citations inside the answer text (citations).
Files the person attached (attachment).
A search results page (a list of item rows).

Anatomy

header: label, "8 chunks from 5 sources · n used in the answer"
source filter (chip group, All + one per source with counts)
card: title, relevance meter (segments + word, hatched when none), text with search words marked (a tint that never splits a word), Show more
source line: type glyph (or connector icon), name (link), location
Use in answer check (when selectable)

Variants

layout: grid (two columns from 640px), list (side panels)

States

loading (skeleton cards, aria-busy)
empty (emptyLabel)
filtered by source
text clamped / expanded
relevance not scored
left out of the answer (unchecked; title and text step down one ink, never faded below 4.5:1)

Keyboard

Arrow keys choose the source filter (radio group)
Show more / Show less is a button with aria-expanded
Source names are links; Use in answer is a checkbox

Motion

None; the filter chips animate their own check (ChipGroup).

Props

Prop	Type	Default	Description
`chunks` (required)	`ContextChunk[]`	—	{ id, title, text, source: { name, url?, location?, kind?, icon? }, score?: number \| null }
`query`	`string`	—	Words of 3+ letters are marked in every chunk.
`selected / defaultSelected / onSelectedChange`	`string[]`	—	Chunks used in the answer; any of these turns the checks on.
`onOpenSource`	`(chunk) => void`	—
`layout / previewLines`	`"grid" \| "list" / number`	—
`loading / emptyLabel / label`	`boolean / ReactNode / string`	—
`style / ref`	`CSSProperties / native Ref`	—
`classNames`	`ContextCardsClassNames`	—

Built from

chip-group
checkbox
empty-state
skeleton
attachment

Dependencies

lucide-react, radix-ui

Import

import { ContextCards } from "@/components/context-cards/context-cards";

Get it

Context cards is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent