The hard screens, one system.
React components for dashboards, data grids, AI chat, node canvases, maps, editors and process maps — on one token system, and legible to coding agents.
claude mcp add --transport http brand-ui https://elabs-ai.com/mcpWhat are you building?
Every kind of screen below is a real template in the library. Open one to see it full size, the blocks and components it is made of, and the command that scaffolds it.
For teams running AI agents in production
Agent Operations Center
A control room for agents in production: spend, traces, reviews and the audit log.
3 examples
For revenue, finance and BI teams
Revenue against plan, the pipeline behind it and an analyst on call.
For supply-chain, fleet and field-operations teams
Open exceptions, the network map and the shipment behind every late promise.
For account, success and CRM products
One account before the call: health, usage, people and next actions.
For support, service and helpdesk products
A ticket queue, the conversation and a reply drafted from past tickets.
For reliability, observability and platform teams
One live incident: error rate, blast radius and a runbook that runs.
For utilities, industrial energy managers and grid operators
Eight sites on the grid: who buys above contract, the alarms and an analyst over the meters.
For security operations teams, incident responders and detection engineers
The alert queue, the assets it fires from and an analyst waiting for the go to contain.
For pricing, trading and treasury products
A market tape, a watchlist and an order ticket with a review step.
Blocks
Copy-own compositions from the registry: command centers, maps, infographics, KPI cards, agent-ops panels. Installed with one command, then yours to edit.
- KPI Cards12
- Stat Cards6
- Infographics12
- Editorial Charts34
- Command Centers7
- App Shells4
- Application5
- Maps and Geo5
- Process and Flow3
- Data Surfaces4
- Documents3
- Agent Ops13
- Generative UI5
- AI and Terminal6
- Forms and Setup2
- Authentication7
- Account and Settings6
- Commerce7
- Marketing31
- Content8
- Data Grids6
- Media4
How is the quarter going, and what decides it?
A revenue desk in one block: a MetricGrid of four headline numbers that each name their baseline and carry a 13-week Sparkline, a ComposedChart of weekly revenue with its trailing average against a labelled plan rule, a donut PieChart of the service-line mix, a BumpChart of which line is climbing, and the accounts that decide the quarter with a Meter each. Container-query layout, so it holds in a dashboard column and on a full page.
Where does the volume flow, and which lane is late?
A network on the map it runs on: MapCanvas in globe projection with one MapArc per lane, its width bound to volume through a paint expression, hubs as MapMarkers with tooltips, and a panel that ranks the lanes with a Meter and calls out the late ones. Selecting a lane on the map or in the list dims the rest and redraws that arc heavier.
Where do they drop off?
"Where do they drop off?" — a SankeyChart from the channel a request came in on, through what happened to its quote, to how it ended, with a FunnelChart beside it that counts each step. The headline names the channel that loses the largest share of its own requests.
What did the agent do, and what is it asking me?
One agent run, reviewable end to end: a Plan with its decision contract, an AgentTimeline whose last step follows your answer, a Tool call with arguments and result one click away, a ToolResultCard hosting the chart the run produced, TokenUsage in the header and an ApprovalCard for the one side effect that waits for a human. Reports the decision through onDecision and never performs it.
Where is everyone, and who is late?
A fleet where it is: each vehicle's planned route as a dashed MapRoute, the part already driven solid, the vehicle's MapMarker at the join and the depot marked; the list shows stops done on a Meter and minutes against plan, and selecting a vehicle fades the others.
Where is the market, and what moved it?
A rate desk: a tape of lanes across the top with price, move and a 20-day Sparkline each, over a CandlestickChart of the index and a BarChart of daily volume. Every move carries an arrow and a sign as well as a colour; the chart title is computed from the first open and the last close.
Charts
Every chart container the library ships, drawn from one fictional company's quarter. Line, bar and pie are here; so are bump, waterfall, dumbbell, heatmap, treemap and sankey.
Several series over time
Volume over time
Two linked measures
Rank over time
A few categories, compared
Two points per category
A bridge between totals
One entity, several dimensions
Share of a whole
Several progress values
Hierarchy and share
Stage-to-stage drop-off
Category by category
Every record, by group
Maps
Token-themed MapLibre: markers, clusters, routes, arcs, GeoJSON regions and a globe, all following the active theme.
Components
The app UI underneath: forms, overlays, navigation, tables, chat parts. Source-owned, token-driven, keyboard-complete.
They get access to this workspace's dashboards.
Quarter-to-date total
Weekly, last 13 weeks
As of Aug 31, 09:40 AM · Source: ERP
Weekly, last 13 weeks
As of Aug 31, 09:40 AM · Source: ERP
Weekly, last 13 weeks
As of Aug 31, 09:40 AM · Source: ERP
The five most recent orders this quarter.
| Lumenwood Media Ltd. | $25,965 | |
| Silvergate Media Ltd. | $19,004 | |
| Copperdale Provisions Inc. | $8,329 | |
| Rowanmere Provisions Ltd. | $10,933 | |
| Sterlingmoor Health Inc. | $15,694 |
Tax Compliance is rate-limited
People with access to Ledger Insights.
Pick the range every chart reads.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
As of Aug 31, 09:40 AM · Source: ERP
Packages
- aiChat: ChatShell, Conversation, Message, PromptInput, Tool, Reasoning, Sources, CodeBlock, Artifact.
- uiFoundation + app UI (Button, Card, Dialog, Tabs, AppShell, …).
- chartsMetricCard, MetricGrid, ChartCard, ChartFrame, AutoChart (spec-driven via a serializable ChartSpec).
- processProcess mining / event-log analysis.
- editorToken-themed Monaco editor: CodeEditor, DiffEditor, CodeWorkspace (file tabs).
- flowBranded React Flow canvas, nodes, edges, controls, inspector.
- mapsToken-driven MapLibre GL maps: MapCanvas, MapMarker, MapPopup, MapControls, MapRoute, MapArc, MapGeoJSON, MapClusterLayer — and custom plan maps (a floor plan, a plant layout, a carriage) drawn in their own units.
- iconsBrand/product-vocabulary icons + BrandLogo; generic glyphs come from Lucide.
- terminalTerminal surfaces (shell/agent output, coding-agent CLI look-alikes).
- dataTanStack DataTable, FilterBar, SearchInput, FacetFilter, ColumnPicker.
- tokensSemantic CSS-variable themes + ThemeProvider/useTheme.
- viewerFileViewer: a file the app did not write, via a pluggable adapter registry.
- marketingHero, FeatureGrid, UseCaseCard, StatsBand, CTASection, LogoStrip.
Built for coding agents
A CLI, an MCP server and a machine-readable manifest tell an agent which component to use and how. For screens an agent designs at runtime, it emits JSON that the library validates and renders.
Let the agent emit the UI
Edit what an agent would emit, and watch it validate and render
The editor runs the library’s own validator on every pause in your typing. The errors below it are the validator’s, word for word.
A surface the agent designs at runtime, validated against the catalog, rendered by the library.
brand-ui a2ui schemaThemes
One token system. Swap a stylesheet and every component follows.
8 reference families
Reference themes, ready to use as they are — or as a start for your own.
System stack
System stack
System stack
System stack
System stack
System stack
Source Sans 3, vendored
System stack
System stack
Bring your own brand
An agent with the brand-ui-create-theme skill turns a brand’s own material — links, a style sheet, screenshots — into a new family. Your logo stays yours: point three variables at it.
/brand-ui-create-theme <theme name> [links, file paths, brief]