Tool Call
Visualize an AI agent's tool invocations with input, output, and status states.
ToolCall renders a collapsible card showing what tool an AI called, with what arguments, and what it returned. It supports four execution states: pending, running, success, and error. Error cards auto-expand; others respect defaultOpen.
Input
{
"query": "SELECT * FROM users LIMIT 10"
}Output
{
"rows": 10,
"data": [
"..."
]
}SMTP connection refused: timeout after 30s
Status states
- pending — tool call is queued; muted ring, clock icon
- running — animated spinner, blue ring; tool is currently executing
- success — green checkmark ring; output visible on expand
- error — red ring, auto-expands to show the error message inline
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Tool function name, rendered in monospace |
status | "pending" | "running" | "success" | "error" | "pending" | Execution state |
input | Record<string, unknown> | — | Tool input arguments, pretty-printed as JSON |
output | unknown | — | Tool output (shown only on success) |
error | string | — | Error message shown when status="error" |
defaultOpen | boolean | false | Expand details on mount (error always opens) |
className | string | — | Additional class names |
Source
packages/ui/src/tool-call.tsx — copy into components/ui/tool-call.tsx in your project.