Skip to content

Interactive Answers

Confirmation Card

A summary of what the agent is about to do — line items, totals and confirm or edit before it acts.

2 variantsMIT

Preview

Book the Porto offsite

Mar 12–14 · 6 people

  • Hotel rooms

    Casa do Rio, Porto · 2 nights

    7
    $2,520.00

  • Meeting room

    Full day, Mar 13

    $640.00

  • Team dinner

    Mar 13, 20:00 · 7 people

    $455.00

  • Airport transfer

    Van, both ways

    $180.00
Subtotal
$3,795.00
Service fee
$48.00
City tax
$36.00
Total
$3,879.00
Warning: Rooms become non-refundable on Mar 1.

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/confirmation-card.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { useState } from "react";
import { ConfirmationCard } from "@/components/ui/confirmation-card";

// Before an agent spends money or changes something real, show what it will do.
export function ConfirmDeploy({ plan }: { plan: DeployPlan }) {
  const [items, setItems] = useState(plan.items);
  const [status, setStatus] = useState<"review" | "confirming" | "done">("review");

  return (
    <ConfirmationCard
      data={{ title: plan.title, items, fees: plan.fees, warnings: plan.warnings, reference: plan.id }}
      status={status}
      onItemsChange={setItems}
      onConfirm={async (final) => {
        setStatus("confirming");
        await agent.approve(plan.callId, final);
        setStatus("done");
      }}
      onUndo={() => agent.revert(plan.callId)}
      onCancel={() => agent.deny(plan.callId)}
    />
  );
}

Props

PropTypeDefaultDescription
data*{ title; subtitle?; items: ConfirmationItem[]; fees?; warnings?; reference?; doneAt? }—What the agent is about to do. Totals are computed from items × quantity plus fees.
status"review" | "confirming" | "done""review"Review with editable items, a loading confirm, or the done summary.
onItemsChange(items: ConfirmationItem[]) => void—Called when a quantity changes or an item is removed.
onConfirm(items: ConfirmationItem[]) => void—The primary button. Its label includes the total.
onEdit / onCancel() => void—Show Edit and Cancel buttons next to Confirm.
onUndo() => void—In the done state, shows an Undo countdown for `undoSeconds`.
undoSecondsnumber30Length of the undo window.
currencystring"USD"ISO currency for amounts.
confirmLabel / doneLabelstring"Confirm" / "Done"Verbs for your domain, e.g. "Deploy" / "Deployed".
classNamestring—Extra classes for the shell.
type ConfirmationItem = {
  id: string;
  label: string;
  detail?: string;
  amount: number;    // one unit
  quantity?: number; // defaults to 1
  editable?: boolean;  // quantity stepper
  removable?: boolean; // remove button
};