agenttrace-ui: Human-in-the-loop approval gates and reasoning traces built on AI SDK v6

Showcase
,
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:

<AgentTrace
  parts={msg.parts}
  isStreaming={(status === "submitted" || status === "streaming") && i === messages.length - 1}
/>

Links:

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:

agentrace-ui-view

Approval Gate:

agenttrace-ui-approvalgate

2 Likes
Vercel Weekly (2026-04-13)
2

I’m curious, what’s the abstraction for? Like, why would I use this rather than the AI SDK’s built-in tool approval?

1 Like
3

Great question! The AI SDK’s built-in tool approval handles the core approve/reject flow really well. agenttrace-ui builds on top of that with two additional layers:

  1. Transparency alongside approval: The AI SDK provides a clear yes/no approval step. agenttrace-ui adds a more detailed view around that, with a collapsible timeline showing each step the agent took, the reasoning behind it, and the underlying data across multiple visualization modes. The approval step becomes one part of a broader, inspectable workflow.

  2. LLM-driven vs. predefined approval rules: With the AI SDK, needsApproval is typically defined ahead of time for specific tools. agenttrace-ui introduces a more flexible pattern via a universal confirmAction tool, where the LLM can decide when to pause based on context. The same mechanism can surface different levels of risk (e.g., low, medium, high) depending on the situation.

If your use case is straightforward approval for specific tools, the AI SDK’s built-in approach is a great fit. agenttrace-ui is designed for cases where you also want deeper visibility into agent behavior and more context-aware approval decisions.

1 Like