ChatToolCalls displays tool or function call invocations from an LLM response. Pass an array of calls and the component handles the rest: a single call renders inline, while multiple calls collapse into a summary with the latest call visible at the surface. Use it anywhere an AI agent shows what actions it took.
ts
| Guidance | Practices |
|---|---|
| Do | Include a target string on every call so the user can see what the tool acted on: a file path, a shell command, or a search query. |
| Do | Show a duration on completed calls so users can judge which tools are slow and understand why a response took time. |
| Do | Provide resultDetail with a code block for calls that produce output (diffs for edits, terminal output for shell commands) so users can inspect results inline. |
| Do | Set a unique key on each call item when streaming so React can animate additions without re-mounting completed rows. |
| Don't | Don't omit the status field. Without it the call defaults to complete, which is misleading for calls that are still running or have failed. |
| Don't | Don't display tool calls outside a chat message context; they are designed to sit inside an assistant message, not as standalone UI. |
| Don't | Don't use custom wrappers around individual calls; the component handles single vs. grouped layout automatically based on the array length. |
Tool calls with expandable result details showing diffs and command output in code blocks. Click a row to reveal its result.
All four status states (pending, running, complete, and error) shown together in a single group.
A single inline tool call above a collapsible multi-call group with diff stats. Shows both layouts side by side.