121 Pro components and page blocks

Get Pro
uibrik

Updated

Agent Trace

Pro

Preview

Customize

Auto
Color

Installation

Pro

Agent Trace is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/agent-trace

Usage

import { AgentTrace } from "@/components/uibrik/agent-trace/agent-trace";​const steps = [  {    id: "plan",    kind: "think",    title: "Plan the search",    detail: "Nonstop SFO to Tokyo, around 12–16 December, under $900. Check both NRT and HND, then confirm the calendar is free before adding it.",    duration: 1600,    tokens: 1240,  },  {    id: "flights",    kind: "tool",    title: "search_flights",    args: { from: "SFO", to: "NRT,HND", dates: "2026-12-12..16", nonstop: true },    output: "14 flights found, 5 under $900",    duration: 2100,    tokens: 3810,  },  // …4 more];​const task = "Find a nonstop flight to Tokyo under $900 in mid-December and add it to my calendar";​<AgentTrace  steps={steps}  collapseCompleted  task={task}  defaultMode="auto"  showModes  color="#5b7bd6"  pricePerMillion={15}  onDecision={(step, "approve" | "skip") => {}}  // AgentStep={{ id: …, kind: "think", title: …, duration: … }}  // models={[{ id: …, name: …, pricePerMillion: … }]}  // model="…"  // defaultModel={[{ id: …, name: …, pricePerMillion: … }]}  // onModelChange={[{ id: …, name: …, pricePerMillion: … }]}  // mode="auto"  // onModeChange={(mode) => {}}  // active={0}/>

Where to use Agent Trace

  • Agent products

    Users watch what the agent is doing as it works, then open any step to see its reasoning, arguments and result.

    Pairs with Tool Call and Streaming Chat

  • Observability and debugging

    The waterfall strip and per-step time and tokens show at a glance which step made a run slow or expensive.

    Pairs with Context Meter

  • AI landing pages

    A run that plays itself shows how an agent reasons in a few seconds, without a video.

    Pairs with Terminal Demo

Props

AgentTrace
collapseCompleted
Type boolean
true
Fold a step's detail away once it finishes.
task
Type string
"Find a nonstop flight to Tokyo under $900 in mid-December and add it to my calendar"
The task the agent was given.
defaultMode
Type "auto" | "ask" | "plan"
"auto"
Auto runs every step, Ask waits for approval before tool calls, Plan lists them without running.
showModes
Type boolean
true
Show the Auto / Ask / Plan switch.
color
Type string
"#5b7bd6"
Colour of the strip and the filled rail.
stepsrequired
Type AgentStep[]
–
The run, in order.
AgentStep
Type { id; kind: "think" | "tool" | "search" | "answer" | "error"; title; detail?; args?; output?; duration: ms; tokens? }
–
One step. detail types itself out while running; args are listed as rows; output is a one-line result.
models / model / defaultModel / onModelChange
Type { id; name; logo?: ReactNode; pricePerMillion; note? }[] / string
–
Models in the picker. Picking one reprices the run in place.
mode / onModeChange
Type "auto" | "ask" | "plan" / (mode) => void
–
Controlled mode. Changing it restarts the run in play mode.
onDecision
Type (step, "approve" | "skip") => void
–
Called when a tool call is approved or skipped in Ask mode.
pricePerMillion
Type number
15
USD per million tokens when no models are given. 0 hides cost.
active
Type number
–
Index of the running step, to drive the card from a real agent. Steps after it are hidden; steps.length means finished.
className
Type string
–
Classes for the card.