import { ApprovalCard } from "@/components/tool-ui/approval-card"; Before the assistant deploys to production, deletes a project, or sends an email on your behalf, it should ask first. ApprovalCard renders a confirmation prompt with context about the action (metadata, consequences, a clear approve/deny choice) and records the decision as a receipt once the user responds. **Role:** Decision. For choices that return to the assistant. See [Design Guidelines](/docs/design-guidelines) for how component roles work. ## Getting Started Run this once from your project root. Render `ApprovalCard` in your UI with tool-compatible props.

```tsx import { ApprovalCard } from "@/components/tool-ui/approval-card"; export function Example() { return ( console.log("Approved")} onCancel={() => console.log("Denied")} /> ); } ```

Register this renderer so tool results display as `ApprovalCard`. ```tsx "use client"; import { type Toolkit } from "@assistant-ui/react"; import { ApprovalCard } from "@/components/tool-ui/approval-card"; import { safeParseSerializableApprovalCard, SerializableApprovalCardSchema, } from "@/components/tool-ui/approval-card/schema"; export const toolkit: Toolkit = { requestApproval: { description: "Request user approval before performing an action.", parameters: SerializableApprovalCardSchema, render: ({ args, toolCallId, result, addResult }) => { const parsedArgs = safeParseSerializableApprovalCard({ ...args, id: args?.id ?? `approval-${toolCallId}`, }); if (!parsedArgs) { return null; } return result ? ( ) : ( addResult?.("approved")} onCancel={() => addResult?.("denied")} /> ); }, }, }; ``` ## Key Features Blocks agent actions until the user approves or denies Red styling for irreversible or dangerous operations Key-value pairs giving context about the action Compact read-only view of the decision in conversation history ## Receipt State Pass a `choice` prop to render this component in its receipt state. See [Receipts](/docs/receipts) for the pattern. The receipt shows the outcome (approved or denied) with the custom button label you specified, fades in with a subtle animation, and is read-only. ## Destructive Variant Set `variant="destructive"` for dangerous or irreversible actions. The icon background and confirm button turn red. ## Props void | Promise", }, onCancel: { description: "Handler when user denies", type: "() => void | Promise", }, }} /> ## Metadata Schema Long metadata values are automatically truncated with an ellipsis. Keep values concise for best results. ## Accessibility - Uses `role="dialog"` with `aria-labelledby` and `aria-describedby` - **Keyboard navigation:** - `Tab` to move between buttons - `Enter` or `Space` to activate focused button - `Escape` triggers the cancel action - Receipt state uses `role="status"` for screen reader announcements - Fade-in animation respects `prefers-reduced-motion` ## Related - [Order Summary](/docs/order-summary): itemized confirmation for purchases - [Option List](/docs/option-list): multiple choices when the decision isn't binary - [Message Draft](/docs/message-draft): review and approve outgoing messages - [Preferences Panel](/docs/preferences-panel): structured settings capture

Tool UI