Render API
Agents compose these components into hosted pages, PNGs, and PDFs.
The tree spec
A node names a registry component, passes props, and nests children. Validation happens at the boundary: unknown components return the full list of valid names, props are checked as objects, and trees cap at depth 12 and 500 nodes. Seventy-two of the 86 registry items render standalone; namespace compounds like Dialog render only through their sub-parts and are flagged renderable false in discovery.
Ada Lovelace
Systems engineer · 96th percentile
Evidence
Scores
POST /render
{
"tree": {
"component": "stack",
"props": { "gap": "lg" },
"children": [
{ "component": "masthead",
"props": { "title": "Ada Lovelace", "meta": "Systems engineer · 96th percentile", "garden": "corner" } },
{ "component": "split", "props": { "ratio": "2:1", "gap": "lg" },
"slots": {
"a": [
{ "component": "section", "props": { "label": "Evidence" }, "children": [
{ "component": "contribution-graph", "props": { "interactive": false } },
{ "component": "signal-chip", "props": { "label": "Rust", "trust": "github" } },
{ "component": "signal-chip", "props": { "label": "Top 3%", "trust": "score" } }
]}
],
"b": [
{ "component": "section", "props": { "label": "Scores" }, "children": [
{ "component": "stat-tile", "props": { "label": "GemScore", "value": "87", "tone": "accent" } },
{ "component": "stat-tile", "props": { "label": "Velocity", "value": "88th", "tone": "neutral" } }
]}
]
}
}
]
},
"page": { "title": "Ada pitch sheet", "width": "a4", "theme": "light" }
}Endpoints
POST /render
Tree in, hosted page out: an id, a /p/:id URL, and byte count. Pages live 24 hours in KV.
GET /p/:id
The hosted page itself. This is what Browser Rendering captures and what a human previews.
POST /capture
Tree or URL in, binary out: png, jpeg, or pdf at a4, letter, og, or slide-16x9 widths.
GET /registry
The full component manifest, the same registry.json agents read for props and enums.
Everything except page retrieval requires a bearer secret, the same pattern the brand book gate uses.
MCP tools
The same worker speaks MCP at /mcp, so an agent connects once and gets five tools: list_components for discovery, render_page for a URL, capture_png and capture_pdf for artifacts, and create_pitch_kit to render a whole multi-page deck or report in a single call (returning a manifest of page URLs). An agent that can call these produces a branded developer pitch sheet from structured data in one tool call.
Consuming the design system
There are three ways to consume this system, one per audience. Full detail, including the consumer checklist, lives in CONSUMING.md at the repo root.
Monorepo mirror
Code apps like vamo-web keep packages/design as a workspace member, populated by an rsync sync script and pinned by a .mirror-ref SHA. Never edit the mirror; edit here and re-sync.
Quick-think
A throwaway checkout that needs source vendors it with one clone-plus-rsync command pinned to a SHA. Same primitive as the mirror, no new machinery.
Agent (MCP)
Agents do not consume the Svelte package. They call the render worker MCP: a JSON tree in, an on-brand page URL or pitch kit out, behind a shared-secret bearer.
The checklist every code consumer needs: tw-animate-css is a consumer-declared dependency, import the tokens stylesheet, point Tailwind's @source at the design src, and supply the Geist font per app (it is deliberately not bundled).
Source
The worker lives in apps/render with a README covering curl examples, MCP connection, and deploy steps. It builds a static component map from registry.json at build time, so the render surface and the design system can never drift apart silently.