agenttrace-ai-sdk

Vercel AI SDK adapter for agenttrace-react — visualise AI SDK agent execution traces, tool calls, and human-in-the-loop approval gates as a live React UI.

Install

npm install agenttrace-react agenttrace-ai-sdk
# or
pnpm add agenttrace-react agenttrace-ai-sdk

Use cases

• Rendering a live execution trace for a Vercel AI SDK agent run
• Visualising tool calls from useChat() as structured trace nodes
• Surfacing approval-like tool results as human-in-the-loop gates
• Building oversight UIs for AI SDK-powered workflows

Peer dependencies

• agenttrace-react
• ai
• react

Exports

• useAiSdkTrace(messages) — consumes AI SDK UI messages and returns a live AgentRun
• aiSdkMessagesToAgentRun(messages) — converts a full message array to an AgentRun snapshot
• aiSdkMessageToTraceEvents(message) — maps a single AI SDK message to TraceEvent[]

Usage

import { useChat } from '@ai-sdk/react'
import { TraceProvider, TraceTree, TraceNode, ApprovalGate } from 'agenttrace-react'
import { useAiSdkTrace } from 'agenttrace-ai-sdk'

export function AiSdkTraceView() {
  const { messages } = useChat()
  const run = useAiSdkTrace(messages)

  return (
    <TraceProvider run={run}>
      <TraceTree>
        {({ node }) => (
          <TraceNode node={node}>
            {({ name, status, type }) => (
              <div data-status={status} data-type={type}>
                {name}: {status}
                <ApprovalGate>
                  {({ approve, reject, context }) => (
                    <div>
                      <p>{context.description}</p>
                      <button onClick={approve}>Approve</button>
                      <button onClick={reject}>Reject</button>
                    </div>
                  )}
                </ApprovalGate>
              </div>
            )}
          </TraceNode>
        )}
      </TraceTree>
    </TraceProvider>
  )
}

How it works

• Designed for AI SDK UI messages from hooks like useChat() and useCompletion()
• Maps tool call parts into tool trace nodes with input and output
• Maps approval-like tool or data parts into ApprovalRequested and ApprovalResolved events
• Returns a live AgentRun compatible with agenttrace-react's TraceProvider

Related packages

• agenttrace-react — core headless primitives
• agenttrace-langgraph — LangGraph adapter
• agenttrace-ag-ui — AG-UI protocol adapter

Repository

github.com/nedbpowell/agenttrace-react

License

MIT