Make it yours
npx shadcn@latest add https://elabs-ai.com/r/agent-studio-page.jsonPaste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui template "Agent Studio" (agent-studio-page) to this project — a whole screen copied into the app, built from registry blocks and the @elabs-ai/components-* packages. Where a business designs, equips and watches its agents. Every design is listed with how it ran this week; the designer is a canvas; skills and MCP servers show which designs use them; a run opens in the dock with its steps, and a failed one opens its full trace. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Make sure the base is in place: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui`), then the packages the template imports: @elabs-ai/components-charts, @elabs-ai/components-data, @elabs-ai/components-icons, @elabs-ai/components-tokens, @elabs-ai/components-ui. If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 3. Copy the template in with `npx shadcn@latest add https://elabs-ai.com/r/agent-studio-page.json` — it brings its blocks with it (agent-designer-01, agent-trace-waterfall-01, workspace-shell); if that url does not answer, copy the folders from https://github.com/mreimitz/elabs-components/tree/main/registry/blocks instead. 4. Mount the page at a route, keep its `WorkspaceShell` frame, and replace the seeded data with ours: [the route, the real data source, and what should change from the template] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
What each view shows
The screens the navigation names, one line each.
- Designs
- Every agent design and how it ran this week.
- Designer
- The agent's graph on a canvas, with an inspector.
- Skills
- The skill library and which designs use each.
- MCP servers
- Connected servers and their tools.
- Runs
- Runs by state; a paused one names who it waits for.
Try it on the screen above: Open a run in the dock; a failed run opens its trace as a waterfall.
What it is made of
The blocks and packages the template composes — each has its own page. Copy the template and you copy the blocks with it.
3 blocks
What is this agent allowed to use, and where does a person step in?
A canvas for designing business agents: triggers, agents, routers, guardrails, human approvals and actions as the flow, and under each agent its equipment — model, skills, MCP servers with per-tool switches and ask-first, knowledge and memory — on square ports with dashed links. A searchable palette (drag, or click to equip the selected agent), an inspector form per node kind, design checks that point at the node they are about, a simulated test run that pauses at approvals, undo/redo and auto-layout. Three sample designs: support resolution, invoice processing, lead qualification. Plain data in, no runtime.
Where did the run fail?
An execution waterfall for one multi-agent run: a stat strip where every number carries its comparison (duration vs p95, retries, tokens in/out, cost vs workflow average, failed at), the charts package’s Gantt at sub-second granularity with one row per agent span nested under its caller, and a context-flow chain that shows the hop where a required field was dropped.
Examples
Designer
The designer, flush in the shell, on the support design.
Designer Multi Agent
The designer on the four-agent lead qualification design.
Skills
The skill library, with which designs use each skill.
Mcp Servers
The MCP servers: connection state, tools, who can write, and which designs depend on each.
Runs
The runs. Open one for its steps; the failed one leads to its full trace.