UI for AI agents

Render tool calls & agent steps in React

Agentic apps are only trustworthy when users can see what the agent is doing. Render each tool invocation with its arguments and result, surface the agent's reasoning, and show the whole run as a live timeline.

Components you'll use

• AI Tool Call DisplayRender an AI agent's tool/function calls in React: name, serialized input, status, and returned output. Built for agentic apps. Install via the shadcn CLI.
• Agent ActivityVisualize an AI agent's execution chain in React — steps, tools, decisions, and progress. The activity timeline for agentic apps. Install via the shadcn CLI.
• Thinking BlockCollapsible React block that streams an AI's thinking/reasoning steps. Surface chain-of-thought without cluttering the final answer. Install via the shadcn CLI.

Install

Add every component above with the shadcn CLI. You own the source after install.

pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-tool-call-display.json
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/agent-activity.json
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/thinking-block.json

Frequently asked

How do I display an agent's function/tool calls?

Use AI Tool Call Display for each invocation — it renders the tool name, serialized arguments, status, and returned output. Pair it with Agent Activity to show the full multi-step run.

Can I show the agent's reasoning?

Yes — Thinking Block renders streaming chain-of-thought in a collapsible panel, separate from the final answer.