Tool Chips

Tool Chips is a compact record of a run. A summary line opens a list of calls. Each call shows what the tool did and what it acted on, and a call with output opens to show it. Under the calls, one chip for each changed file shows how many lines were added and removed, with the diff a hover or a press away.

Tool Chips shows whatever is in calls and changes. Append a call when your agent starts one, and update its status when it settles. Nothing is revealed on a timer.

Use Thinking State instead when the run is reasoning or search with little tool output.

ToolChips is one component that takes data. Installing tool-chips brings Collapsible and Popover along as registry dependencies.

Calls

A call's status is running, done, or error, and defaults to done. A running call shows a spinner in place of its icon. A failed call shows an alert icon in the danger color. A call with output becomes a button that opens the output. A call without output is plain text.

Output and diff lines

Each line has a kind: context, added, or removed. When any line in a block is added or removed, every line in the block starts with a sign, and changed lines sit on a tint. A change is marked by a character as well as by color.

File changes

maxVisibleChanges chips are shown, three by default. The rest wait behind a "Show 2 more" button, which reveals them all. A change with lines is a button that opens its diff in a popover, on hover or on a press. A change without lines is a plain chip.

The summary and every call with output are buttons that report whether they are expanded. The calls are a list. The file chips are a group named "Files changed".

A running or failed call has its status in words after its label, read only by screen readers. A file chip reads its counts as "6 added" and "4 removed" in place of the bare signs. All of these strings come from labels.

The diff popover can be opened and closed from the keyboard, and it takes its name from the file. Icons are decorative. With reduced motion, the spinner does not rotate and new rows appear without fading.

Tool Chips does not announce new calls as they arrive. If the person needs to hear progress, announce it from your own status region, at a pace that is not one message per call.

Map your agent's tool events onto calls, and its edits onto changes:

import { ToolChips, type ToolCall } from "@/components/ai/tool-chips"

const calls: ToolCall[] = run.toolCalls.map((call) => ({
  id: call.id,
  label: call.title,
  detail: call.target,
  detailIsCode: true,
  status: call.state,
  output: call.result?.lines,
}))

<ToolChips summary={`${calls.length} tool calls`} calls={calls} changes={run.fileChanges} />

Write the summary yourself, so it can say what matters in your product: "3 tool calls, 1 failed" is more useful than a count.

A run in progress

This preview adds one call each second and marks the last one failed. The failed call opens to show the error it returned.

ToolChips

Accepts native div props beyond those listed.

Types