Skip to content

Confirmation

Asks before a risky tool call runs. Approve or reject it: the answer replaces the buttons and is announced.

Sourcecomponents/confirmation.tsx
Parameters
{  "folder": "drafts/",  "count": 3}
The agent wants to delete 3 drafts. This can’t be undone.

Usage

Confirmation usage
import { Confirmation, ConfirmationAccepted, ConfirmationAction, ConfirmationActions, ConfirmationRejected, ConfirmationRequest, ConfirmationTitle } from "@/components/confirmation";import type { ToolApproval } from "@/components/confirmation";import type { ToolState } from "@/components/lib/agent-types";
export function ConfirmationUsage({  approval,  state,  respond,}: {  approval?: ToolApproval;  state: ToolState;  respond: (approved: boolean) => void;}) {  return (    <Confirmation approval={approval} state={state}>      <ConfirmationTitle>        <ConfirmationRequest>Delete 3 drafts?</ConfirmationRequest>        <ConfirmationAccepted>You approved deleting the drafts.</ConfirmationAccepted>        <ConfirmationRejected>You kept the drafts.</ConfirmationRejected>      </ConfirmationTitle>      <ConfirmationActions>        <ConfirmationAction variant="outline" onClick={() => respond(false)}>          Reject        </ConfirmationAction>        <ConfirmationAction onClick={() => respond(true)}>Approve</ConfirmationAction>      </ConfirmationActions>    </Confirmation>  );}

When to use

Use when

Asking the user to approve a tool call before it runs, then showing what they chose. Approve is primary, Reject outline; the answer is announced

Don’t use when

A plan to approve before any work starts (use Plan); a destructive action the user started themselves (use Alert Dialog)