Recommendation card

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

One suggestion from the agent that the person may take or leave: what it suggests, why, the expected effect and how sure it is (a meter and a word, hatched when it cannot tell), with the alternatives it weighed one click away; Accept runs your callback with progress and the card settles to one line.

Use it for

An agent proposing one next step the person may accept or skip, with its confidence and reasons.
Showing the alternatives the agent considered so the person can choose another.

Not for

An action the agent must not take without permission (approval-card).
A multi-step plan (plan).
A list of findings to read (insight-cards).

Anatomy

header: icon tile, who suggests, the question
suggestion well: title, Suggested / caveat badges, description, reasons (checks), confidence meter (segments + word + %), expected effect
Other options (n): disclosure with every option as a radio row (title; Suggested, caveat and confidence in words)
failure alert with Retry
footer: Not now, Accept
settled line: Accepted / Dismissed and the option

States

open
options shown
alternative chosen
confidence not scored (hatched, "Not scored")
pending (Accept or Not now shows progress, aria-busy)
error (alert, Retry)
accepted
dismissed

Keyboard

Tab: Other options toggle → options (arrow keys choose) → Not now → Accept
Closed options are out of the Tab order
Focus moves onto the settled line after a decision

Motion

The options open to their height on --motion-in and close on --motion-out (disclosure-panel); the chevron turns; nothing moves at rest.

Props

Prop	Type	Default	Description
`title / agent` (required)	`ReactNode`	—
`recommendations` (required)	`Recommendation[]`	—	{ id, title, description?, confidence: number \| null, reasons?, impact?, note? }; the agent's pick first.
`value / defaultValue / onValueChange`	`string`	—	The option shown and accepted; defaults to the first.
`onAccept / onDismiss`	`(recommendation) => void \| Promise`	—
`decision / defaultDecision / onDecisionChange`	`"accepted" \| "dismissed" \| null`	—
`open / defaultOpen / onOpenChange`	`boolean`	—	The other options.
`labels`	`Partial<RecommendationCardLabels>`	—
`style / ref`	`CSSProperties / native Ref`	—
`classNames`	`RecommendationCardClassNames`	—

Built from

radio-group
alert
badge
button

Dependencies

lucide-react, radix-ui

Import

import { RecommendationCard } from "@/components/recommendation-card/recommendation-card";

Get it

Recommendation card 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