v0.6.0MITReact 18 & 19
Review what your agent changed. Approve what it may do.
React components for multi-file diff review and tool approvals that return a result your agent acts on. For AI SDK 6 & 7 and AG-UI agents, inside assistant-ui, AI Elements or your own chat.
npm i signoff-uiLive demo, no API key. A scripted coding agent adds rate limiting to a Next.js route. Every panel is a kit component.
Components
Review and approval, and the run around them
DiffReview and ApprovalCard are the sign-off. The others render the rest of the run, or hand AgentMessage a whole assistant message and get them all, in order. Keyboard-first, announced to screen readers, and in both the npm package and the shadcn registry.
- DiffReviewAccept or reject an agent’s edits hunk by hunk, across files. Returns each file with only the accepted hunks applied.J K move · A R decide
- ApprovalCardApprove or deny a tool call: exactly what will run, how risky it is, and a reason the agent reads. Automatic decisions are shown as such.Y approve · N deny
- AgentMessageA whole assistant message: reasoning, streaming markdown, tool calls grouped into a timeline, approvals inline and sources.useChat parts, as they are
- ToolCallTimelineEvery tool call with its state, duration and a waterfall. Errors show inline; input and output on demand.↑ ↓ between calls
- RunMeterTokens, estimated cost from your rates, time to first token and the prompt-cache hit rate.compact or expanded
- AgentStatusThe run’s state in one pill, with the tool that’s running and the time spent working.announced to screen readers
- SourcesCitations as chips or cards, with inline [n] markers in the answer that link to them.renders on the server too
- useAgUiAgentRuns any AG-UI agent and hands the same components its messages, status and usage. Interrupts become approvals.signoff-ui/ag-ui
Works with
Fits the stack and the chat you already have
It renders what your agent already streams, so there’s no runtime or state model to adopt, and it calls no model itself: bring OpenAI, Anthropic, Google, xAI, Mistral or a local model, with your own keys. Typed against AI SDK 6 and 7, tested on React 18 and 19 in CI, and prerenders under Next.js 16 with cacheComponents.
AI SDK 6 & 7
Hand it the last assistant message from
useChat. Approvals fromtoolApprovalshow inline, and a review answers a tool with noexecutethroughaddToolOutput.<AgentMessage message={last} onToolApproval={addToolApprovalResponse} renderTool={review} />AG-UI
LangGraph, CrewAI, Mastra, Pydantic AI and the rest of the protocol’s integrations, through one hook. Interrupts become approval cards.
import { useAgUiAgent } from 'signoff-ui/ag-ui';npm or shadcn
Install the package, or copy a component’s source into your app with the shadcn CLI and make it yours.
npx shadcn@latest add https://signoff-ui.vercel.app/r/diff-review.jsonYour chat UI
Inside assistant-ui, AI Elements or your own components. A Tailwind v4 entry, or a stylesheet for Tailwind v3 or none that styles only the components’ own elements.
import 'signoff-ui/styles.css';
Comparison
How it compares
assistant-ui and AI Elements cover the whole chat, and you may well want one of them for it. assistant-ui’s Elements collection (since August 2026) is the closest to this kit, and far wider: an approval card, a reviewable diff, a trace waterfall, a tool timeline, a cost meter, agent status and more. Here’s where signoff-ui differs on the parts they share.
- Diff review
- signoff-ui: Takes the old and new text of several files and computes the hunks, with word-level highlights. Returns each file with only the accepted hunks applied.
- assistant-ui Elements: Takes one file’s hunks, already split, and reports keep or discard per hunk; apply returns nothing.
- Approvals
- signoff-ui: What will run, a risk level when you give one, deny with a reason, and
toolApproval’s automatic decisions shown as such. Y and N, scoped to focus. - assistant-ui Elements: Allow once, allow always or deny.
- Data in
- signoff-ui: A
UIMessagefromuseChatas it is, or an AG-UI agent throughuseAgUiAgent. No runtime to adopt. - assistant-ui Elements: Props (agent status also has a runtime-bound variant). With the assistant-ui runtime, its docs show how to map approvals, message timing and step usage into them.
- Tool timeline
- signoff-ui: Every state, with durations measured on the client that leave out time spent waiting for an approval.
- assistant-ui Elements: A summary of what was done, without durations or states.
- Cost
- signoff-ui: Prices tokens from your rates and shows the prompt-cache hit rate.
- assistant-ui Elements: Displays cost strings you format.
- Styling
- signoff-ui: Tailwind v4, v3 or none: the npm package ships a precompiled stylesheet scoped to its own elements.
- assistant-ui Elements: Tailwind v4.
- React
- signoff-ui: 18 or 19.
- assistant-ui Elements: 18 or 19.
AI Elements is Vercel’s shadcn registry for AI SDK apps, with the widest coverage of the message surface: conversation, prompt input, reasoning, sources, a per-call Tool card, a Confirmation for approvals, a Context usage indicator and more. It targets React 19 and Tailwind v4, and is written against AI SDK 6.
They compose. Render the thread with either library and use these components for the review and the approvals. The full comparison includes what they do better, such as assistant-ui’s “allow always” and nested sub-agents.
Get started
Start with the sign-off
Put a DiffReview on the tool that proposes edits and a ToolApprovalCard on the ones that need a person, and add the rest when you want them. Install from npm, or copy the source in with the shadcn CLI. MIT licensed.
npm i signoff-ui