Tool Call Chip

An agent-activity chip — tool action label plus muted result meta, optionally rendered as a button.

Attributes searched2 resultsSQL query executed3 rows in 495msRunning workflow…

Install

Add Tool Call Chip from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.

pnpm dlx shadcn@latest add @vegastack/tool-call-chip

Usage

import { ToolCallChip } from "@/components/ui/tool-call-chip";

<ToolCallChip label="SQL query executed" meta="3 rows in 495ms">
  <Database aria-hidden />
</ToolCallChip>;

Sits alongside Marker (status lines), Attachment (files/artifacts), and CodeBlock (results) — the four pieces that turn a Message stream into an agent transcript. See the agent transcript recipe.

Examples

Attributes searched2 resultsSQL query executed3 rows in 495msRunning workflow…

States

Compose the leading slot per state: a Spinner while the tool runs (label only, no meta yet), the tool's icon once finished (label + result meta). The chip itself never animates — arrival into a transcript can opt into motion-enter-up at the call site.

Interactive chips

Pass render={<button />} when activating the chip reveals the call's detail (arguments, raw result). Give the button a complete aria-label — label and meta read as one phrase.

API Reference

Prop	Type	Default	Description
`label`*	`React.ReactNode`	—	The action label — ink voice ("Attributes searched").
`meta`	`React.ReactNode`	—	Muted result meta after the label ("2 results", "3 rows in 495ms").
`render`	`useRender.RenderProp<Record<string, unknown>>`	—	Render the chip as a different element (e.g. `render={<button />}` when the chip expands the call's detail) via Base UI `render` composition.

Data attributes and CSS variables on ToolCallChip

Attribute	Values
`data-slot`	`"tool-call-chip-meta"`

Accessibility

The visible label names the tool action; meta supplements it with a result summary.
Leading glyphs stay decorative because the text carries state and meaning.
When composed as a button, supply an accessible name that describes the action revealed on activation.

Key	Action
`Tab`	Move to an interactive chip; static chips are skipped.
`Enter` / `Space`	Activate a chip composed as a button.

Contract	States tested
Behaviour	`default`
Accessibility	`semantic-html`
Visual	`default`, `hover`

Do / Don't

Use a short past- or present-tense action label and reserve meta for compact result context.

Don't

Use the chip as an unlabeled icon button or stream rapidly changing progress into its meta text.