How to show tool calls in an AI agent UI
Show every tool call as one line – tool, short summary, status and time – and let people open it for the exact arguments and result. Group many calls into a summary, show failures with a retry instead of hiding them, and move to a trace or graph view once a run makes dozens of calls across several agents.
One line per call
Raw JSON in the chat is unreadable and a bare spinner hides what the agent is doing. The middle ground is one line per call: the tool's name or logo, a short human summary ("Searched Linear for open bugs"), a status and how long it took. While it runs, the time ticks; when it's done, the line settles.
- Tool Call Card – An agent's tool call in one line – live timer, status and summary, folds open to highlighted arguments and result with copy, retry on errors and a group that sums them up
Details on demand
Developers and careful users want the arguments and the result. Keep them one click away, formatted and copyable, so the conversation stays readable for everyone else.
- Arguments as formatted, highlighted JSON – not a single long string
- The result trimmed to what matters, with a way to see all of it
- Copy buttons for both, for debugging and bug reports
Errors are part of the story
A failed call that disappears leaves people guessing why the answer is wrong. Show the failure in place – what failed and why – with a retry, and let the agent's next attempt appear right after it.
- Tool Call Card – An agent's tool call in one line – live timer, status and summary, folds open to highlighted arguments and result with copy, retry on errors and a group that sums them up
- Fallback Chain – One request finding a model that answers, as a small flow diagram – the request branches out to each model in its fallback order, a light runs to the one being tried, failed branches break red, and the one that answers runs on to the response
Many calls: group them
Agents often make five or ten calls for one answer. Fold them into a group ("Used 6 tools · 4.2s") that opens on click, so the reply isn't buried under its own work.
- Thinking State – AI working panel with a live timer, searched sources and thinking steps that appear one by one
- Tool Call Card – An agent's tool call in one line – live timer, status and summary, folds open to highlighted arguments and result with copy, retry on errors and a group that sums them up
Whole runs: trace or graph
Once a run spans several agents and dozens of calls, a list stops working. A trace waterfall shows every call on a timeline with its duration and cost; a graph shows which agents call which tools and how often.
- Trace Waterfall – Where the time and money of an agent run go – every LLM call, tool call and sub-agent as a bar on a live timeline, with tokens and cost per step, the slowest call marked and branches that fold into their parent
- Agent Graph – Agents and the tools they call as a living network – a pulse along the link for every call and its answer, busy links growing thicker, agents that breathe while they work and turn amber when they need you
- Agent Run – One autonomous agent run: the plan ticking through its steps, the tool calls, an approval it waits on and the draft it wrote
Install
Tool Call Card is free and open source (MIT) – one file, no dependencies.
npx shadcn@latest add https://www.affectui.com/r/tool-call-card.jsonQuestions
Should I show tool calls to end users at all?
Yes, in a quiet form. One line per call builds trust and explains slow answers; the full arguments and results can stay folded for those who want them.
How do I show tool calls from the OpenAI or Anthropic APIs?
Map each tool call to a name, its arguments, a status (running, done, failed), start and end times and the result. Those are the props the component needs, whatever API produced them.
Updated 2026-10-29