Agents

How software and AI agents consume this system, from one URL.

2 services 6 MCP tools 1 skill file

Choose your path

Pick the row that matches what you are. Each leads to one interface, no overlap.

An app that renders Svelte

Consume the git mirror. Keep packages/design as a workspace member, sync it with the script, import components normally. Full checklist in CONSUMING.md.

An agent that needs a finished asset

Call the studio agent. One tool, one prompt plus optional data. The model authors the layout and returns a hosted page, PNG, or PDF.

An agent that wants full control

Call the render plane directly. You author the ComponentNode tree yourself; it renders and captures exactly what you sent.

Studio agent

One tool. Send a prompt plus optional data; an open model authors a component tree and the render plane turns it into an asset. Base URL https://vamo-design-agent.bewanted.workers.dev. Model is @cf/moonshotai/kimi-k2.6. It retries up to three times to produce a valid tree.

Request

POST /task
Authorization: Bearer <AGENT_SECRET>
Content-Type: application/json

{
  "prompt": "A one-page pitch sheet for Ada Lovelace, a senior systems engineer.",
  "data": { "name": "Ada Lovelace", "gemScore": 87, "languages": ["Rust", "C"] },
  "format": "page"
}

Response

{
  "ok": true,
  "format": "page",
  "pageUrl": "https://vamo-design-render.bewanted.workers.dev/p/ab12cd",
  "assets": { "page": "https://vamo-design-render.bewanted.workers.dev/p/ab12cd" },
  "tree": { "component": "stack", "props": { "gap": "lg" }, "children": [ ... ] }
}

format is one of page, png, pdf, or pitch-kit. png and pdf return the page URL plus a note that the browser rendering token is not configured until the operator sets that secret. Auth is a bearer secret held by the operator; the value is never published.

Connect over MCP

claude mcp add --transport http vamo-design-studio \
  https://vamo-design-agent.bewanted.workers.dev/mcp \
  --header "Authorization: Bearer <AGENT_SECRET>"

Tool: generate_asset

generate_asset
{
  "prompt": "string, required",
  "data":   "any JSON, optional (the facts to lay out)",
  "format": "page | png | pdf | pitch-kit  (default: page)"
}

Render plane

You author the tree; it renders exactly that. Base URL https://vamo-design-render.bewanted.workers.dev. Everything except page retrieval needs a bearer secret.

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. Public, no auth. This is what Browser Rendering captures.

POST /capture

Tree or url in, binary out: png, jpeg, or pdf at a4, letter, og, or slide-16x9.

GET /registry

The full component manifest, the same registry agents read for props and enums.

MCP tools

list_components Every renderable component with category, description, and props.

render_page Compose a tree into a stored page. Returns a URL to open or capture.

capture_png Render a tree or url and capture it as a PNG. Returns a retrieval URL.

capture_pdf Render a tree or url and capture it as a PDF. Returns a retrieval URL.

create_pitch_kit Render a multi-page kit in one call. Returns a manifest of name, url, captureUrl.

ComponentNode format

A node is { "component": "kebab-name", "props": {}, "children": [node | "text"] }.
Names are kebab-case from the registry. Unknown names are rejected with the valid list.
children is the ordered default slot. Components marked no-children take content through props only.
Trees cap at depth 12 and 500 nodes.

The tree an agent POSTs

POST /render
Authorization: Bearer <RENDER_SHARED_SECRET>
Content-Type: application/json

{
  "tree": {
    "component": "stack",
    "props": { "gap": "lg" },
    "children": [
      { "component": "masthead",
        "props": { "title": "Ada Lovelace", "meta": "Systems engineer" } },
      { "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" } }
      ]},
      { "component": "section", "props": { "label": "Evidence" }, "children": [
        { "component": "signal-chip", "props": { "label": "Rust", "trust": "github" } },
        { "component": "signal-chip", "props": { "label": "Top 3%", "trust": "score" } }
      ]}
    ]
  },
  "page": { "title": "Ada pitch sheet", "width": "a4", "theme": "light" }
}

Ada Lovelace

Systems engineer

Scores

GemScore 87

Velocity 88th

Evidence

3617 contributions this year

Jul

Aug

Sep

Oct

Nov

Dec

Jan

Feb

Mar

Apr

May

Jun

Jul

Rust Top 3%

The same tree, rendered live from the real components.

The skill file

Everything above is written once, machine-readable, at one URL. Point an agent at it and it learns the whole interface: when to use which service, the endpoints, the MCP registration, the tree format, and the voice law binding on any copy it writes.

Read https://design.withvamo.com/skill.md and follow it.

Open the raw skill file

Operator notes

Secrets live with the operator, never in the book. AGENT_SECRET gates the studio agent; RENDER_SHARED_SECRET gates the render plane. Captures need CF_BROWSER_RENDERING_TOKEN on the render worker; without it, page URLs still work and capture reads not_configured. Costs are real: Workers AI bills per token on every studio call, and Browser Rendering is a paid add-on for each PNG or PDF.