Tools & reasoningToolCallCard

Tool Call Card

ToolCallCard is the audit trail for agent actions. Status colors, a JSON argument preview, timing, and error output make every tool call inspectable without leaving the transcript.

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

tsx

Installation

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

bash

pnpm add @agent-ui/react

tsx

import { ToolCallCard } from "@agent-ui/react/tool-call-card";

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 { ToolCallCard } from "@agent-ui/react";
2 
3<ToolCallCard
4  name="search_web"
5  status="success"
6  args={{ query: "latest AI news" }}
7  result='[{"title":"..."}]'
8  duration={1234}
9/>

API reference

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

API reference for this component
Name	Type	Default	Description
name	string	—	Tool name shown in the header.
status	"pending" \| "running" \| "success" \| "error"	—	Status pill and border treatment.
args	Record<string, unknown>	—	Arguments rendered as formatted JSON.
result	string	—	Result string rendered below the details.
error	string	—	Error message when status is error.
details	unknown	—	Additional structured metadata.
duration	number	—	Execution time in milliseconds.
className	string	—	Inherits every native div attribute, including id, aria-, data-, onClick, and style.

Compound parts

ToolCallCard exposes these parts for composition.

Compound parts
Part	Description
ToolApproval	Block variant that asks the user to approve or reject a call before it runs.

Use it with the rest of the library

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

9 lines · copy-ready