---
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", "hooks"]
framework: "react"
license: "MIT"
author: "dgesteves"
website: "https://agent-ui-kit-demo.vercel.app"
github: "https://github.com/dgesteves/signoff-ui"
registry: "https://agent-ui-kit-demo.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 31
component_count: 13
generated_at: "2026-10-27T06:34:08.542Z"
---

# @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/signoff-ui
- Registry JSON: https://agent-ui-kit-demo.vercel.app/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/agent-ui-kit
- This file: https://sh4dcn.netlify.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/signoff-ui.git
# fetch the raw registry index
curl -s https://agent-ui-kit-demo.vercel.app/r/registry.json
```

## Components (13)

| name | type | description | install |
| --- | --- | --- | --- |
| diff-review | registry: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` |
| use-diff-review | registry: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 | registry: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` |
| use-approval-policy | registry: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 | 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` |
| 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` |
| 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` |
| agent-status | registry: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 | 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` |
| 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` |
| assistant-ui | registry: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` |

## For AI agents

```text
You are adding components from @agent-ui-kit to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.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.netlify.app/json (library slug: agent-ui-kit).
```