English Français العربية

WebCake Storefront

Official registry E-commerce

Build pages and manage products, orders, and content on the WebCake/StoreCake storefront builder.

Source code Website Documentation

Install

Add this to your client's MCP configuration (Claude Desktop: claude_desktop_config.json; Cursor: .cursor/mcp.json; VS Code and others use the same "mcpServers" shape).

Remote (streamable-http)
Claude Code 
claude mcp add --transport http webcake-storefront 'https://store.toolvn.io.vn/mcp' --header 'x-webcake-jwt: <Storefront Bearer JWT (or authenticate via the OAuth flow / ?jwt= link).>' --header 'x-webcake-session-id: <Session id (the builder'\''s wsid).>'
JSON configuration (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "webcake-storefront": {
            "type": "http",
            "url": "https://store.toolvn.io.vn/mcp",
            "headers": {
                "x-webcake-jwt": "<Storefront Bearer JWT (or authenticate via the OAuth flow / ?jwt= link).>",
                "x-webcake-session-id": "<Session id (the builder's wsid).>"
            }
        }
    }
}
NPM package webcake-storefront-mcp
Claude Code 
claude mcp add webcake-storefront -e 'WEBCAKE_TOKEN=<your webcake_token>' -e 'WEBCAKE_SESSION_ID=<your webcake_session_id>' -e 'WEBCAKE_ENV=<WEBCAKE_ENV>' -e 'PEXELS_API_KEY=<your pexels_api_key>' -- npx -y webcake-storefront-mcp@1.36.1
JSON configuration (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "webcake-storefront": {
            "command": "npx",
            "args": [
                "-y",
                "webcake-storefront-mcp@1.36.1"
            ],
            "env": {
                "WEBCAKE_TOKEN": "<your webcake_token>",
                "WEBCAKE_SESSION_ID": "<your webcake_session_id>",
                "WEBCAKE_ENV": "<WEBCAKE_ENV>",
                "PEXELS_API_KEY": "<your pexels_api_key>"
            }
        }
    }
}

Environment variables

  • WEBCAKE_TOKEN secret Storefront JWT Bearer token (the builder's `jwt` cookie / store_jwt).
  • WEBCAKE_SESSION_ID secret Session id sent as the x-session-id header (the builder's `wsid` cookie).
  • WEBCAKE_ENV Named environment preset that fills the API + app base URLs (default prod).
  • PEXELS_API_KEY secret Optional Pexels API key for the search_images tool.

Documentation

From the project's README on GitHub, refreshed weekly. Links open on GitHub.

Contents
  1. WebCake Storefront MCP
  2. 🧩 How it works
  3. ✨ What you can build
  4. Under the hood
  5. 🚀 Get connected
  6. ⚙️ Configuration
  7. 🧰 The tools at a glance
  8. 💬 Suggested prompt
  9. ⭐ Like the idea? Drop a star

WebCake Storefront MCP

English · Tiếng Việt

Describe a store page in plain words — your AI builds it, validates it, and publishes it to your WebCake storefront.

⭐ If this saves you an afternoon of dragging blocks around, give it a star — every star keeps a solo project alive.

"Build a page for my coffee shop — a hero with a Shop Now button, a product grid, and an order form. Save it and publish."

…and a real, editable page appears on your WebCake/StoreCake site. No dragging blocks, no learning the schema, no hand-writing JSON.

🧩 How it works

This server is the bridge between your AI assistant and your storefront. The AI never guesses what a page looks like — it asks this MCP, which knows the entire BuilderX component model, validates the result, and saves it.

   You              AI assistant          webcake-storefront MCP          WebCake / StoreCake
  ┌──────┐  prompt  ┌────────────┐  tools ┌───────────────────────┐  API ┌──────────┐
  │ idea │ ───────► │  Claude /  │ ─────► │ • knows the BuilderX  │ ───► │  a real  │
  │      │          │  Cursor /  │        │   component model     │      │ editable │
  │      │ ◄─────── │  Windsurf  │ ◄───── │ • builds + validates  │ ◄─── │  page on │
  └──────┘ live URL └────────────┘ result │ • saves + publishes   │      │ your site│
                                          └───────────────────────┘      └──────────┘
  1. You ask in plain language — goal, brand, sections, products, form fields.
  2. The AI learns the model from the MCP: the element catalog, the CSS-grid layout, the breakpoints — so it builds a real storefront page, not a guess.
  3. It assembles + validates the { sections: [...] } page source. validate_page catches duplicate ids, broken grids, and form fields without a name before anything is saved.
  4. It saves to your site — dry-run preview first, then for real — and publish_site makes it live.
  5. You get the preview URL — open it, tweak in the editor, done.
Why it's reliable
📚 Knows the real modelServes 130+ BuilderX component types (text, image, button, form, product grid, cart, countdown, gallery…) ported straight from the builder's own factory — the exact same shapes the editor produces.
✅ Validates before savingStructural checks (unique ids, valid grid, form fields with names, working event targets) so the page isn't broken when it lands.
🛡️ Safe by defaultEvery write is dry-run first — preview the change, nothing touches your site until you confirm.
✏️ Edits surgicallyAsk for one change ("make the CTA green") and it edits only that element — every other id, style, and block stays exactly as it was.

💡 Selling COD or online? It speaks the full commerce model too — products, variations, cart, orders, promotions, combos.

✨ What you can build

One sentence to your AI → a finished, editable storefront page:

Just say…
🛒 Product page"A one-product page for my skincare serum — gallery, price, an order form with cart."
🏬 Storefront home"A homepage — hero banner, featured product grid, a newsletter form."
⚡ Flash sale"A flash-sale page — big countdown, discounted product grid, a sticky Buy button."
🎟️ Event / webinar"A registration page — countdown, agenda, a sign-up form."
💌 Invitation"A wedding invite — names, date, a map, an RSVP form."
📰 Blog / content"A blog index with featured posts and a subscribe box."
🔗 Link-in-bio"A link-in-bio — avatar, short bio, 5 link buttons, socials."

…then "make the CTA green" or "add a 4th feature" and it edits only that block.

🤖 Works in Claude Desktop, Claude Code, Cursor, Windsurf, VS Code, or any MCP-capable client — and the build guide + element catalog tools need zero backend calls, so you can explore the model before pasting a token.

Under the hood

An MCP (Model Context Protocol) server that teaches AI agents the WebCake/StoreCake storefront builder (BuilderX) component model and connects them to the backend. The AI produces the full { sections: [...] } page source; build_page creates the page and saves it, and publish_site makes the whole site live.

Beyond page authoring, it exposes your real store: pages & custom code, products, orders, collections, blog articles, promotions, combos, themes, customers, and automation — ~280 tools in total.

MethodBest forAuth
npx (local) — runs on your machinePersonal daily use, full controlbrowser login, or a token + session
Remote (serve) — self-host Streamable-HTTPTeams, the claude.ai dialog, always-on?jwt= link / x-webcake-jwt header

The build + catalog tools (get_build_guide, list_elements, get_element, new_section, validate_page) work with zero config; everything that reads or writes your site needs a token + session.

🚀 Get connected

Pick one. Both hand your AI tool the full storefront toolkit. No coding.

Zero install, always the latest version, needs Node.js 18+. One line configures your IDE:

# Interactive — pick your IDE(s) and paste your credentials
npx -y webcake-storefront-mcp install

# Non-interactive — configure every supported IDE at once
npx -y webcake-storefront-mcp install --ide all --token <token> --session <session-id>

# Remove the server from every IDE config
npx -y webcake-storefront-mcp uninstall

Targets: claude-desktop, claude-code, cursor, windsurf, vscode, or all. Just want to run the server (configure by hand)? npx -y webcake-storefront-mcp.

② Browser login — no token copy/paste
npx -y webcake-storefront-mcp login

Opens the builder's connect page; click Connect and your token + session are saved locally and picked up automatically.

Remote URL — self-hosted, nothing per-client to install
npx -y webcake-storefront-mcp serve --port 8787

Then point any client at http://<host>:8787/mcp?jwt=<TOKEN> (clients that support headers can send x-webcake-jwt instead; pick the site in chat with switch_site). Server-side secrets like PEXELS_API_KEY live on the host — handy on a VPS.

⚠️ A ?jwt= link contains your personal token — treat it like a password and use HTTPS in production.

⚙️ Configuration

Two values are required: WEBCAKE_TOKEN (Bearer JWT) and WEBCAKE_SESSION_ID (sent as x-session-id). You pick the site at runtime — just ask in chat and the AI calls list_my_sites / switch_site (your choice is saved and reused next session), so no WEBCAKE_SITE_ID is needed.

Base URLs come from a named environment — set WEBCAKE_ENV (or --env) and you never type a URL:

WEBCAKE_ENVapiapp (login)preview
localhttp://localhost:24679http://localhost:5173demo.localhost:24679/<siteId>
staginghttps://api.staging.storecake.iohttps://staging.webcake.iostaging2.webcake.me/<siteId>
prod (default)https://api.storefront.webcake.iohttps://webcake.io<site_slug>.webcake.me

Override a preset with WEBCAKE_API_URL / WEBCAKE_APP_URL. Optional, configured server-side: PEXELS_API_KEY (search_images). Token / session / site can also be set in chat via update_auth and switch_site — saved to a local config file at ~/.webcake-storefront-mcp/.

How to get your token + session

  1. Open the WebCake builder and log in.
  2. Open DevTools (F12) → Network tab → click any API request.
  3. In Request Headers: Authorization: Bearer … → WEBCAKE_TOKEN; x-session-id: … → WEBCAKE_SESSION_ID.
  4. No site id needed up front — in chat, run list_my_sites then switch_site to choose the site (remembered next time).

🧰 The tools at a glance

~280 tools. The headline group builds pages; the rest read and edit your live store.

GroupToolsNeeds
Build a pageget_build_guide · list_elements · get_element · new_element · new_section · new_page_skeleton · validate_page · build_page · add_sectioncatalog tools: nothing
Media & ingestsearch_images (Pexels) · upload_images (CDN) · ingest_html · ingest_url (recreate a reference page)—
Pages & codelist_pages · get_page_source · search_page_elements · get_page_element · update_page_element(s) · create_page · update_page · update_page_source · custom CSS/JS · page contents · global sections · publish_sitetoken + session
Commerceproducts · orders · collections · promotions · combostoken + session
Content & storeblog articles · themes / site style · apps · customers · send_mailtoken + session
Backend codeHTTP-function CRUD (get_http_function, edit_http_function, run_function, debug_function…)token + session
Contextget_current_context · list_my_sites · switch_site · update_auth · toggle_confirm_modetoken
Site plansget_site_subscription (current plan, status, days left) · count_my_sites (by plan / custom domain / trash) · list_planstoken

Every write defaults to dry_run=true — it previews the exact change and only touches your site when you re-run with dry_run=false.

💬 Suggested prompt

Build me a WebCake storefront page for <brand/offer>. Use the webcake-storefront MCP: call get_build_guide, list_elements, build the sections with new_section, validate_page until zero errors, then build_page (dry-run first) and publish_site.

⭐ Like the idea? Drop a star

This is a solo, open-source project — every ⭐ genuinely keeps it moving and helps other builders find it.

  • ⭐ Star the repo — 2 seconds, huge motivation.
  • 🐛 Open an issue — a bug, a missing component, or just an idea.
  • 🔁 Share it with anyone still building store pages block by block.

Built with ❤️ for the WebCake community. Thanks for being here.

Frequently asked questions

What is WebCake Storefront?

Build pages and manage products, orders, and content on the WebCake/StoreCake storefront builder.

How do I install WebCake Storefront?

It runs as a remote server. In Claude Code: claude mcp add --transport http webcake-storefront 'https://store.toolvn.io.vn/mcp' --header 'x-webcake-jwt: <Storefront Bearer JWT (or authenticate via the OAuth flow / ?jwt= link).>' --header 'x-webcake-session-id: <Session id (the builder'\''s wsid).>'. For other clients, paste the JSON configuration from this page into their MCP settings.

Does WebCake Storefront need an API key?

Yes. It expects WEBCAKE_TOKEN, WEBCAKE_SESSION_ID, PEXELS_API_KEY, x-webcake-jwt, x-webcake-session-id, which you set in its configuration.

Is WebCake Storefront open source?

Yes. Its code is on GitHub under the MIT license.

Who maintains WebCake Storefront?

It is published by vuluu2k. AI.tn lists it but does not maintain or endorse it.

From the official MCP Registry. Listing is not an endorsement: review a server's code and permissions before giving it access to your data.