Tool Approval

A permission prompt for approving an AI agent's tool call — status badge, expandable parameters, and allow / deny actions.

Running

Allow once to watch the live status roll — approving spinner, approved, running, then complete. Replay resets the demo.

Loading…

Installation

CLI

npx @sonojs/ui@latest add tool-approval

Also needsnpx @sonojs/ui@latest add agent-code agent-disclosure && npm i lucide-react motion shiki

Usage

tool-approval.tsx

import {
  ToolApproval,
  ToolApprovalCode,
} from "@/components/sonojs/tool-approval"

export function Example() {
  return (
    <ToolApproval
      tool="bash"
      title="Allow this tool to run?"
      description="Inspect git status before proposing a commit."
      defaultOpen
      parameters={[
        {
          id: "command",
          label: "Command",
          value: (
            <ToolApprovalCode language="bash" code="git status --short" />
          ),
        },
      ]}
      onApprove={() => {}}
      onAlwaysAllow={() => {}}
      onDeny={() => {}}
    />
  )
}

Props

Prop	Type	Default	Description
tool	ReactNode	—	Tool name shown in mono under the title.
title	ReactNode	"Allow this tool to run?"	Primary question for the permission prompt.
description	ReactNode	—	Optional supporting copy under the tool name.
parameters	ToolApprovalParameter[]	[]	Expandable detail rows (`id`, `label`, `value`). Use `ToolApprovalCode` for highlighted snippets.
status	ToolApprovalStatus	"pending"	`pending` \| `approving` \| `approved` \| `denied` \| `running` \| `complete` \| `error`.
open / defaultOpen / onOpenChange	boolean / fn	uncontrolled	Controls the parameters disclosure.
onApprove / onAlwaysAllow / onDeny	() => void	—	Pending-state action handlers.
className	string	—	Merge classes on the card root.