# signoff-ui

> Review what your agent changed and approve what it may do: React components for multi-file diff review and tool approvals, for AI SDK and AG-UI agents, inside the chat UI you already have.

**Website and docs:** [signoff-ui.vercel.app](https://signoff-ui.vercel.app), with a playground where a scripted coding agent asks for a review and an approval, driven from the keyboard, with no API key.

## Docs

- [Introduction](https://signoff-ui.vercel.app/docs.md): What signoff-ui is: reviewing what an agent changed and approving what it may do, with the result going back to the agent.
- [Getting started](https://signoff-ui.vercel.app/docs/getting-started.md): Install from npm or the shadcn registry, add the styles, and build a Next.js run with a diff review and an approval. AI SDK 6 or 7, React 18 or 19.
- [Inside your chat UI](https://signoff-ui.vercel.app/docs/chat-ui.md): Use the review and approval components in assistant-ui, AI Elements or your own chat, with the code for each.
- [AG-UI agents](https://signoff-ui.vercel.app/docs/ag-ui.md): Render LangGraph, CrewAI, Mastra and other AG-UI agents with the same components, interrupts included, through useAgUiAgent.
- [Agent Client Protocol](https://signoff-ui.vercel.app/docs/acp.md): Render an ACP prompt turn with the same components: session updates as message parts, permission requests as approval cards with the agent's options, edits as diffs.
- [Accessibility](https://signoff-ui.vercel.app/docs/accessibility.md): Keyboard shortcuts scoped to focus, managed focus, announcements, contrast and how they are tested, with axe in jsdom and in Chrome.
- [Labels and translations](https://signoff-ui.vercel.app/docs/labels.md): Every word the components show or announce is a label: translate them all with one provider, or change a few, with a complete Portuguese example.
- [Performance and limits](https://signoff-ui.vercel.app/docs/limits.md): Bundle size per import, the stylesheet, known limitations with measured numbers, and what comes next.
- [How it compares](https://signoff-ui.vercel.app/docs/comparison.md): signoff-ui next to assistant-ui and AI Elements: what each does better, and where this kit differs.
- [Migrating from @dgesteves/agent-ui-kit](https://signoff-ui.vercel.app/docs/migrating-from-agent-ui-kit.md): The package is now signoff-ui: swap it, rename the CSS variables, classes and attributes with one command, and what changed in styles.css.
- [DiffReview](https://signoff-ui.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.
- [useDiffReview](https://signoff-ui.vercel.app/docs/components/use-diff-review.md): DiffReview without its markup: the review’s state, keyboard and result, for your own design system. Props, keyboard, theming.
- [ApprovalCard](https://signoff-ui.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.
- [useApprovalPolicy](https://signoff-ui.vercel.app/docs/components/use-approval-policy.md): Approval rules: once, for the session or always, by tool and argument pattern, with storage and an audit trail. Props, keyboard, theming.
- [AgentMessage](https://signoff-ui.vercel.app/docs/components/agent-message.md): A whole assistant message: reasoning, streaming markdown, tool calls, approvals and sources. Props, keyboard, theming.
- [ToolCallTimeline](https://signoff-ui.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.
- [RunMeter](https://signoff-ui.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://signoff-ui.vercel.app/docs/components/agent-status.md): The run’s state in one pill, announced to screen readers. Props, keyboard, theming.
- [Sources](https://signoff-ui.vercel.app/docs/components/sources.md): Citations as numbered chips or cards, linked from [n] markers in the answer. Props, keyboard, theming.
- [Markdown](https://signoff-ui.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://signoff-ui.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://signoff-ui.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://signoff-ui.vercel.app/llms-full.txt): the README, every docs page and the shadcn registry items
- [The quickstart, running](https://github.com/dgesteves/signoff-ui/tree/main/examples/nextjs-minimal): a Next.js 16 app with a review and an approval, against a scripted model
- [README: Why it exists](https://github.com/dgesteves/signoff-ui#why-it-exists)
- [README: Quickstart](https://github.com/dgesteves/signoff-ui#quickstart)
- [README: Works inside assistant-ui, AI Elements or your own chat](https://github.com/dgesteves/signoff-ui#works-inside-assistant-ui-ai-elements-or-your-own-chat)
- [README: Components](https://github.com/dgesteves/signoff-ui#components)
- [README: How it compares](https://github.com/dgesteves/signoff-ui#how-it-compares)

## Components

- `DiffReview`: Accept or reject an agent’s edits hunk by hunk, across files, and get the patched files back.
- `useDiffReview`: DiffReview without its markup: the review’s state, keyboard and result, for your own design system.
- `ApprovalCard`: Human-in-the-loop approval: what will run, how risky it is, and deny with a reason.
- `useApprovalPolicy`: Approval rules: once, for the session or always, by tool and argument pattern, with storage and an audit trail.
- `AgentMessage`: A whole assistant message: reasoning, streaming markdown, tool calls, approvals and sources.
- `ToolCallTimeline`: Every tool call with its state, a measured duration and a waterfall; errors inline.
- `RunMeter`: Tokens, estimated cost from your rates, time to first token and the prompt-cache hit rate.
- `AgentStatus`: The run’s state in one pill, announced to screen readers.
- `Sources`: Citations as numbered chips or cards, linked from `[n]` markers in the answer.
- `Markdown`: Streaming-safe GFM: unterminated syntax closed while streaming, no raw HTML, images only from hosts you allow.
- `Reasoning`: The model’s reasoning: open while it thinks, then one line, "Thought for 3.2s".
- `useAgUiAgent`: An AG-UI agent’s run as AI SDK messages, status, usage and approvals, for the same components.

## Optional

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