[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live) [Showcase](/c/showcase/41) # agenttrace-ui: Human-in-the-loop approval gates and reasoning traces built on AI SDK v6 35 views · 1 like · 1 post NikitaKharya (@nikitakharya09) · 2026-04-08 · ♥ 1 I built **agenttrace-ui**, an open-source React component library that makes AI agent reasoning visible to end-users. It is built entirely on AI SDK v6. #### **What it does:** * **Reasoning traces:** Timeline, Graph, and Compact views showing WHY the agent made each decision, not just what it did * **Approval gates:** The agent pauses before consequential actions. The LLM decides when to pause, not a hardcoded list * **Progressive disclosure:** Glanceable summary → expanded reasoning → full raw data #### **How it uses AI SDK v6:** The most interesting pattern is the approval gate mechanism. I define a `confirmAction` tool with no `execute` function. When the AI SDK encounters this, it pauses the stream. agenttrace-ui catches that pause, renders an approval gate UI (amber for medium-risk, red for high-risk), and calls `addToolOutput` to resume when the user responds. The entire gate is client-side. Zero backend changes. The library also uses `message.parts` for parsing tool calls into visualization steps, `sendAutomaticallyWhen` with `lastAssistantMessageIsCompleteWithToolCalls` for auto-continuation after approval, and the `status` field for streaming state. #### **Integration:** Three files. One line change in your chat component: ```tsx <AgentTrace parts={msg.parts} isStreaming={(status === "submitted" || status === "streaming") && i === messages.length - 1} /> ``` #### **Links:** * Live demo (no API keys needed): https://agenttrace-ui-demo.vercel.app/ * GitHub: [https://github.com/NikitaKharya09/agenttrace-ui](https://github.com/NikitaKharya09/agenttrace-ui) * Deep-dive blog: https://medium.com/@nikitakharya09/the-missing-ui-layer-for-ai-agents-609e0fae0758 * Background blog: https://medium.com/@nikitakharya09/who-is-watching-the-agent-37508a040546 Would love feedback from the AI SDK community. Especially interested in whether the no-execute-function pattern for client-side approval gates is something others have explored. #### Reasoning Trace Views:  #### Approval Gate: 
