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β
βββββββββββββββββββββββββ ββββββββββββ
- You ask in plain language β goal, brand, sections, products, form fields.
- 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.
- It assembles + validates the
{ sections: [...] } page source. validate_page catches duplicate ids, broken grids, and form fields without a name before anything is saved.
- It saves to your site β dry-run preview first, then for real β and
publish_site makes it live.
- You get the preview URL β open it, tweak in the editor, done.
Why it's reliable
| |
|---|
| π Knows the real model | Serves 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 saving | Structural checks (unique ids, valid grid, form fields with names, working event targets) so the page isn't broken when it lands. |
| π‘οΈ Safe by default | Every write is dry-run first β preview the change, nothing touches your site until you confirm. |
| βοΈ Edits surgically | Ask 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.
| Method | Best for | Auth |
|---|
| npx (local) β runs on your machine | Personal daily use, full control | browser login, or a token + session |
Remote (serve) β self-host Streamable-HTTP | Teams, 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.
β npx β runs on your machine (recommended)
Zero install, always the latest version, needs Node.js 18+. One line configures your IDE:
npx -y webcake-storefront-mcp install
npx -y webcake-storefront-mcp install --ide all --token <token> --session <session-id>
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_ENV | api | app (login) | preview |
|---|
local | http://localhost:24679 | http://localhost:5173 | demo.localhost:24679/<siteId> |
staging | https://api.staging.storecake.io | https://staging.webcake.io | staging2.webcake.me/<siteId> |
prod (default) | https://api.storefront.webcake.io | https://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
- Open the WebCake builder and log in.
- Open DevTools (
F12) β Network tab β click any API request.
- In Request Headers:
Authorization: Bearer β¦ β WEBCAKE_TOKEN; x-session-id: β¦ β WEBCAKE_SESSION_ID.
- No site id needed up front β in chat, run
list_my_sites then switch_site to choose the site (remembered next time).
~280 tools. The headline group builds pages; the rest read and edit your live store.
| Group | Tools | Needs |
|---|
| Build a page | get_build_guide Β· list_elements Β· get_element Β· new_element Β· new_section Β· new_page_skeleton Β· validate_page Β· build_page Β· add_section | catalog tools: nothing |
| Media & ingest | search_images (Pexels) Β· upload_images (CDN) Β· ingest_html Β· ingest_url (recreate a reference page) | β |
| Pages & code | list_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_site | token + session |
| Commerce | products Β· orders Β· collections Β· promotions Β· combos | token + session |
| Content & store | blog articles Β· themes / site style Β· apps Β· customers Β· send_mail | token + session |
| Backend code | HTTP-function CRUD (get_http_function, edit_http_function, run_function, debug_functionβ¦) | token + session |
| Context | get_current_context Β· list_my_sites Β· switch_site Β· update_auth Β· toggle_confirm_mode | token |
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.