@agent-ui-kit

Accessible React components for agent runs: tool call timeline, human-in-the-loop approvals, per-hunk diff review and run telemetry, typed against AI SDK message parts.

13 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/registry.json

pnpm pnpm dlx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/registry.json

bun bunx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/registry.json

fetch registry curl -s https://agent-ui-kit-demo.vercel.app/r/registry.json

Components

13 total

Diff Review component

Review agent edits across files: accept or reject hunks or whole files, comment on lines, mark files viewed, from the keyboard; returns the applied files, reje…

npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/diff-review.json

useDiffReview component

DiffReview without its markup: parsing (in a worker for large files), decisions, line comments, viewed files, context and the keyboard, for your own design sys…

npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/use-diff-review.json

Approval Card component

Approve or deny a tool call once, for the session or always, by tool and argument pattern: an args preview, editable arguments, risk levels, a denial reason, a…

npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/approval-card.json

useApprovalPolicy component

Approval rules without markup: once, session or always, by tool and argument glob, deny winning; pluggable storage, an audit trail, and the same rules as AI SD…

npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/use-approval-policy.json

Agent Message component

Renders an assistant UIMessage: markdown, reasoning, grouped tool calls, inline approvals and sources.

npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/agent-message.json

Tool Call Timeline component

Vertical timeline of AI SDK tool calls with live states, durations, a waterfall and expandable input/output.

npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/tool-call-timeline.json

Run Meter component

Tokens, estimated cost and latency (TTFT, total) for an agent run, compact or expanded.

npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/run-meter.json

Agent Status component

Run state pill (thinking, working, waiting for approval, done, stopped, error) announced through an aria-live region.

npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/agent-status.json

Sources component

Citation chips and cards for AI SDK source-url and source-document parts.

npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/sources.json

Markdown component

Streaming-safe GFM markdown with linked [n] citations and a typing caret.

npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/markdown.json

Reasoning component

Collapsible model reasoning that opens while streaming and summarizes its duration.

npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/reasoning.json

AG-UI Adapter component

useAgUiAgent: renders any AG-UI agent (LangGraph, CrewAI, Mastra, Pydantic AI) with these components, interrupts as approvals.

npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/ag-ui.json

assistant-ui Tool UIs component

signoffTools for MessagePrimitive.Parts: DiffReview for assistant-ui tool calls that propose files, its result sent back with addResult, and the approval card …

npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/assistant-ui.json