Patterns / Tool call UI

Tool call UI for AI agents

A reply built from tool calls should say what the agent did, not dump JSON. ToolCall shows one call as a compact row: what it did in plain words, its status, and how long it took. It expands to the input and output. A failed call opens by default and leads with its error.

ToolCallGroup shows a run of calls and folds a long one behind a count. Inside a Message, the tool calls are one of the reply's blocks, so they sit in order with the text.

The adapters turn the Vercel AI SDK's, the Claude Agent SDK's and AG-UI's tool parts into these rows, with titles you choose per tool.

The components

  • Tool callFreeOne call as a row, or a group of them.
  • MessageFreeA reply whose blocks include tool calls, in order with the text.
  • PayloadFreeCode or query text the agent ran, shown as a block.
  • Guardrail noticeProOne line when a guardrail stopped a call: what, and which rule.
  • Tool permissionsProWhat each tool may do: always, ask first, or never.

See it working

More in the examples: Tool call

Install

With the shadcn CLI

Each component brings in what it depends on. These are free (MIT).

Good to know

  • A duration is never estimated: while a call is running it has none.