BlocksToolApproval

Tool Approval

Human-in-the-loop prompt that asks the user to approve or reject a tool call.

ToolApproval ships with a full API table, a copyable example, and accessibility notes.

tsx

Approve tool call: send_email?

{
  "to": "user@example.com",
  "subject": "Weekly summary"
}

Installation

Install the package once, then import ToolApproval from its direct entry point or from the root.

bash

pnpm add @agent-ui/react

tsx

import { ToolApproval } from "@agent-ui/react";

Tailwind CSS v4 users: add @source "../node_modules/@agent-ui/react/src" to the global stylesheet so the library utilities are generated.

Usage

The example below is the same code that renders the preview. Copy it, swap in your own handlers, and ship.

tsx

1import { ToolApproval } from "@agent-ui/react";
2 
3<ToolApproval
4  toolName="send_email"
5  args={{ to: "user@example.com" }}
6  onApprove={approve}
7  onReject={reject}
8/>

API reference

Every prop ToolApproval accepts, its type, default, and behaviour.

API reference for this component
Name	Type	Default	Description
toolName	string	—	Tool awaiting approval.
args	Record<string, unknown>	—	Arguments rendered as JSON.
onApprove	() => void	—	Approve handler.
onReject	() => void	—	Reject handler.
className	string	—	Merged onto the panel.

Use it with the rest of the library

ToolApproval composes with MessageList, ChatShell, useChat, and the provider compose blocks. Browse the full reference or see all components in the gallery.

8 lines · copy-ready