# agent-ui-kit

> React components for the hard parts of agentic products: watching an agent work, approving what it does, reviewing what it changed, and understanding what the run cost. For AI SDK 6 & 7 and AG-UI.

Typed against AI SDK 6 and 7 `UIMessage` parts (`ai@^6.0.0 || ^7.0.102`), runs on React 18 and 19 (`react@^18.2.0 || ^19.0.0`), and tested against each in CI. [AG-UI](https://github.com/dgesteves/agent-ui-kit#ag-ui-agents) agents (LangGraph, CrewAI, Mastra, Pydantic AI and the rest of the protocol's integrations) render through an adapter. Ships as an npm package with a precompiled stylesheet, and as a shadcn registry. Keyboard-first, screen-reader announced, and audited with axe in jsdom and in a real browser.

## Docs

- [Introduction](https://agent-ui-kit-demo.vercel.app/docs.md): What agent-ui-kit is, why it exists, and how it reads an agent run.
- [Getting started](https://agent-ui-kit-demo.vercel.app/docs/getting-started.md): Install from npm or the shadcn registry, add the styles, render a first run in Next.js, and theme it. AI SDK 6 or 7, React 18 or 19.
- [AG-UI agents](https://agent-ui-kit-demo.vercel.app/docs/ag-ui.md): Render LangGraph, CrewAI, Mastra and other AG-UI agents with the same components, interrupts included, through useAgUiAgent.
- [AgentMessage](https://agent-ui-kit-demo.vercel.app/docs/components/agent-message.md): A whole assistant message: reasoning, streaming markdown, tool calls, approvals and sources. Props, keyboard, theming.
- [ToolCallTimeline](https://agent-ui-kit-demo.vercel.app/docs/components/tool-call-timeline.md): Every tool call with its state, a measured duration and a waterfall; errors inline. Props, keyboard, theming.
- [ApprovalCard](https://agent-ui-kit-demo.vercel.app/docs/components/approval-card.md): Human-in-the-loop approval: what will run, how risky it is, and deny with a reason. Props, keyboard, theming.
- [DiffReview](https://agent-ui-kit-demo.vercel.app/docs/components/diff-review.md): Accept or reject an agent’s edits hunk by hunk, across files, and get the patched files back. Props, keyboard, theming.
- [RunMeter](https://agent-ui-kit-demo.vercel.app/docs/components/run-meter.md): Tokens, estimated cost from your rates, time to first token and the prompt-cache hit rate. Props, keyboard, theming.
- [AgentStatus](https://agent-ui-kit-demo.vercel.app/docs/components/agent-status.md): The run’s state in one pill, announced to screen readers. Props, keyboard, theming.
- [Sources](https://agent-ui-kit-demo.vercel.app/docs/components/sources.md): Citations as numbered chips or cards, linked from [n] markers in the answer. Props, keyboard, theming.
- [Markdown](https://agent-ui-kit-demo.vercel.app/docs/components/markdown.md): Streaming-safe GFM: unterminated syntax closed while streaming, no raw HTML, images only from hosts you allow. Props, keyboard, theming.
- [Reasoning](https://agent-ui-kit-demo.vercel.app/docs/components/reasoning.md): The model’s reasoning: open while it thinks, then one line, "Thought for 3.2s". Props, keyboard, theming.
- [useAgUiAgent](https://agent-ui-kit-demo.vercel.app/docs/components/use-ag-ui-agent.md): An AG-UI agent’s run as AI SDK messages, status, usage and approvals, for the same components. Props, keyboard, theming.
- [Everything in one file](https://agent-ui-kit-demo.vercel.app/llms-full.txt): the README as plain markdown, and the shadcn registry items
- [The quickstart, running](https://github.com/dgesteves/agent-ui-kit/tree/main/examples/nextjs-minimal): a Next.js 16 app against a scripted model
- [Why it exists](https://github.com/dgesteves/agent-ui-kit#why-it-exists)
- [Quickstart](https://github.com/dgesteves/agent-ui-kit#quickstart)
- [Components](https://github.com/dgesteves/agent-ui-kit#components)
- [How it maps to AI SDK message parts](https://github.com/dgesteves/agent-ui-kit#how-it-maps-to-ai-sdk-message-parts)
- [AG-UI agents](https://github.com/dgesteves/agent-ui-kit#ag-ui-agents)
- [Accessibility](https://github.com/dgesteves/agent-ui-kit#accessibility)
- [Theming](https://github.com/dgesteves/agent-ui-kit#theming)
- [Bundle size](https://github.com/dgesteves/agent-ui-kit#bundle-size)
- [Design decisions](https://github.com/dgesteves/agent-ui-kit#design-decisions)
- [How it compares](https://github.com/dgesteves/agent-ui-kit#how-it-compares)
- [Known limitations](https://github.com/dgesteves/agent-ui-kit#known-limitations)
- [Development](https://github.com/dgesteves/agent-ui-kit#development)

## Components

- `ToolCallTimeline`: <source media="(prefers-color-scheme: light)" srcset="docs/media/components/tool-call-timeline-light.png">
- `ApprovalCard`: <source media="(prefers-color-scheme: light)" srcset="docs/media/components/approval-card-light.png">
- `DiffReview`: <source media="(prefers-color-scheme: light)" srcset="docs/media/components/diff-review-light.png">
- `RunMeter`: <source media="(prefers-color-scheme: light)" srcset="docs/media/components/run-meter-light.png">
- `AgentStatus`: <source media="(prefers-color-scheme: light)" srcset="docs/media/components/agent-status-light.png">
- `Sources`: <source media="(prefers-color-scheme: light)" srcset="docs/media/components/sources-light.png">
- `AgentMessage`: <source media="(prefers-color-scheme: light)" srcset="docs/media/components/agent-message-light.png">

## Optional

- [Playground](https://agent-ui-kit-demo.vercel.app): a scripted agent run with replay and keyboard controls
- [Component gallery](https://agent-ui-kit-demo.vercel.app/gallery): every component in isolation, with install snippets
- [npm package](https://www.npmjs.com/package/@dgesteves/agent-ui-kit)
- [Changelog](https://github.com/dgesteves/agent-ui-kit/blob/main/packages/agent-ui-kit/CHANGELOG.md)