dgesteves/signoff-ui

Review what your agent changed and 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, AG-UI and ACP agents, inside assistant-ui, AI Elements or your own chat.
**Works with**
**Website and docs:** 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.
https://github.com/user-attachments/assets/caf5f11c-6f12-430b-8b72-845c406ded7a
The playground , driven from the keyboard: tool calls stream into the timeline, Y approves the install, A / R review hunks, Ctrl + ↵ applies. Then the AG-UI demo , a real @ag-ui/client agent that resumes once you approve.
The playground , driven from the keyboard: tool calls stream into the timeline, Y approves the install, A / R review hunks, Ctrl + ↵ applies. Then the AG-UI demo , a real @ag-ui/client agent that resumes once you approve.
-->
Why it exists
Coding and editing agents propose changes across several files and ask to run commands that can break things, and someone has to sign off on both. The chat kits most teams use stop short there: assistant-ui's reviewable diff takes one file's hunks, already split, and its apply returns nothing, while AI Elements has no diff at all and a confirm/deny you wire up yourself. DiffReview computes the hunks from each file's old and new contents, lets a person accept or reject them (or whole files) and comment on lines from the keyboard, and gives the agent back each file with only the accepted hunks applied, the hunks it rejected and every comment with its lines. ApprovalCard shows exactly what will run and how risky it is, takes a reason with a denial, lets a person approve once, for the session or always (by tool and argument pattern) and edit the arguments first, and tells automatic decisions apart from a person's.
Quickstart
**Try it without an API key.** The reference app is a coding agent on a scripted model: it asks before it runs a command, and nothing it writes lands until you apply it in a review. One command, nothing to copy:
examples/nextjs-minimal, the three files below as an app on a scripted model, starts the same way: npx create-next-app@latest my-quickstart --example https://github.com/dgesteves/signoff-ui/tree/main/examples/nextjs-minimal.
**Add it to your app.** Install the kit:
Add the styles once: @import 'signoff-ui/tailwind.css'; after Tailwind v4 in your CSS, or import 'signoff-ui/styles.css'; with Tailwind v3 or none. Your first sign-off then renders an approval card and a review, with no AI SDK and no key.
**Connect an agent.** Install the AI SDK and a model provider with it:
Then add the three files below to a Next.js App Router app (under src/app/ if your app has a src folder). They build as they are, and run with OPENAI_API_KEY set. Without Tailwind, the classes on your own elements in them need this CSS.
**The route.** The agent proposes edits through review_changes, a tool with no execute, so the page answers it. toolApproval makes AI SDK 7 stop and ask before run_command:
**The client component.** AgentMessage lays out the run with the approval card inline, and renderTool puts a DiffReview where the proposed edit is. Its onSubmit result goes back to the agent as the tool's output, through reviewToolOutput: a summary, each file as applied, the hunks rejected and the reviewer's comments. The run continues once every answer is in. When a request fails, error says why, such as a missing API key:
**Render it from a page.** Put it inside , which useChat needs in new Next.js 16 apps:
Getting started walks through it, including AI SDK 6, other models, typed messages, what an approval is and the shadcn registry (npx shadcn@latest add https://signoff-ui.vercel.app/r/diff-review.json). examples/nextjs-minimal adds a cost meter, the run's timing and a read_file tool, and CI drives it in Chrome through the review, the approval and the final answer.