---
name: "@agent-ui-kit"
slug: "agent-ui-kit"
description: "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."
category: "AI/chat UI"
tags: ["accessibility", "ai", "cards"]
framework: "react"
license: "MIT"
author: "dgesteves"
website: "https://agent-ui-kit-demo.vercel.app"
github: "https://github.com/dgesteves/agent-ui-kit"
registry: "https://agent-ui-kit-demo.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 1
component_count: 10
generated_at: "2026-10-10T06:32:55.998Z"
---

# @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.

## Links

- Website: https://agent-ui-kit-demo.vercel.app
- GitHub: https://github.com/dgesteves/agent-ui-kit
- Registry JSON: https://agent-ui-kit-demo.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/agent-ui-kit
- This file: https://sh4dcn.vercel.app/md/agent-ui-kit.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/registry.json
bunx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/dgesteves/agent-ui-kit.git
# fetch the raw registry index
curl -s https://agent-ui-kit-demo.vercel.app/r/registry.json
```

## Components (10)

| name | type | description | install |
| --- | --- | --- | --- |
| agent-status | registry:component | Run state pill (thinking, working, waiting for approval, done, error) announced through an aria-live region. | `npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/agent-status.json` |
| tool-call-timeline | registry: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` |
| approval-card | registry:component | Human-in-the-loop approve/deny for tool calls with risk levels, an args preview and keyboard shortcuts. | `npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/approval-card.json` |
| diff-review | registry:component | Unified/split review of agent file edits with per-hunk accept/reject and keyboard navigation. | `npx shadcn@latest add https://agent-ui-kit-demo.vercel.app/r/diff-review.json` |
| run-meter | registry: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` |
| sources | registry: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 | registry: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 | registry: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` |
| agent-message | registry: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` |
| ag-ui | registry: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` |

## For AI agents

```text
You are adding components from @agent-ui-kit to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/agent-ui-kit.md) for the component list.
2. Fetch the machine-readable index: https://agent-ui-kit-demo.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: agent-ui-kit).
```