{
"markdown": "# ![\"Webcake\"](\"docs/assets/webcake-icon.svg\")
WebCake Landing MCP\n\n**English** · [Tiếng Việt](./README.vi.md)\n\n[](https://www.npmjs.com/package/webcake-landing-mcp)\n[](https://www.npmjs.com/package/webcake-landing-mcp)\n[](https://github.com/vuluu2k/webcake-landing-mcp/stargazers)\n[](https://modelcontextprotocol.io)\n\n> **Describe a landing page in plain words — your AI builds it, checks it, and ships it straight to WebCake.**\n\n> ⭐ **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.**\n\n> *\"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.\"*\n\n…and a real, **editable** WebCake page appears in your account. No dragging boxes, no learning the schema, no hand-writing JSON.\n\n---\n\n## 🧩 How it works\n\nThis server is the **bridge** between your AI assistant and WebCake. The AI never *guesses* what a WebCake\npage looks like — it asks this MCP, which knows the entire element model, validates the result, and saves it for you.\n\n```text\n You AI assistant webcake-landing MCP WebCake\n ┌──────┐ prompt ┌────────────┐ tools ┌──────────────────────┐ API ┌──────────┐\n │ idea │ ───────► │ Claude / │ ──────► │ • knows the element │ ────► │ a real │\n │ │ │ Cursor / │ │ model + AI hints │ │ editable │\n │ │ ◄─────── │ Windsurf │ ◄────── │ • builds + validates │ ◄──── │ page in │\n └──────┘ page URL └────────────┘ result │ • saves to your acct │ │ WebCake │\n └──────────────────────┘ └──────────┘\n```\n\n1. **You ask** in plain language — goal, brand, sections, CTA, form fields.\n2. **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.\n3. **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.\n4. **It persists** to your WebCake account — dry-run preview first, then for real.\n5. **You get an editor link** — open it, tweak, publish. The AI did the heavy lifting.\n\n### Why it's reliable\n\n| | |\n|---|---|\n| 📚 **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. |\n| ✅ **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. |\n| 🛡️ **Safe by default** | Every write is **dry-run first** (preview the request, token masked) — nothing touches your account until you confirm. |\n| ✏️ **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. |\n\n> 💡 **Lead-gen, events, invitations, app promos** — or **selling COD/online**? It speaks WebCake's commerce model too (product lists, variations, cart).\n\n---\n\n## ✨ What you can build\n\nOne sentence to your AI → a finished, **editable** WebCake page. A taste of what people ship with it:\n\n| | Just say… |\n|---|---|\n| 🧲 **Lead-gen landing** | *\"A SaaS waitlist page — hero, 3 benefits, an email-capture form.\"* |\n| 🛒 **COD / online store** | *\"A one-product page for my skincare serum — gallery, price, variations, an order form with cart.\"* |\n| 🎟️ **Event / webinar** | *\"A registration page for Saturday's webinar — countdown, agenda, sign-up form.\"* |\n| 💌 **Invitation** | *\"A wedding invite — names, date, a map, an RSVP form.\"* |\n| 📱 **App promo** | *\"A page for my fitness app — phone mockups, feature list, App Store + Google Play buttons.\"* |\n| ⚡ **Flash sale** | *\"A flash-sale page — big countdown, discounted product grid, a sticky Buy button.\"* |\n| 🔗 **Link-in-bio** | *\"A link-in-bio for my creator profile — avatar, short bio, 5 link buttons, socials.\"* |\n| 🎉 **Product launch** | *\"A launch page for v2 — hero, what's-new list, an early-access form.\"* |\n\n…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.\n\n> 🤖 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.\n\n---\n\n## Under the hood\n\nMCP (Model Context Protocol) server that teaches AI agents how to build a complete\n**WebCake landing-page source JSON** from a requirement — and persist it to a WebCake backend.\n\nIt exposes the element catalog, per-element usage hints + `specials`, the full page JSON Schema,\nvalid element/page skeletons, a page validator, and tools to create or edit pages on the backend.\nThe AI agent produces the full `{ page, popup, settings, options, cartConfigs }` JSON; `create_page`\npersists it and auto-publishes (build + `publish_html`) so the preview renders immediately (the edit\ntools save source-only — re-publish via `publish_page` after edits).\n\n| Method | Best for | Auth |\n|--------|----------|------|\n| **npx (local)** — runs on your machine | Personal daily use, full control | browser `login`, a JWT, or none (reference tools) |\n| **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 |\n\nThe **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`).\n\n---\n\n## 🚀 Get connected — the 2 main ways\n\nPick **one**. Both hand your AI tool (Claude, Cursor, …) the full Webcake landing toolkit. No coding.\n\n### ① `npx` — runs on your machine (recommended for personal use)\n\nZero install, always the latest version, needs Node.js 18+. **One line** grabs your token *and* writes the IDE config:\n\n```bash\n# Interactive — pick environment, log in via browser (or paste a JWT), pick IDE(s)\nnpx -y webcake-landing-mcp install\n\n# Non-interactive — configure every supported IDE at once (env + token via flags)\nnpx -y webcake-landing-mcp install --ide all --env prod --jwt \n\n# Remove the server from every IDE config\nnpx -y webcake-landing-mcp uninstall\n```\n\nIt writes a `webcake-landing` entry into the right config file for each target: `claude-desktop`,\n`claude-code`, `cursor`, `windsurf`, `augment` (VS Code), `codex`, `antigravity`, `gemini` (Gemini CLI),\n`cline`, `kiro`, `opencode`, or `all`. Flags: `--ide`, `--env`, `--jwt`, `--org-id`,\n`--api-base`/`--app-base`, `--npx`/`--local`, `-y` — see `install --help`.\n\nJust want to run the server (configure by hand later)? `npx -y webcake-landing-mcp`\n\n> 🛠️ Hand-written per-IDE config, shell-script installers (`install.sh`/`install.ps1`), or a cloned\n> local build → **[docs/manual-install.md](docs/manual-install.md)**.\n\n### ② Remote URL `…/mcp?jwt=` — hosted, nothing to install\n\nThe server is **already live** at `https://mcp.toolvn.io.vn/mcp` — no Node.js, no machine to keep awake.\nGrab **your personal link** (your token is baked in) and paste it into your client's *Add custom connector* / config:\n\n```\nhttps://mcp.toolvn.io.vn/mcp?jwt=\n```\n\nTwo ways to get the link:\n- **Easiest** — open **** in your Webcake dashboard → it builds & copies the link for you.\n- **By hand** — see the step-by-step guide: **[docs/connect-mcp.md](docs/connect-mcp.md)**.\n\nOptional extras: `&env=prod`, `&org_id=…`, `&api_base=…`. Hand each teammate a link with their own `jwt` →\nper-user, no OAuth. Clients that support headers should send the token as **`x-webcake-jwt`** instead of\nputting it in the URL — the full header ↔ env mapping is in **[docs/configuration.md](docs/configuration.md#per-request-headers-hosted--remote-server)**.\n\n✅ Best for: no Node.js, team/shared use, the **claude.ai** connector dialog (URL-only, no headers).\n⚠️ The link contains your personal token — treat it like a password, always use **HTTPS**.\n\n---\n\n## ⚙️ Configuration\n\nThe quick version — only the **persistence tools** need any of this:\n\n```bash\nnpx -y webcake-landing-mcp login # opens the browser once, saves the token to ~/.webcake-landing-mcp/auth.json\n```\n\n…or set `WEBCAKE_ENV` (`local` | `staging` | `prod` — fills in all base URLs) + `WEBCAKE_JWT`.\n\nFor `publish_page` to actually put a page **live**, a build host is needed (it renders the\n`app`/`app_css` that the live `publish_html` route requires):\n- `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`).\n- For staging/local, set `WEBCAKE_BUILD_BASE=` or send the `x-webcake-build-base` header per request.\n- Without it, `publish_page` falls back to a legacy source-only save with `rendered:false, live:false` + a warning — nothing goes live.\n- A page is only **permanently** live with a `custom_domain`; without one the returned `/preview/` link expires ~10 minutes after the publish.\n\nEverything else — the full env-var table, environment presets, per-request headers for the hosted\nserver, the `login` browser flow (+ backend contract), and how to grab a JWT by hand — lives in\n**[docs/configuration.md](docs/configuration.md)**.\n\n---\n\n## 📚 Docs\n\n| Guide | What's inside |\n|-------|---------------|\n| **[Connect your IDE / claude.ai](docs/connect-mcp.md)** | Step-by-step connection for every client (npx & hosted URL), troubleshooting table. |\n| **[Configuration](docs/configuration.md)** | Env vars, `--env` presets, browser `login`, per-request headers, getting a JWT. |\n| **[Tools reference](docs/tools.md)** | All 23 tools in detail + the step-by-step workflow + model notes. |\n| **[Usage examples](docs/usage-examples.md)** | Three end-to-end walkthroughs: build from a brief, surgical edit, inspect a type. |\n| **[Manual / advanced install](docs/manual-install.md)** | Shell installers, cloned builds, hand-written per-IDE config. |\n| **[Page-element schema](docs/page-element-schema.md)** | The full element-model reference (+ [every special/event](docs/element-specials-reference.md)). |\n\n---\n\n## 🧰 The tools at a glance\n\n23 tools in five groups — full descriptions in **[docs/tools.md](docs/tools.md)**:\n\n| Group | Tools | Needs |\n|-------|-------|-------|\n| **Reference** | `get_generation_guide` · `list_elements` · `get_element` · `get_page_schema` | nothing |\n| **Generation** | `new_element` · `new_page_skeleton` · `validate_page` · `layout` (exact centering/row/grid/stack coordinates, both breakpoints) | nothing |\n| **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 |\n| **Ingest** | `ingest_html` · `ingest_url` (recreate an existing page) | nothing |\n| **Persistence** | `list_organizations` · `create_page` · `list_pages` · `find_pages` · `get_page` · `update_page` · `add_section` · `patch_page` · `publish_page` | `WEBCAKE_API_BASE` + `WEBCAKE_JWT` |\n\nEvery write **defaults to `dry_run=true`** — it previews the exact request (token masked) and only\ntouches your account when you re-run with `dry_run=false`.\n\n## Suggested prompt\n\n> Build me a WebCake landing page for <brand/offer>. Use the webcake-landing MCP:\n> call `get_generation_guide`, `new_page_skeleton`, then `get_element` for each element type you use,\n> assemble the `{ page, popup, settings, options }` JSON, `validate_page` until zero errors,\n> then `create_page` (dry-run first).\n\n---\n\n## ⭐ Like the idea? Drop a star\n\nThis is a solo, open-source project — every ⭐ genuinely keeps it moving and helps other builders discover it.\n\n- ⭐ **[Star the repo](https://github.com/vuluu2k/webcake-landing-mcp)** — 2 seconds, huge motivation.\n- 🐛 **[Open an issue](https://github.com/vuluu2k/webcake-landing-mcp/issues)** — a bug, a missing element type, or just an idea.\n- 🔁 **Share it** with anyone still building landing pages box by box.\n\n[](https://star-history.com/#vuluu2k/webcake-landing-mcp&Date)\n\n> Built with ❤️ for the WebCake community. Thanks for being here.\n",
"bytes": 13799,
"sha": "b4b1be98a2e2759254500117333b5ee7ac342c901ca3c3b8fd41f2ec0881a643",
"repo_slug": "vuluu2k/webcake-landing-mcp",
"fonte": "repo",
"truncated": false,
"api": "https://agentalog.com/api/listings/mcp_io_github_vuluu2k_webcake_landing_mcp_ac87d14e/readme"
}