The Missing UI Layer for AI Agents.

A deep-dive into the open-source React library that makes AI agent reasoning visible, verifiable, and controllable.

Every AI agent today has the same blind spot: the people using it cannot see how it thinks.

In my last post, Who Is Watching the Agent?, I described three problems that every agentic UI faces today:

1. The Reasoning Gap: You can see what the agent did, but not why
2. The Handoff Problem: No framework for when to let the agent proceed versus when to stop it
3. The Trust Calibration Problem: No mechanism for building an accurate mental model of where to rely on the agent.

This post is about the solution — agenttrace -ui!

Why I Care About This Problem

I have spent over 12 years building enterprise UIs in financial services. In that time, I have watched what happens when systems make consequential decisions and users have no visibility into the reasoning. The pattern of “the system did something, here is the result, trust it” breaks trust in ways that are hard to repair.

Agentic AI is going to face the exact same dynamic, at a much larger scale, much faster. An AI agent that books flights, purchases stock, or deletes records on your behalf is making consequential decisions. If the user cannot see why, cannot intervene when it matters, and cannot calibrate their trust over time, the whole system fails. Not technically, but humanly.

That conviction led to agenttrace-ui: an open-source React component library. The repo is at https://github.com/NikitaKharya09/agenttrace-ui.

The Library in One Paragraph

agenttrace-ui is a frontend UI library: drop-in React components that make agent reasoning visible to the end user, in real time, inside your application. The target is the person using the agent, not the engineer running it.

It is three files.

It works with the Vercel AI SDK v6 out of the box. Adapters for LangChain, Mastra, and others are on the roadmap.

agenttrace-ui/ 
├── AgentTrace.tsx ← The public API. Import this. 
├── AgentTaskView.tsx ← Visualization engine (used internally) 
└── useAgentSteps.ts ← AI SDK v6 adapter (used internally)

Most users only ever touch AgentTrace . The other two are available for advanced wiring.

agenttrace-ui

Two-Step Integration

I was uncompromising about simplicity. Adding agenttrace-ui should take minutes.

Step 1: Copy the three files into your project.

Step 2: One line change. Find where you render assistant messages and replace the raw output:

// Before: raw JSON tool dumps 
{msg.role === "assistant" && ( 
  <div>{JSON.stringify(msg.parts)}</div> 
)} 
// After: full reasoning trace 
import { AgentTrace } from "@/agenttrace-ui/AgentTrace"; 
{msg.role === "assistant" && ( 
  <AgentTrace 
    parts={msg.parts} 
    isStreaming={ 
      (status === "submitted" || status === "streaming") && 
       i === messages.length - 1 
    } 
  /> 
)}

That is the complete basic integration. Everything else is optional.

(One note: always pass the isStreaming prop. Without it, AgentTrace cannot tell the conversation is still in progress, which causes text flash and false “Complete” badges. This is the most commonly missed thing.)

Three Ways to See Agent Reasoning

Once integrated, you get three visualization modes. You switch between them with a toggle.

Timeline View (default): A vertical, step-by-step trace. Each step shows the tool name, the action taken, and the agent’s reasoning for why it took that step. Click “Show more” to expand into raw tool arguments, complete results, and execution time. This is progressive disclosure in action. The default is for following along, the expanded view is for verification, and the raw data is for auditing.

agenttrace-ui Timeline view

agenttrace-ui Expanded Reasoning

Graph View: A visual flow diagram showing how steps connect to and influence each other. This view was directly inspired by our ACM IUI 2026 research. A graph shows you why each step led to the next, making wrong turns visible because you can see which piece of bad data propagated into subsequent decisions.

agenttrace-ui Graph Reasoning View

Compact View: A horizontal trace showing all steps side by side, maximizing information density. Designed for power users who want the full picture at a glance.

agenttrace-ui Compact Reasoning View

All three views work with zero configuration.

Approval Gates: The Most Novel Part

This is the direct answer to the Handoff Problem, and the design decision I think matters most.

The challenge: the agent should not interrupt constantly, but it also should not work silently when the stakes are high. How do you build a system that pauses intelligently, only when it actually matters?

My answer: Let the LLM decide when to pause.

Rather than hardcoding a list of “dangerous tools,” I give the agent a confirmAction tool with no execute function. The LLM learns, from its system prompt and its own judgment, when to call it. This generalizes to any scenario.

Here is the mechanism that makes it work: when the AI SDK encounters a tool call with no execute function, it pauses the stream. AgentTrace catches that pause, renders the approval gate UI, and resumes the stream only when the user responds. The entire gate is client-side. Zero backend changes.

confirmAction: tool({
  description: `Request user confirmation before a consequential action. Call this before booking, purchasing, trading, deleting, or deploying. Set reason to "user-requested", "medium-risk", or "high-risk".`,
  inputSchema: zodSchema(z.object({
    action: z.string().describe("What you are about to do"),
    reason: z.enum(["user-requested", "medium-risk", "high-risk"]),
    consequence: z.string().optional(),
    details: z.record(z.string()).optional(),
  })),
  // NO execute function - AgentTrace handles this on the client side 
}),

The visual weight of the gate matches the weight of the decision. A medium-risk action (booking a restaurant) gets an amber pulse, a pause icon, and consequence details hidden behind a chevron. A high-risk action (purchasing $2,000 of stock) gets a red pulse, a bold “High risk” badge, and the consequence warning visible by default. “$2,000 will be charged to your account. This action cannot be undone.”

After approval, the agent continues automatically. After rejection, a text input appears so you can tell the agent what to do instead. No half-completed actions, no ambiguous state.

The full integration requires passing addToolOutput from useChat to AgentTrace and enabling sendAutomaticallyWhen for auto-continuation. The README has the complete setup.

Architecture Decisions Worth Explaining

Why copy-paste instead of npm? Two reasons. First, this is a young library and the API will change. Pinning users to a versioned package when the shape of things is still evolving creates more friction, not less. Second, I want the code to be readable and modifiable. When you copy these files into your project, you own them. You can adjust the visual weight of the approval gates, add a fourth visualization mode, and change the styling. An npm package behind a version lock discourages that. (The npm package is coming once the API stabilizes.)

Why does the LLM decide when to pause? The alternative is a hardcoded allow-list of “dangerous tools” that triggers an approval gate. That approach breaks the moment your tool names do not match the list, or when a new consequential action appears. LLM-driven pausing generalizes to any agent, any tool set, any scenario. The model has enough context to reason about consequences, so we should use that capacity.

Why no execute function on confirmAction? This is the key mechanism. The AI SDK’s behavior when it encounters a tool with no execute function is to pause the stream. AgentTrace catches that pause state and renders the approval UI. When the user responds, addToolOutput resumes the stream with the approval result. The entire gate mechanism is client-side. Zero backend changes required.

Beyond the Browser

The patterns in agenttrace-ui, reasoning traces, consequence-aware approval gates, progressive disclosure, are not limited to web UIs. They apply anywhere an AI agent takes actions on a user’s behalf: IDE coding assistants, CLI tools, MCP-connected agents.

The roadmap includes a VS Code extension for agent transparency in IDE-based assistants, and an MCP adapter for visualizing tool calls from any MCP-compatible agent. Claude Code, Cursor, Copilot.

The design primitives are the same. The rendering surface changes.

Try It

If you want to see everything working before you integrate, the repo includes a complete example app with four scenarios: General (research assistant), Travel (with medium-risk booking gates), Finance (with high-risk purchase gates), and Deploy (with production push gates).

There is also a live interactive demo with mock data. No API keys needed.

What is Coming Next

In priority order: light theme support , npm package with storybook documentation, a TrustIndicator component for confidence signals (the direct answer to the Trust Calibration Problem), post-decision audit trails for compliance-sensitive use cases, VS Code extension, MCP adapter, and framework adapters for LangChain, Mastra, and others.

Why Open Source

The three problems I described in the first article are structural, not unique to one company’s agents. An open-source library establishes shared primitives and raises the baseline for user-facing agent transparency for everyone.

The library is open-source, MIT licensed, and at github.com/NikitaKharya09/agenttrace-ui. If you build something with it, hit a wall, have a feature idea, or find something that does not work the way you would expect, I would love to hear about it.

Nikita Kharya is Vice President / Principal Software Engineer at Morgan Stanley, with 12+ years building enterprise UIs. Co-author of Improving Human Verification of LLM Reasoning through Interactive Explanation Interfaces, accepted to ACM IUI 2026. Connect on LinkedIn.