Blueprint
Agent Ops Console
LLM and agent observability console for an AI product team: an overview of cost, latency p50 and p95, error rate, token usage and top models; a filterable trace table with saved views, an advanced query builder, column controls and bulk actions; a trace detail with a span waterfall, flame view, nested tool calls, inputs and outputs, token and cost breakdown and errors; sessions grouped by user; a prompt registry with versions and a diff; eval datasets; eval runs comparing prompt and model versions with scores; and API keys, provider keys and model policy.
- Screens
- 7
- Framework
- Next.js App Router · React 19 · Tailwind CSS 4 · shadcn/ui
- Variants
- Radix UI and Base UI
- Install
- One command, every screen
What is implemented
- The App Router routes above, each composed from catalog components. Interactive UI states such as menus, dialogs, filters and tabs work as in the viewer.
- Sample data that ships with each component, so the screens render without a backend.
- Light and dark themes.
What you supply
- Your data: API routes or a backend in place of the sample data. No backend is included.
- Authentication and authorization.
- Persistence: database, file storage and any server-side state.
- Business rules and server-side validation.
Install
Radix UI project
npx shadcn@4.17.0 add @agentic-ui/blueprint-agent-ops-consoleChecked: installs and builds in a clean Next.js project.
Base UI project
npx shadcn@4.17.0 add @agentic-ui/blueprint-agent-ops-consoleChecked: installs and builds in a clean Next.js project.
Your project must be connected to the private registry first: installation guide.
Components it uses
- App ShellAgent OPS Shell
- OverviewAgent OPS Overview
- KPI CardsChart Sparkline
- Budget GaugeChart Gauge KPI
- Latency HeatmapChart Heatmap Matrix
- TracesAgent OPS Traces
- Saved ViewsSearch Saved Views
- Query BuilderData Query Builder
- Bulk ActionsData Bulk Action Bar
- Trace DetailAgent OPS Trace Detail
- Run TimelineAI Agent Run Trace
- Log TailDev Log Tail
- SessionsAgent OPS Sessions
- Session ListData Virtual List
- PromptsAgent OPS Prompts
- Prompt DiffCode Diff Viewer
- DatasetsAgent OPS Datasets
- EvalsAgent OPS Evals
- Eval Score ChartAI Eval Score Chart
- Eval MatrixAI Evals Results Table
- KeysAgent OPS Keys
- Provider KeysAI Provider Keys
- Model RegistryAI Model Registry