Tool Call Card | Tuff Docs

Usage

Basic

The host advances toolCall.status; the expanded body switches content with it.

Loading demo...

Best Practices

Put structured results (a table, a chart, a widget) in the result slot and keep output as the plain-text fallback.
On retry, set status back to running right away so users don't click repeatedly.
Append logs line by line instead of replacing the block, so tail-following stays smooth.
On non-English surfaces, override all six label props together to avoid a mixed-language card.
Write summary as what the call did, not the tool name again; the collapsed row is all users scan.

API Reference

Props

Name	Type	Default	Description
`toolCall`	`AiToolCallPart`	—	The call to render. Required.
`defaultExpanded`	`boolean`	`false`	Initial expanded state; read once, on mount.
`retryLabel`	`string`	`'Retry'`	Label of the retry button.
`pendingLabel`	`string`	`'Queued'`	Label for `pending`.
`runningLabel`	`string`	`'Running'`	Label for `running`.
`doneLabel`	`string`	`'Done'`	Label for `done` and any unmatched status.
`errorLabel`	`string`	`'Failed'`	Label for `error`.
`inputLabel`	`string`	`'Input'`	Heading of the input section.

AiToolCallPart is { type, id, name, status, summary?, input?, output?, error?, logs? }, where status is 'pending' | 'running' | 'done' | 'error'.

Events

Name	Payload	Description
`retry`	`(id: string)`	Fires when retry is clicked, with `toolCall.id`.
`toggle`	`(expanded: boolean)`	Fires when the header is clicked, with the new expanded state.

Slots

Name	Scope	Description
`summary`	`{ toolCall }`	Replaces the summary in the collapsed header.
`result`	`{ toolCall }`	Result surface for the host's own rendering; replaces `output` when provided.
`icon`	`{ status }`	Replaces the status icon.

Overview

The body follows status: running shows logs, done shows the result slot (falling back to output), and error shows error with a retry button; input shows whenever it is set.
Every change to logs scrolls the log region to the bottom.
status is mirrored onto the root's data-status for styling.

Technologies

AiToolCallPart is defined and exported by ai-elements.
Source: packages/tuffex/packages/components/src/tool-call-card/.