# How it compares > signoff-ui next to assistant-ui and AI Elements: what each does better, and where this kit differs. Source: https://agent-ui-kit-demo.vercel.app/docs/comparison signoff-ui does one part of an agent product: the step where a person reviews what the agent changed and decides what it may do. [assistant-ui](https://github.com/assistant-ui/assistant-ui) and [AI Elements](https://github.com/vercel/ai-elements) cover the whole chat, and you may well want one of them for it. They compose: render the thread with either, and these components for the review and the approvals ([Inside your chat UI](https://agent-ui-kit-demo.vercel.app/docs/chat-ui) shows how). ## What they do better - **assistant-ui** is a chat runtime plus composable primitives, with adapters for the AI SDK, LangGraph, AG-UI and others, on React 18 or 19. Its Elements collection (since August 2026) is far wider than this kit, with agent pieces close to it: an approval card, a reviewable diff, a trace waterfall, a tool timeline, a cost meter, agent status and more. Its task card shows nested sub-agents, which this kit renders flat. It ships releases near daily. - **AI Elements** is Vercel's shadcn registry for AI SDK apps, with the widest coverage of the message surface: conversation, message, prompt input, reasoning, sources, a per-call `Tool` card, a `Confirmation` for tool approvals, a `Context` usage indicator and more. If you want the whole chat in shadcn style, start there. It targets React 19 and Tailwind v4, and its components are written against AI SDK 6 (`ai@^6.0.105`). ## Where signoff-ui differs | Topic | signoff-ui | assistant-ui Elements | | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Diff review | The old and new text of several files, or a patch, with the hunks computed and word-level highlights. Hunks or whole files accepted or rejected, comments on lines, files marked viewed. Returns each file with only the accepted hunks applied, the rejected hunks and the comments, ready to send back as a tool result, or as a unified patch. | One file's hunks, already split; keep or discard per hunk, and apply returns nothing. | | Approvals | What will run, a risk level when you give one, deny with a reason, a second press for `critical`, and automatic decisions from `toolApproval` shown as such. Once, for the session or always, by tool and argument pattern, with rules that also run as AI SDK 7's `toolApproval`; arguments editable before approving; approve all pending; an audit trail. A key for each choice, scoped to focus. | Allow once, allow always or deny. | | Data in | A `UIMessage` from `useChat` as it is, or an AG-UI agent through `useAgUiAgent`. No runtime to adopt. | 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 | Every state, with durations measured on the client that leave out time spent waiting for an approval. | A summary of what was done, without durations or states. | | Cost | Prices tokens from your rates and shows the prompt-cache hit rate. | Displays cost strings you format. | | Styling | Tailwind v4, v3 or none: the npm package ships a precompiled stylesheet scoped to its own elements. | Tailwind v4. | | React | 18 or 19. | 18 or 19. | AI Elements has no diff review. Its `Confirmation` is a compound component you wire to the approval yourself, and its `Tool` card shows a call's input and output without timing. ## Also true of this kit - **It reads AI SDK messages as they are.** Hand `AgentMessage` a `UIMessage` from `useChat` and tool parts become one timeline with inline approvals, sources become citations, and usage metadata feeds the meter, with no per-component data mapping. - **Timings are measured, not supplied.** `useRunTiming` reports time to first token and active time per turn, across review and approval round trips. - **Accessibility is audited.** Focus-scoped shortcuts, live-region announcements and contrast are covered by axe in jsdom and in Chrome; see [Accessibility](https://agent-ui-kit-demo.vercel.app/docs/accessibility). - **It is smaller in scope.** There is no thread, composer or runtime here, and fewer components. What is missing is listed in [Performance and limits](https://agent-ui-kit-demo.vercel.app/docs/limits).