All components (244)

Approve an agent action

AI · AgentApprovalDialog

What it is and when to use it

The dialog for a person to approve or reject what an AI agent wants to do: which tool, with which data, what would change and with which risk.

When to use it

Before an agent sends an email, changes a price, deletes a record or does anything with effects outside the conversation.
tool is the name of the tool and summary what it does in a sentence. args is the data (shown as sorted JSON) and diff what would change.
risk puts the risk label; allowRemember offers "always allow" (only for low-risk things); expiresAt makes it expire.
editableArgs lets the data be corrected before approving: if it changes, it comes back in args.
onDecide receives { approved, comment, remember, args }. On rejecting, a comment is asked for so the agent knows why.

When not to

A yes or no confirmation by the person themselves: ConfirmAction or useConfirmation.
Approvals by several people in steps: ApprovalFlow.
It only collects the decision: running the tool and checking that it can be done is the server's job.

Keyboard: it is a Dialog: focus enters on opening, Escape closes and returns to the trigger.

Accessibility: the risk is written out, not only in colour; expiry and failures are said with text, and the data is read as text.

Fine appearance: the data is in code font and scrolls if it is long.

What it looks like

You haven't decided anything yet.

<AgentApprovalDialog
  open={abierto}
  onOpenChange={setAbierto}
  tool="enviar_correo"
  summary="The agent wants to let the customer know their order has shipped."
  args={{ to: "[email protected]", asunto: "Your order #1042 has shipped" }}
  editableArgs
  risk="medium"
  allowRemember
  requireReason
  onDecide={(decision) => ejecutarOCancelar(decision)}
/>

Props

Import it with import { AgentApprovalDialog } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`onDecide`required	`(decision: AgentDecision) => void \| Promise<void>`	Send the decision. If it throws or rejects, it says so and the dialog stays open. The decision is executed and checked by the server: this dialog only collects it.
`open`required	`boolean`	—
`tool`required	`string`	The name of the tool the agent wants to use («send_email»).
`allowRemember`	`boolean`	Offer "always allow". Off by default: only for low-risk tools.
`args`	`unknown`	The data it would call it with. Shown as sorted JSON.
`className`	`string`	—
`diff`	`{ readonly before: string; readonly after: string; readonly format?: DiffFormat; }`	What would change, if known: the before and the after.
`editableArgs`	`boolean`	Let the data be changed before approving. Off by default.
`expiresAt`	`Date`	When the request expires: from then on it cannot be approved.
`onOpenChange`	`(open: boolean) => void`	—
`requireReason`	`boolean`	Require a comment when rejecting, so the agent knows why. On by default.
`risk`	`AgentRisk`	—
`summary`	`string`	What it does, in a sentence for whoever does not know what the tool is («Send an email»).

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: