sitezen-mcp

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 (12 total)

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.

Install

Prerequisites

• Node.js 18 or newer
• A WordPress site with the SiteZen plugin installed and activated
• The site's Connection Key from WP Admin → SiteZen → Connection

Local build

cd sitezen-mcp
npm install
npm run build

This produces dist/index.js — that's the MCP server binary.

Wire to Claude Desktop

See INSTALL.md for the exact JSON snippet to add to your Claude Desktop config.

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.