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:
- Live demo (no API keys needed): https://agenttrace-ui-demo.vercel.app/
- GitHub: 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:
