Lets Claude build complete WebCake landing pages from plain language prompts by exposing the full element catalog, JSON schema, and validation rules. It knows the exact structure of every WebCake component (hero, form, countdown, product list, cart) and guides the AI to assemble valid page JSON with absolute positioning, CTAs, and form fields. The validate_page tool catches layout errors before persistence, and the create_page and patch_page tools push directly to your WebCake account with dry-run previews. You describe the page you want, the AI calls list_elements and get_generation_guide to learn the model, builds the JSON, validates it, and saves it. You get an editable page in the WebCake editor without touching the schema yourself. Works over stdio locally or as a hosted endpoint with JWT auth.
claude mcp add --transport http webcake-landing-mcp https://mcp.toolvn.io.vn/mcp --header 'Authorization: YOUR_AUTHORIZATION'Run in your terminal. Add --scope user to make it available in every project.
Review the command, arguments, and environment values before installing — MCP servers run with your local permissions.
Verified live against the running server on Jun 10, 2026.
get_generation_guideReturns the page-building conventions reference: output shape, the absolute-positioning coordinate system, event vocabulary, and the recommended workflow.Returns the page-building conventions reference: output shape, the absolute-positioning coordinate system, event vocabulary, and the recommended workflow.
No parameters — call it with no arguments.
list_elementsList every supported element type, grouped by category, with a one-line summary and whether it is a container (can hold children).List every supported element type, grouped by category, with a one-line summary and whether it is a container (can hold children).
No parameters — call it with no arguments.
get_elementReturns detailed usage for one element type — or for many in a single call (BATCH MODE): summary, when to use it, key `specials` fields, a SPARSE skeleton node (the exact shape to emit — the server hydrates omitted boilerplate), and (for common types) a filled example. Pass `t...2 paramsReturns detailed usage for one element type — or for many in a single call (BATCH MODE): summary, when to use it, key `specials` fields, a SPARSE skeleton node (the exact shape to emit — the server hydrates omitted boilerplate), and (for common types) a filled example. Pass `t...
typestringtypesarrayget_page_schemaReturns the full JSON Schema (Draft 2020-12) of a Webcake page source object { page: [...], settings: {...} } for structural reference and validation.Returns the full JSON Schema (Draft 2020-12) of a Webcake page source object { page: [...], settings: {...} } for structural reference and validation.
No parameters — call it with no arguments.
new_elementReturns a default element node for a type in the SPARSE authoring shape (fresh id, both breakpoints' seeded styles, seeded specials). Emit elements exactly like this — fill in specials + top/left coordinates; OMIT properties/runtime/empty events/config (the server hydrates the...2 paramsReturns a default element node for a type in the SPARSE authoring shape (fresh id, both breakpoints' seeded styles, seeded specials). Emit elements exactly like this — fill in specials + top/left coordinates; OMIT properties/runtime/empty events/config (the server hydrates the...
namestringtype*stringnew_page_skeletonReturns an empty but complete top-level page source { page:[], popup:[], settings:{...defaults}, options:{...}, cartConfigs:{} } matching the real editor shape.1 paramsReturns an empty but complete top-level page source { page:[], popup:[], settings:{...defaults}, options:{...}, cartConfigs:{} } matching the real editor shape.
mobileOnlybooleanvalidate_pageValidates a page source against the schema + semantic rules (unique ids, dangling event targets, children only on containers, missing field_name, top-level types) plus form-data bindings (duplicate field_name within one form, dangling option-event promoId / connectedSurvey / c...1 paramsValidates a page source against the schema + semantic rules (unique ids, dangling event targets, children only on containers, missing field_name, top-level types) plus form-data bindings (duplicate field_name within one form, dangling option-event promoId / connectedSurvey / c...
pagevaluesearch_imagesSearches Pexels stock photos (see https://www.pexels.com/api/) by short English subject queries. Returns hotlinkable URLs at several sizes (src.large for heroes/banners, src.medium for cards/thumbs), `avg_color` for matching section backgrounds, plus photographer name and attr...8 paramsSearches Pexels stock photos (see https://www.pexels.com/api/) by short English subject queries. Returns hotlinkable URLs at several sizes (src.large for heroes/banners, src.medium for cards/thumbs), `avg_color` for matching section backgrounds, plus photographer name and attr...
pageintegerpickstringbest · allsizestringlarge · medium · smallcolorstringquerystringqueriesarrayper_pageintegerorientationstringlandscape · portrait · squareingest_htmlParses an HTML string into a compact reference AST: title, description, og_image, language, and an array of sections classified by role (header, hero, features, about, form, cta, gallery, testimonials, pricing, faq, footer, unknown) with headings, subheadings, paragraphs, imag...2 paramsParses an HTML string into a compact reference AST: title, description, og_image, language, and an array of sections classified by role (header, hero, features, about, form, cta, gallery, testimonials, pricing, faq, footer, unknown) with headings, subheadings, paragraphs, imag...
html*stringintentstringadapt · cloneingest_urlFetches a public webpage (GET, 10s timeout, 2MB cap) and parses it into the same compact reference AST as ingest_html. Returns a warning when the page appears client-rendered (empty <body>) so the caller can fall back to a screenshot — Claude can analyze a screenshot natively...2 paramsFetches a public webpage (GET, 10s timeout, 2MB cap) and parses it into the same compact reference AST as ingest_html. Returns a warning when the page appears client-rendered (empty <body>) so the caller can fall back to a screenshot — Claude can analyze a screenshot natively...
url*stringintentstringadapt · clonelist_organizationsReturns the account's Webcake organizations (id, name, is_default). The default org (type===1, usually the personal workspace) is where pages normally go. Needs WEBCAKE_API_BASE + WEBCAKE_JWT.Returns the account's Webcake organizations (id, name, is_default). The default org (type===1, usually the personal workspace) is where pages normally go. Needs WEBCAKE_API_BASE + WEBCAKE_JWT.
No parameters — call it with no arguments.
create_pagePersists a page source to the configured Webcake backend: creates a NEW page and saves the source (source-only — opens in the editor where re-saving renders it). Validates first. DEFAULTS to dry_run=true (validates, caches the source as draft_id, returns the HTTP request it WO...5 paramsPersists a page source to the configured Webcake backend: creates a NEW page and saves the source (source-only — opens in the editor where re-saving renders it). Validates first. DEFAULTS to dry_run=true (validates, caches the source as draft_id, returns the HTTP request it WO...
namestringsourcevaluedry_runbooleandraft_idstringorganization_idstring | numberlist_pagesLists the pages owned by the account (id, name, organization_id, updated_at), most-recent first. Needs WEBCAKE_API_BASE + WEBCAKE_JWT.Lists the pages owned by the account (id, name, organization_id, updated_at), most-recent first. Needs WEBCAKE_API_BASE + WEBCAKE_JWT.
No parameters — call it with no arguments.
find_pagesSearches the account's pages by name, domain, and/or page id so you can locate the page to edit, then pass its id to get_page → update_page/add_section. Filters are AND-combined (e.g. name='sale' + domain='shop.com'). Each result includes id, name, organization_id, custom_doma...4 paramsSearches the account's pages by name, domain, and/or page id so you can locate the page to edit, then pass its id to get_page → update_page/add_section. Filters are AND-combined (e.g. name='sale' + domain='shop.com'). Each result includes id, name, organization_id, custom_doma...
namestringlimitintegerdomainstringpage_idstringget_pageFetches an existing page's decoded source tree { page, popup, settings, options, cartConfigs } plus name and organization_id. By DEFAULT the source is COMPACTED: boilerplate every element shares (properties/runtime/empty events+children/per-breakpoint config + factory-default...2 paramsFetches an existing page's decoded source tree { page, popup, settings, options, cartConfigs } plus name and organization_id. By DEFAULT the source is COMPACTED: boilerplate every element shares (properties/runtime/empty events+children/per-breakpoint config + factory-default...
compactbooleanpage_id*stringupdate_pageOverwrites an EXISTING page's source with an edited tree (source-only; re-render in the editor for preview/publish). Validates first. DEFAULTS to dry_run=true (validates, caches the source as draft_id, previews the request, token masked); dry_run=false to actually save. Accept...4 paramsOverwrites an EXISTING page's source with an edited tree (source-only; re-render in the editor for preview/publish). Validates first. DEFAULTS to dry_run=true (validates, caches the source as draft_id, previews the request, token masked); dry_run=false to actually save. Accept...
sourcevaluedry_runbooleanpage_idstringdraft_idstringadd_sectionAppends one or more SECTIONS to an existing page WITHOUT re-sending the whole source — the incremental-build path that avoids large create_page payloads. The backend appends section(s) to the END of `page` server-side and rejects duplicate element ids, so the caller sends only...4 paramsAppends one or more SECTIONS to an existing page WITHOUT re-sending the whole source — the incremental-build path that avoids large create_page payloads. The backend appends section(s) to the END of `page` server-side and rejects duplicate element ids, so the caller sends only...
dry_runbooleanpage_id*stringdraft_idstringsectionsvaluepatch_pageEdits a page by element id WITHOUT re-sending the whole source — the surgical-edit and fix-after-error path. Targets EITHER a live page (page_id) OR a cached draft source (draft_id). Draft sources come from: (a) create_page — failed validation or timed-out network call → patch...4 paramsEdits a page by element id WITHOUT re-sending the whole source — the surgical-edit and fix-after-error path. Targets EITHER a live page (page_id) OR a cached draft source (draft_id). Draft sources come from: (a) create_page — failed validation or timed-out network call → patch...
dry_runbooleanpage_idstringpatchesvaluedraft_idstringpublish_pagePublishes an EXISTING page: saves the stored source as a new version and creates/updates its page_published record (live status), optionally attaching a custom domain/path. NOT needed for the preview link — /preview/<page_id> on the preview host renders the stored source direc...4 paramsPublishes an EXISTING page: saves the stored source as a new version and creates/updates its page_published record (live status), optionally attaching a custom domain/path. NOT needed for the preview link — /preview/<page_id> on the preview host renders the stored source direc...
dry_runbooleanpage_id*stringcustom_pathstringcustom_domainstringWEBCAKE_JWTsecretWebcake backend JWT; required only for the persistence tools (create/update/list pages).
WEBCAKE_ENVWebcake environment preset that fills the API/app/builder base URLs.
WEBCAKE_API_BASEOverride for the Webcake API base URL (takes precedence over WEBCAKE_ENV).
WEBCAKE_ORG_IDDefault Webcake organization id for the persistence tools.
PEXELS_API_KEYsecretOptional Pexels API key for search_images; without one a shared hosted proxy is used.
English · Tiếng Việt
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 — 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.
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.
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 │
└──────────────────────┘ └──────────┘
{ page, popup, settings, options } JSON. validate_page catches off-canvas boxes, dangling CTAs, and missing form fields before anything is saved.| 📚 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).
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.
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).
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:
# 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 <your-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.
…/mcp?jwt= — hosted, nothing to installThe 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=<YOUR_TOKEN>
Two ways to get the link:
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.
✅ 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.
The quick version — only the persistence tools need any of this:
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).WEBCAKE_BUILD_BASE=<url> or send the x-webcake-build-base header per request.publish_page falls back to a legacy source-only save with rendered:false, live:false + a warning — nothing goes live.custom_domain; without one the returned /preview/<page_id> 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.
| Guide | What's inside |
|---|---|
| Connect your IDE / claude.ai | Step-by-step connection for every client (npx & hosted URL), troubleshooting table. |
| Configuration | Env vars, --env presets, browser login, per-request headers, getting a JWT. |
| Tools reference | All 20 tools in detail + the step-by-step workflow + model notes. |
| Usage examples | Three end-to-end walkthroughs: build from a brief, surgical edit, inspect a type. |
| Manual / advanced install | Shell installers, cloned builds, hand-written per-IDE config. |
| Page-element schema | The full element-model reference (+ every special/event). |
20 tools in five groups — full descriptions in 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 | nothing |
| Media | search_images (real Pexels stock photos) · upload_images (re-host external images, data: URIs, or local file paths from the user's machine) | 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.
Build me a WebCake landing page for <brand/offer>. Use the webcake-landing MCP: call
get_generation_guide,new_page_skeleton, thenget_elementfor each element type you use, assemble the{ page, popup, settings, options }JSON,validate_pageuntil zero errors, thencreate_page(dry-run first).
This is a solo, open-source project — every ⭐ genuinely keeps it moving and helps other builders discover it.
Built with ❤️ for the WebCake community. Thanks for being here.
com.mcparmory/google-sheets
domdomegg/google-sheets-mcp
henilcalagiya/google-sheets-mcp
cct15/war-dashboard-data
moooonad/mcp-google-sheets-full
io.github.br0ski777/csv-to-json