Llm run trace
ProOne agent or model run step by step: model calls, tools and retrieval on a waterfall with tokens and cost per step, totals for latency, tokens, cache hits and cost, a budget meter, and each step’s input and output.
pnpm dlx shadcn@latest add @caliper/llm-run-trace- Latency
- 9.42 s
- Tokens in · out
- 21,810 · 834
- Cache hits
- 89%
- Cost
- $0.0187
- Steps
- 3 model · 3 tool
Slowest step: Reply, 2.48 s (26% of the run).
Run 7c1e · refund request
9.42 s · 8 spans · 5 services · 1 error- Agent
- claude-sonnet-5-5
- Retrieval
- Tool
- claude-haiku-5-5
↑ ↓ move · ← → collapse and expand · Enter selects
When to use #
Use it for
- Debugging and reviewing agent runs.
- LLM observability and evaluation products.
Skip it when
- Showing a person what an agent did in plain words; use the agent run timeline.
Installation #
pnpm dlx shadcn@latest add @caliper/llm-run-trace
Adds its 10 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage #
Import it from your copy of the source. The example behind the preview comes with the source.
import { LlmRunTrace } from "@/components/ui/llm-run-trace"
The worked example comes with Pro
The 21-line example behind the preview opens here with a Pro or Team licence.
API reference #
LlmRunTrace
component
Accessibility #
It is built on native elements and keeps aria-label in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion #
Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.