Agent state

AgentTraceViewer

The flagship AgentKit component — renders a multi-step agent reasoning trace with collapsible tool calls, per-step timing, and inline JSON inspection for args and results. Drop in any AI SDK v6 step array, or feed the built-in TraceStep[] from your own backend. Static, animated, and live-streaming modes.

Sourcesrc/components/ai/agent-trace-viewer.tsx

Basic trace

Three steps — a thought, a tool call, and a final answer. animate={false} (default) renders all steps at once.

Book a flight

complete · 3 steps

With pre-expanded steps

defaultExpandedIndices opens specific rows on first render. Useful for docs or for highlighting a failing step in a debugging view.

Book a flight

complete · 3 steps

search_flights( )

// args
{
  "from": "JFK",
  "to": "HND",
  "maxPrice": 1000,
  "returnBy": "2026-05-14"
}

// result
[{"carrier":"United","price":745,"stops":1}, {"carrier":"ANA","price":812,"stops":0}]

Empty state

With no steps yet, the viewer shows the emptyLabel and reserves the full min-height so the surrounding layout doesn't jump when the first step arrives.

Agent trace

Waiting for agent…

Dense multi-step with error

Seven steps across three tool calls ending in an error row. All tool rows are expanded so args and results are readable at a glance.

Vendor shortlist

complete · 7 steps

search_vendors( )

// args
{
  "category": "data-warehouse",
  "region": "us-east-1"
}

// result
[{"id":"v_901","name":"Snowflake"},{"id":"v_902","name":"BigQuery"},{"id":"v_903","name":"Databricks"}]

fetch_pricing( )

// args
{
  "vendorIds": [
    "v_901",
    "v_902",
    "v_903"
  ]
}

// result
{"v_901":"$2/credit","v_902":"$6.25/TB","v_903":"$0.40/DBU"}

check_compliance( )

// args
{
  "vendorIds": [
    "v_901",
    "v_902",
    "v_903"
  ],
  "controls": [
    "SOC2",
    "HIPAA"
  ]
}

// result
{"v_901":{"SOC2":true,"HIPAA":true},"v_902":{"SOC2":true,"HIPAA":true},"v_903":{"SOC2":true,"HIPAA":false}}

Send invoice

complete · 3 steps

send_email( )

// args
{
  "to": "vendor@acme.com",
  "subject": "Invoice #4412",
  "attachments": [
    "invoice.pdf"
  ]
}

// result
{"ok":false,"error":"SMTP 421 service not available"}

Transient SMTP error. Retry scheduled in 60s.