All sections · 03 / 09

Agent trace

Builds trust by showing how the agent thinks: each step reveals in sequence with collapsible tool calls and durations. Anchored at #trace.

Source
src/components/sections/agent-trace.tsxInteractive · ships client JS
Built with
demo.traceIntersectionObserver replay
Where to edit
  • The steps, tools and timings: demo.trace in site.config.ts
  • Section heading, copy and bullets: agentTrace in site.config.ts

Live preview

Rendered at full width, exactly as it appears on the home page. Copy grabs the whole agent-trace.tsx.

Agent trace viewer

Watch the agent think.

Visitors want to see what your agent is doing — not just what it said. The trace viewer shows thoughts, tool calls, intermediate results, and timing. Collapsible. Animated. Drop in any AI SDK step array and it renders.

01
Thought steps
Plans, reflections, and self-critique before tool calls.
02
Tool invocations
Name, JSON args, JSON result, duration — expand to inspect.
03
Final synthesis
The output phase after the agent stops calling tools.
Agent trace
step 0/5