# WebCake Storefront **Category:** πŸ’» Developer Tools **Repository:** https://github.com/vuluu2k/webcake-storefront-mcp **Views:** 0 **Installs:** 0 **Upvotes:** 0 **Directory Page:** https://allmcps.com/mcp/webcake-storefront ## Description Build pages and manage products, orders, and content on the WebCake/StoreCake storefront builder. ## Claude Desktop Quick Installation Heuristic fallback β€” verify the package name and runner against the repository README before running it. Uses `npx` (confidence: low): ```json "mcpServers": { "webcake-storefront": { "command": "npx", "args": ["-y","webcake-storefront"] } } ``` ## Documentation & README

WebCake Storefront MCP

WebCake Storefront MCP

**English** Β· [TiαΊΏng Việt](https://github.com/vuluu2k/webcake-storefront-mcp/blob/HEAD/README.vi.md) [![npm version](https://img.shields.io/npm/v/webcake-storefront-mcp?color=cb3837&logo=npm)](https://www.npmjs.com/package/webcake-storefront-mcp) [![npm downloads](https://img.shields.io/npm/dm/webcake-storefront-mcp?color=cb3837&logo=npm)](https://www.npmjs.com/package/webcake-storefront-mcp) [![GitHub stars](https://img.shields.io/github/stars/vuluu2k/webcake-storefront-mcp?style=social)](https://github.com/vuluu2k/webcake-storefront-mcp/stargazers) [![MCP](https://img.shields.io/badge/Model_Context_Protocol-server-6E56CF)](https://modelcontextprotocol.io) > **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](https://github.com/vuluu2k/webcake-storefront-mcp) β€” 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. ```text 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 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: ```bash # 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 --session # 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 ```bash 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 ```bash npx -y webcake-storefront-mcp serve --port 8787 ``` Then point any client at `http://:8787/mcp?jwt=` (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/` | | `staging` | `https://api.staging.storecake.io` | `https://staging.webcake.io` | `staging2.webcake.me/` | | **`prod`** (default) | `https://api.storefront.webcake.io` | `https://webcake.io` | `.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. | 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](https://github.com/vuluu2k/webcake-storefront-mcp)** β€” 2 seconds, huge motivation. - πŸ› **[Open an issue](https://github.com/vuluu2k/webcake-storefront-mcp/issues)** β€” a bug, a missing component, or just an idea. - πŸ” **Share it** with anyone still building store pages block by block. [![Star History Chart](https://api.star-history.com/svg?repos=vuluu2k/webcake-storefront-mcp&type=Date)](https://star-history.com/#vuluu2k/webcake-storefront-mcp&Date) > Built with ❀️ for the WebCake community. Thanks for being here.