Astryx Design System

Chat Tool Calls@astryxdesign/core v0.0.15 · ChatToolCalls

Usage

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
import {ChatToolCalls} from '@astryxdesign/core/Chat'

Best practices

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.

Examples

Common configurations, variations, and states.

ChatToolCalls — Expandable

Tool calls with expandable result details showing diffs and command output in code blocks. Click a row to reveal its result.

ChatToolCalls — Statuses

All four status states (pending, running, complete, and error) shown together in a single group.

ChatToolCalls — Simple

A single inline tool call above a collapsible multi-call group with diff stats. Shows both layouts side by side.

Usage

import {ChatToolCalls} from '@astryxdesign/core/Chat'

Best practices

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.