ToolCallCard

When an assistant runs a tool the human should be able to see what was called, with what, and what came back. The header is a disclosure button with the status badge; the body holds the arguments (a flat object as key / value rows, anything else as JSON) and, once finished, the result.

import ToolCallCard from '@zuilib/ai/tool-call-card'

Statuses

Loading example

A success starts collapsed, an error starts open, and a card that transitions to error while mounted opens itself so the failure is seen; defaultOpen or the controlled open / onOpenChange override that. A collapsed body is unmounted, not hidden, so nothing inside it can take focus or be read out; the header's aria-controls points at the body while it exists. A text or JSON result longer than maxResultLength characters (20,000 by default) is cut there with a Show all toggle under it, and the result section carries data-truncated while cut. A result given while running is shown as a partial result.

Live

Loading example

Props

Prop	Type	Default	Description
namerequired	string	—
description	ReactNode	—
args	unknown	—	Flat object → key / value rows; else JSON
statusrequired	'queued' | 'running' | 'success' | 'error'	—
result	unknown	—	Text, element, or JSON; shown on success, or while running as a partial
error	ReactNode	—	Shown on error
elapsedMs	number	—	Milliseconds, formatted as 340ms / 1.2s
maxResultLength	number	20000	Characters of a text / JSON result before a Show all toggle
defaultOpen	boolean	—	Defaults to open only on error; a later transition to error also opens, unless the human has toggled the card or defaultOpen is set
open / onOpenChange	boolean / (open) => void	—	Controlled
statusLabels	Partial<Record<status, string>>	—
className	string	—

ToolCallValue (the value renderer) and formatDuration are exported for hosts that lay out their own card.