ToolCallChip

Compact indicator for one agent tool invocation.

ToolCallChip shows one tool invocation in an agent turn: a spinner with a softly breathing name while it runs, a springy swap to a green wrench on completion, an alert on error. The name renders in mono, with an optional detail (file path, command) that truncates first when space is tight. AgentChat maps AI SDK tool parts onto these automatically.

writeFilesrc/db/schema.tsrunCommandbun run db:pushcheckpointbook tracker v1restoresnap-01j8

import { toolCalls } from "./fixtures";
import { ToolCallChip } from "./tool-call-chip";

export const ToolCallChipDemo = () => (
  <div className="flex max-w-sm flex-col items-start gap-1">
    {toolCalls.map((call) => (
      <ToolCallChip
        detail={call.detail}
        key={call.name}
        name={call.name}
        state={call.state}
      />
    ))}
  </div>
);

export default ToolCallChipDemo;

Install

npx shadcn@latest add https://ui.neon.com/r/tool-call-chip.json

Usage

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

<ToolCallChip name="writeFile" state="running" />;

Wiring to Neon

Map AI SDK tool parts (from message.parts) onto chips: output-available → done, output-error → error, anything else → running. The typed example shows the full mapping for both static and dynamic tool parts.

Props

PropType

namestring

Tool name, shown in mono.

Typestring

state?"running" | "done" | "error"

Lifecycle state of the invocation.

Type"running" | "done" | "error"

Default"done"

detail?string

What the tool touched, e.g. a file path or command.

Typestring

Accessibility

The chip is plain text with an icon, announced as one phrase: the tool name and its state.
Running state exposes role="status", so completion is announced without stealing focus.
The spinner-to-wrench swap is conveyed by the status text, not color alone.
Spinner rotation is static under prefers-reduced-motion.