Ship & extend

Agents & the MCP

Every tool an agent gets, the house rules it follows, and how to work alongside it.

sitereal is designed to be driven by an agent. Opening a project registers an MCP server for it in the project's own .mcp.json, so Claude Code — or anything else that speaks MCP — can build in the same project you have open, through the same engine, while you watch the canvas.

.mcp.json

{
  "mcpServers": {
    "sitereal": {
      "command": "/Applications/sitereal.app/Contents/MacOS/sitereal",
      "args": ["…/mcp.mjs"],
      "env": { "ELECTRON_RUN_AS_NODE": "1" }
    }
  }
}

The tools

Read/write pairs over the same HTTP API the builder uses — never file guessing, because a write has to re-emit whatever depends on it.

Tool	Does
`sitereal_guide`	the house rules and the element model. Read first
`sitereal_list_pages`	every route
`sitereal_get_page` / `sitereal_save_page`	a page as JSON: tree, stylesheets, title, seo, js
`sitereal_get_html`	the page as plain HTML — a quick look at structure
`sitereal_components` / `sitereal_save_components`	components with their props, styles and script
`sitereal_templates` / `sitereal_save_templates`	templates and their scopes
`sitereal_snippets` / `sitereal_save_snippets`	snippets and their conditions
`sitereal_styles` / `sitereal_save_styles`	the global stylesheets
`sitereal_variables` / `sitereal_save_variables`	named values
`sitereal_framework` / `sitereal_save_framework`	the design system
`sitereal_site` / `sitereal_save_site`	site settings
`sitereal_collections`	content types and taxonomies
`sitereal_content` / `sitereal_content_entry` / `sitereal_save_content_entry`	entries under `src/content`
`sitereal_media`	assets under `public/` with their alt text
`sitereal_list_files` / `sitereal_read_file`	the project tree, and any file in it

Settings → Agents shows this list exactly as an agent sees it, because it is the same file.

The house rules an agent follows

The guide is not a description of the app — it is the set of rules that keep agent-written pages indistinguishable from hand-built ones:

Reuse first. A block on two pages is a component; anything around the page is a template.
BEM names. The same shape the builder's own class generation produces, because the first class is the element's selector.
Nested CSS. One top-level rule per element, with its states, breakpoints and unnamed children under &. One boundary: a node the user can select keeps its own top-level rule, or the Style panel would open it empty.
Tokens, not numbers. var(--space-m), not 24px.
Logical properties. inline-size, margin-inline, inset-block-start.
Keep id and builder-data-element on every node touched — the id is what your selection and your per-element CSS are keyed to.

Working alongside one

Saves are small on purpose. The agent is told to prefer several small writes to one huge rewrite, because you are watching and can stop it.
Project-wide writes (framework, variables, styles, templates, snippets, site) re-emit every page automatically.
The canvas shows that an agent is working and keeps updating.
Both of you are editing the same files through the same engine, so there is no merge step and no "reload from disk".

What to ask for

Good prompts name the shape, not the markup:

Build a pricing page with three tiers. Reuse the card component if there is one,
otherwise make it. Put the plan names in the design system's type scale, and use
the danger button variant for the cancel action.

The agent reads the guide, checks what components already exist, writes the page, and tells you what it named things so you can find them in the tree.