UI pour les agents IA

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.

Composants que vous utiliserez

• 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.

Installation

Ajoutez chaque composant ci-dessus avec la CLI shadcn. Vous possedez le source apres installation.

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

Questions frequentes

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.