# Webcake Landing [Health: Active] **Category:** πŸ’» Developer Tools **Repository:** https://github.com/vuluu2k/webcake-landing-mcp **GitHub Stars:** 5 **Views:** 0 **Installs:** 0 **Upvotes:** 0 **Directory Page:** https://allmcps.com/mcp/webcake-landing ## Description Build, validate, and persist Webcake landing-page source JSON: element schemas plus AI usage hints. ## Claude Desktop Quick Installation Install path detected from listing signals. Uses `npx` (confidence: high): ```json "mcpServers": { "webcake-landing": { "command": "npx", "args": ["-y","webcake-landing-mcp"] } } ``` ## Documentation & README # Webcake WebCake Landing MCP **English** Β· [TiαΊΏng Việt](https://github.com/vuluu2k/webcake-landing-mcp/blob/HEAD/README.vi.md) [![npm version](https://img.shields.io/npm/v/webcake-landing-mcp?color=cb3837&logo=npm)](https://www.npmjs.com/package/webcake-landing-mcp) [![npm downloads](https://img.shields.io/npm/dm/webcake-landing-mcp?color=cb3837&logo=npm)](https://www.npmjs.com/package/webcake-landing-mcp) [![GitHub stars](https://img.shields.io/github/stars/vuluu2k/webcake-landing-mcp?style=social)](https://github.com/vuluu2k/webcake-landing-mcp/stargazers) [![MCP](https://img.shields.io/badge/Model_Context_Protocol-server-6E56CF)](https://modelcontextprotocol.io) > **Describe a landing page in plain words β€” your AI builds it, checks it, and ships it straight to WebCake.** > ⭐ **If this saves you an afternoon of dragging boxes, [give it a star](https://github.com/vuluu2k/webcake-landing-mcp) β€” it's a one-dev project and every star keeps it alive.** > *"Build a landing page for my coffee shop β€” a hero with a sign-up button, a 3-feature section, and a lead form. Save it to my workspace."* …and a real, **editable** WebCake page appears in your account. No dragging boxes, no learning the schema, no hand-writing JSON. --- ## 🧩 How it works This server is the **bridge** between your AI assistant and WebCake. The AI never *guesses* what a WebCake page looks like β€” it asks this MCP, which knows the entire element model, validates the result, and saves it for you. ```text You AI assistant webcake-landing MCP WebCake β”Œβ”€β”€β”€β”€β”€β”€β” prompt β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” tools β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” API β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ idea β”‚ ───────► β”‚ Claude / β”‚ ──────► β”‚ β€’ knows the element β”‚ ────► β”‚ a real β”‚ β”‚ β”‚ β”‚ Cursor / β”‚ β”‚ model + AI hints β”‚ β”‚ editable β”‚ β”‚ β”‚ ◄─────── β”‚ Windsurf β”‚ ◄────── β”‚ β€’ builds + validates β”‚ ◄──── β”‚ page in β”‚ β””β”€β”€β”€β”€β”€β”€β”˜ page URL β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ result β”‚ β€’ saves to your acct β”‚ β”‚ WebCake β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ ``` 1. **You ask** in plain language β€” goal, brand, sections, CTA, form fields. 2. **The AI learns the model** from the MCP: the element catalog, the absolute-positioning canvas, the event vocabulary β€” so it builds a *real* WebCake page, not a guess. 3. **It assembles + validates** the full `{ page, popup, settings, options }` JSON. `validate_page` catches off-canvas boxes, dangling CTAs, and missing form fields **before** anything is saved. 4. **It persists** to your WebCake account β€” dry-run preview first, then for real. 5. **You get an editor link** β€” open it, tweak, publish. The AI did the heavy lifting. ### Why it's reliable | | | |---|---| | πŸ“š **Knows the real model** | Serves WebCake's actual element catalog (40+ types β€” hero, form, countdown, gallery, product list…), each with its exact `specials` and AI hints, drawn straight from the editor's renderers. | | βœ… **Validates before saving** | Structural + semantic checks (unique ids, on-canvas layout, working CTAs, unique form fields) so the page isn't broken when it lands. | | πŸ›‘οΈ **Safe by default** | Every write is **dry-run first** (preview the request, token masked) β€” nothing touches your account until you confirm. | | ✏️ **Edits surgically** | Ask for one change ("make the CTA green") and it edits *only* that element β€” every other id, coordinate, and block stays exactly as it was. | > πŸ’‘ **Lead-gen, events, invitations, app promos** β€” or **selling COD/online**? It speaks WebCake's commerce model too (product lists, variations, cart). --- ## ✨ What you can build One sentence to your AI β†’ a finished, **editable** WebCake page. A taste of what people ship with it: | | Just say… | |---|---| | 🧲 **Lead-gen landing** | *"A SaaS waitlist page β€” hero, 3 benefits, an email-capture form."* | | πŸ›’ **COD / online store** | *"A one-product page for my skincare serum β€” gallery, price, variations, an order form with cart."* | | 🎟️ **Event / webinar** | *"A registration page for Saturday's webinar β€” countdown, agenda, sign-up form."* | | πŸ’Œ **Invitation** | *"A wedding invite β€” names, date, a map, an RSVP form."* | | πŸ“± **App promo** | *"A page for my fitness app β€” phone mockups, feature list, App Store + Google Play buttons."* | | ⚑ **Flash sale** | *"A flash-sale page β€” big countdown, discounted product grid, a sticky Buy button."* | | πŸ”— **Link-in-bio** | *"A link-in-bio for my creator profile β€” avatar, short bio, 5 link buttons, socials."* | | πŸŽ‰ **Product launch** | *"A launch page for v2 β€” hero, what's-new list, an early-access form."* | …then **"make the CTA green"** or **"add a 4th feature"** and it edits *only* that block β€” every other id and coordinate stays exactly where it was. > πŸ€– Works in **Claude Desktop, Claude Code, Cursor, Windsurf, Augment, Codex, Antigravity, Gemini CLI, Cline, Kiro, OpenCode**, or any MCP-capable client β€” and the **reference + generation tools need zero setup**, so you can try it before ever pasting a token. --- ## Under the hood MCP (Model Context Protocol) server that teaches AI agents how to build a complete **WebCake landing-page source JSON** from a requirement β€” and persist it to a WebCake backend. It exposes the element catalog, per-element usage hints + `specials`, the full page JSON Schema, valid element/page skeletons, a page validator, and tools to create or edit pages on the backend. The AI agent produces the full `{ page, popup, settings, options, cartConfigs }` JSON; `create_page` persists it and auto-publishes (build + `publish_html`) so the preview renders immediately (the edit tools save source-only β€” re-publish via `publish_page` after edits). | Method | Best for | Auth | |--------|----------|------| | **npx (local)** β€” runs on your machine | Personal daily use, full control | browser `login`, a JWT, or none (reference tools) | | **Hosted URL** β€” use our live server, nothing to install | No Node.js, teams, the claude.ai dialog | your personal `?jwt=` link / `x-webcake-jwt` header | The **reference + generation tools** (`get_generation_guide`, `list_elements`, `validate_page`, …) and the **ingest tools** (`ingest_html`, `ingest_url` β€” turn an existing HTML or URL into a layout anchor so the AI can recreate or adapt it) work with **zero config**; only the **persistence tools** (`create_page`, `update_page`, `add_section`, `patch_page`, `publish_page`, `list_pages`, `find_pages`, `get_page`, `list_organizations`) need a token. Credentials resolve in order: **per-request header β†’ env var β†’ saved `auth.json`** (`login`). --- ## πŸš€ Get connected β€” the 2 main ways Pick **one**. Both hand your AI tool (Claude, Cursor, …) the full Webcake landing toolkit. No coding. ### β‘  `npx` β€” runs on your machine (recommended for personal use) Zero install, always the latest version, needs Node.js 18+. **One line** grabs your token *and* writes the IDE config: ```bash # Interactive β€” pick environment, log in via browser (or paste a JWT), pick IDE(s) npx -y webcake-landing-mcp install # Non-interactive β€” configure every supported IDE at once (env + token via flags) npx -y webcake-landing-mcp install --ide all --env prod --jwt # Remove the server from every IDE config npx -y webcake-landing-mcp uninstall ``` It writes a `webcake-landing` entry into the right config file for each target: `claude-desktop`, `claude-code`, `cursor`, `windsurf`, `augment` (VS Code), `codex`, `antigravity`, `gemini` (Gemini CLI), `cline`, `kiro`, `opencode`, or `all`. Flags: `--ide`, `--env`, `--jwt`, `--org-id`, `--api-base`/`--app-base`, `--npx`/`--local`, `-y` β€” see `install --help`. Just want to run the server (configure by hand later)? `npx -y webcake-landing-mcp` > πŸ› οΈ Hand-written per-IDE config, shell-script installers (`install.sh`/`install.ps1`), or a cloned > local build β†’ **[docs/manual-install.md](https://github.com/vuluu2k/webcake-landing-mcp/blob/HEAD/docs/manual-install.md)**. ### β‘‘ Remote URL `…/mcp?jwt=` β€” hosted, nothing to install The server is **already live** at `https://mcp.toolvn.io.vn/mcp` β€” no Node.js, no machine to keep awake. Grab **your personal link** (your token is baked in) and paste it into your client's *Add custom connector* / config: ``` https://mcp.toolvn.io.vn/mcp?jwt= ``` Two ways to get the link: - **Easiest** β€” open **** in your Webcake dashboard β†’ it builds & copies the link for you. - **By hand** β€” see the step-by-step guide: **[docs/connect-mcp.md](https://github.com/vuluu2k/webcake-landing-mcp/blob/HEAD/docs/connect-mcp.md)**. Optional extras: `&env=prod`, `&org_id=…`, `&api_base=…`. Hand each teammate a link with their own `jwt` β†’ per-user, no OAuth. Clients that support headers should send the token as **`x-webcake-jwt`** instead of putting it in the URL β€” the full header ↔ env mapping is in **[docs/configuration.md](https://github.com/vuluu2k/webcake-landing-mcp/blob/HEAD/docs/configuration.md#per-request-headers-hosted--remote-server)**. βœ… Best for: no Node.js, team/shared use, the **claude.ai** connector dialog (URL-only, no headers). ⚠️ The link contains your personal token β€” treat it like a password, always use **HTTPS**. --- ## βš™οΈ Configuration The quick version β€” only the **persistence tools** need any of this: ```bash npx -y webcake-landing-mcp login # opens the browser once, saves the token to ~/.webcake-landing-mcp/auth.json ``` …or set `WEBCAKE_ENV` (`local` | `staging` | `prod` β€” fills in all base URLs) + `WEBCAKE_JWT`. For `publish_page` to actually put a page **live**, a build host is needed (it renders the `app`/`app_css` that the live `publish_html` route requires): - `prod` preset auto-configures `https://build.webcake.io` β€” no extra setup (the preset applies when the env resolves to `prod`: `WEBCAKE_ENV=prod`, `--env prod`, or `x-webcake-env: prod`). - For staging/local, set `WEBCAKE_BUILD_BASE=` or send the `x-webcake-build-base` header per request. - Without it, `publish_page` falls back to a legacy source-only save with `rendered:false, live:false` + a warning β€” nothing goes live. - A page is only **permanently** live with a `custom_domain`; without one the returned `/preview/` link expires ~10 minutes after the publish. Everything else β€” the full env-var table, environment presets, per-request headers for the hosted server, the `login` browser flow (+ backend contract), and how to grab a JWT by hand β€” lives in **[docs/configuration.md](https://github.com/vuluu2k/webcake-landing-mcp/blob/HEAD/docs/configuration.md)**. --- ## πŸ“š Docs | Guide | What's inside | |-------|---------------| | **[Connect your IDE / claude.ai](https://github.com/vuluu2k/webcake-landing-mcp/blob/HEAD/docs/connect-mcp.md)** | Step-by-step connection for every client (npx & hosted URL), troubleshooting table. | | **[Configuration](https://github.com/vuluu2k/webcake-landing-mcp/blob/HEAD/docs/configuration.md)** | Env vars, `--env` presets, browser `login`, per-request headers, getting a JWT. | | **[Tools reference](https://github.com/vuluu2k/webcake-landing-mcp/blob/HEAD/docs/tools.md)** | All 23 tools in detail + the step-by-step workflow + model notes. | | **[Usage examples](https://github.com/vuluu2k/webcake-landing-mcp/blob/HEAD/docs/usage-examples.md)** | Three end-to-end walkthroughs: build from a brief, surgical edit, inspect a type. | | **[Manual / advanced install](https://github.com/vuluu2k/webcake-landing-mcp/blob/HEAD/docs/manual-install.md)** | Shell installers, cloned builds, hand-written per-IDE config. | | **[Page-element schema](https://github.com/vuluu2k/webcake-landing-mcp/blob/HEAD/docs/page-element-schema.md)** | The full element-model reference (+ [every special/event](https://github.com/vuluu2k/webcake-landing-mcp/blob/HEAD/docs/element-specials-reference.md)). | --- ## 🧰 The tools at a glance 23 tools in five groups β€” full descriptions in **[docs/tools.md](https://github.com/vuluu2k/webcake-landing-mcp/blob/HEAD/docs/tools.md)**: | Group | Tools | Needs | |-------|-------|-------| | **Reference** | `get_generation_guide` Β· `list_elements` Β· `get_element` Β· `get_page_schema` | nothing | | **Generation** | `new_element` Β· `new_page_skeleton` Β· `validate_page` Β· `layout` (exact centering/row/grid/stack coordinates, both breakpoints) | nothing | | **Media** | `search_images` (real Pexels stock photos) Β· `get_icon_svg` (Material Symbols / Font Awesome icon names β†’ inline SVG via Iconify) Β· `upload_images` (re-host external images, data: URIs, or local file paths from the user's machine β€” files into your media collection when Webcake creds **and** an org are available; the org is required and must match the page's, so settle it up front β€” 1 org auto-selects, 2+ with none chosen returns `organization_required` + the list; no JWT β†’ the public CDN) Β· `render_preview` (screenshot a page/URL so the model can see + compare it) | nothing | | **Ingest** | `ingest_html` Β· `ingest_url` (recreate an existing page) | nothing | | **Persistence** | `list_organizations` Β· `create_page` Β· `list_pages` Β· `find_pages` Β· `get_page` Β· `update_page` Β· `add_section` Β· `patch_page` Β· `publish_page` | `WEBCAKE_API_BASE` + `WEBCAKE_JWT` | Every write **defaults to `dry_run=true`** β€” it previews the exact request (token masked) and only touches your account when you re-run with `dry_run=false`. ## Suggested prompt > Build me a WebCake landing page for <brand/offer>. Use the webcake-landing MCP: > call `get_generation_guide`, `new_page_skeleton`, then `get_element` for each element type you use, > assemble the `{ page, popup, settings, options }` JSON, `validate_page` until zero errors, > then `create_page` (dry-run first). --- ## ⭐ Like the idea? Drop a star This is a solo, open-source project β€” every ⭐ genuinely keeps it moving and helps other builders discover it. - ⭐ **[Star the repo](https://github.com/vuluu2k/webcake-landing-mcp)** β€” 2 seconds, huge motivation. - πŸ› **[Open an issue](https://github.com/vuluu2k/webcake-landing-mcp/issues)** β€” a bug, a missing element type, or just an idea. - πŸ” **Share it** with anyone still building landing pages box by box. [![Star History Chart](https://api.star-history.com/svg?repos=vuluu2k/webcake-landing-mcp&type=Date)](https://star-history.com/#vuluu2k/webcake-landing-mcp&Date) > Built with ❀️ for the WebCake community. Thanks for being here.