SiteZen MCP

An MCP server that lets Claude Desktop (or any MCP client) drive a SiteZen-enabled WordPress site directly — no Vercel platform, no API key burning on your end, full editor v2 (Style Studio) compatibility.

Why this exists

The SiteZen platform conversion engine works, but it lives behind Vercel's 60-second function limit. On Hobby tier, complex Figma sections time out. The MCP path solves that completely:

• No Vercel → no 60s timeout
• No platform API key → the user's Claude subscription pays for tokens, not yours
• Same plugin, same editor → all the v2 Style Studio panels work on output from this MCP exactly as they do on platform-generated output
• Faster iteration → Claude generates HTML in chat, pushes to WP via tools, user sees result instantly

The MCP is a thin set of hands — Claude is the brain (it generates the HTML); the MCP just gives Claude the verbs to ship that HTML to WordPress.

Tools (core conversion verbs)

| Tool | What it does | |---|---| | check_config | Verify connection to the WP site. Always call first. | | list_pages | List all WP pages with id, title, slug, URL. | | list_templates | List existing SiteZen templates. | | create_page | Create a new WP page wrapping HTML as a SiteZen Section. | | push_section_to_page | Append or replace a section on an existing page. | | get_page_html | Read the current HTML of a page (for editing). | | create_header_footer | Create a site-wide header or footer template. | | create_template | Create any other template type (archive, single-post, listing). | | set_site_branding | Set primary color, accent color, fonts, logo URL. | | get_site_globals | Read current brand defaults. | | detect_section_kind | Dry-run the SiteZen detector to see what specialized blocks the editor will recognize. | | editor_v2_capabilities | Read-only manifest of Style Studio panels — informs Claude how to author HTML for best post-push editability. |

The table above lists the core conversion verbs. The full server also exposes the connection/session layer — connect_site, list_connected_sites, get_license_status, disconnect_site — plus start_conversion, start_html_import, prepare_section, WooCommerce/product tools, and more (30 tools total).

Install

Prerequisites

• Node.js 20.18.1 or newer (required by the HTML-parsing dependencies)
• A WordPress site with the SiteZen plugin installed and activated
• The site's Connection Key from WP Admin → SiteZen → Connection
• Your SiteZen license/beta key

Recommended: npx (published package)

The easiest path is the SiteZen plugin's Setup Claude Desktop wizard (WP Admin → SiteZen → Connection), which generates the config below with your keys pre-filled. Or add it by hand to your Claude Desktop config:

{
  "mcpServers": {
    "sitezen": {
      "command": "npx",
      "args": ["-y", "[email protected]"],
      "env": {
        "SITEZEN_SITE_URL": "https://yoursite.com",
        "SITEZEN_CONNECTION_KEY": "your-connection-key",
        "SITEZEN_LICENSE_KEY": "your-sitezen-license-key",
        "FIGMA_TOKEN": "your-figma-token (optional, for Figma conversions)"
      }
    }
  }
}

npx -y sitezen-mcp@<version> downloads and runs the server — no local clone or build needed. Then fully quit and reopen Claude Desktop. See INSTALL.md for the step-by-step.

Alternative: local build (for development)

cd sitezen-mcp
npm install
npm run build   # produces dist/index.js

Then set the config command to node with the absolute path to dist/index.js.

Typical workflow

1. Open Claude Desktop with this MCP server connected
2. Say: "Check my SiteZen connection." → Claude calls check_config
3. Say: "Look at this Figma design [paste URL + screenshot] and build a hero section for my homepage. Match my site's brand." → Claude calls get_site_globals, generates HTML, calls create_page with the result
4. Open the returned edit_url in your browser → edit in WP with the v2 Style Studio panels
5. Say: "Now add a pricing section below the hero." → Claude calls push_section_to_page with new HTML

No platform conversion, no Vercel timeout, no Anthropic API spend on your side — your end user's Claude subscription covers the LLM cost.

Architecture

Claude Desktop
     │
     │ MCP protocol over stdio
     ▼
sitezen-mcp (this server)
     │
     │ HTTPS + X-SiteZen-Key
     ▼
WordPress site / SiteZen plugin REST API
     │
     │ wp_insert_post / wp_update_post / etc.
     ▼
WordPress database

The MCP server is stateless — every tool call reads the env-var config, hits the plugin REST endpoint, returns the result. No local DB, no cache, no background work.

Editor v2 compatibility

Everything pushed through this MCP becomes a SiteZen Section block in WP. That block is rendered by the v2 editor JS (in plugin-v2/assets/js/editor.js) which gives the user 13+ collapsible Style Studio panels: Layers, Tag, Image, Spacing per-side, Border, Border Radius, Background (with gradient palette), Effects (shadow + opacity + filter), Layout, Size, Flex, Transform (with quick presets), Hover State (writes per-element :hover rules), Alignment & Text Style, Classes.

The MCP doesn't apply edits itself — it just pushes HTML, and the editor wraps that HTML in the v2 editing UX automatically. To get the most editing power, have Claude:

• Wrap text in semantic tags (h1/h2/h3, not div) → Tag panel can swap freely
• Add data-sz-id="hero-cta" on important elements → Layers panel labels them readably
• Use inline styles → per-element panels (Spacing, Border, etc.) edit them directly
• Skip linking external stylesheets that may not exist on the target site

The editor_v2_capabilities tool returns the full panel manifest plus authoring tips Claude can reference.

When to use this vs the platform

| Use the MCP | Use the platform | |---|---| | Solo / agency workflow with you in the loop | Self-serve, no operator in the chat | | You're testing / iterating on Figma → WP | Bulk conversion runs you don't want to babysit | | You want to avoid Vercel costs while validating | You've validated and have funding for Pro | | Complex sections that time out on Hobby | Simple sections under 60s |

Both produce HTML that's edited by the same plugin — pick the input path that fits the situation.