Approval

Human-in-the-loop gate. The agent pauses on an irreversible action until the user approves or denies it.

Delete 214 archived invoices

They'll be removed from storage permanently.

Installation

pnpm dlx shadcn@latest add @jds/approval

Usage

import { Approval } from "@/components/ai/approval"

<Approval
  title="Refund €68.90 to Maria Rossi"
  description="This can't be undone."
  decision={decision}
  onApprove={() => addToolResult({ approved: true })}
  onDeny={() => addToolResult({ approved: false })}
/>

API Reference

Approval

Prop	Type	Default
`title` The action, in plain words.	ReactNode	–
`description` Consequences.	ReactNode	–
`decision` Resolved state replaces the buttons.	"pending" \| "approved" \| "denied"	"pending"
`onApprove`	() => void	–
`onDeny`	() => void	–
`approveLabel` Use the verb: Refund, Delete, Send.	string	"Approve"

Agent Steps Artifact