Recommendation Card

Recommendation Card shows what an agent proposes to do, how sure it is, and what else it considered. The person accepts the recommendation or opens the alternatives and picks one of those.

Nothing happens until the person accepts. The card calls onAccept with the chosen option, and your application does the work.

Use Approval Card when the agent has questions to ask. Use this card when it has an answer to propose.

Installing recommendation-card brings Button and Collapsible along as registry dependencies.

Options

The first option is the recommendation. Choosing an alternative makes it the selected option: the body, the confidence, and the accept button's text all change to match.

Confidence

confidence runs from 0 to 3 and fills the meter. confidenceLabel is always shown beside it. Take both from your agent. Do not present a guess as high confidence.

Accepting

If onAccept returns a promise, the button shows progress and the card locks until it settles. When it resolves, the card confirms and stays locked. When it rejects, the card shows an error and the person can accept again or pick another option.

The Alternatives button reports whether the list is expanded. Each alternative is a button. The body is a polite live region, so choosing an alternative announces the new recommendation.

The confirmation is a status and the error is an alert. The meter is decorative; the confidence is carried by its label.

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

<RecommendationCard
  title="How should I fix the rounding drift?"
  options={proposal.options}
  onAccept={(option) => agent.accept(proposal.id, option.id)}
/>

An accept that fails

This preview rejects the first accept and resolves the second.

RecommendationCard

Accepts native div props beyond those listed.

Types