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.