Agent Trace

React timeline of an AI agent run: each tool step shows pending, running, done or error, reports its duration and folds out details. The header sums up the run.

src/registry/ui/agent-trace.tsx/r/agent-trace.json

Agent run

3 tools · 0.8s · $0.004

  1. 182 lines · PlanCard × 3, no billing toggle

  2. Found SegmentedControl in registry/ui

  3. + <SegmentedControl items={["Monthly", "Yearly"]} />

Agent run

Installation#

bash
npx shadcn@latest add @minidev/agent-trace

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/agent-trace.json

Usage#

tsx
import { AgentTrace } from "@/components/ui/agent-trace"

export function Example() {
  return (
    <AgentTrace
      steps={STEPS.map((s, i) => ({ id: String(i), name: s.name, duration: s.duration, detail: s.detail, status: i < k ? "done" : i === k ? "running" : "pending" }))}
      meta={k >= STEPS.length ? "4 tools · 3.8s · $0.006" : "running…"}
    />
  )
}

API reference#

AgentTrace props
PropTypeDefault
steps*Step[]-
classNamestring-
titlestring"Agent run"
metaReact.ReactNode-

* required

Dependencies#

npm

lucide-react

Built from

No other MiniDev files

Examples#

All AI chat UI components for React