get_generation_guide
Get Generation Guide
Returns the page-building conventions reference: output shape, the absolute-positioning coordinate system, event vocabulary, and the recommended workflow.
Takes no parameters.

io.github.vuluu2kPublished by GitHub account vuluu2kv1.7.0Updated Nov 5, 2026
Build, validate, and persist Webcake landing-page source JSON: element schemas plus AI usage hints.
Builds, validates and saves Webcake landing-page source JSON, letting an assistant design pages and publish them to a Webcake account.
Web executable via Streamable HTTP. Remote servers run from the web runtime once configured in a workspace.
Paste this prompt into Claude Code, Codex, Cursor or another agent — or into SourceWeft chat. The agent reads this server's install guide, shows you its publisher, endpoint and sign-in, and adds it to your client once you agree. Keys never go into a command.
Read https://sourceweft.com/mcp/io.github.vuluu2k%2Fwebcake-landing-mcp/install.md and connect the MCP server it describes to my client. Before changing any config, show me its publisher, endpoint and sign-in method and wait for my OK. Never put an API key in a command or in a file I would commit; ask me where it should come from.Add this to your client's mcpServers config. The client completes OAuth sign-in on first connect.
{
"mcpServers": {
"webcake-landing": {
"type": "http",
"url": "https://mcp.toolvn.io.vn/mcp"
}
}
}English · Tiếng Việt
[npm version] [npm downloads] [GitHub stars] [MCP]
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.
{ page, popup, settings, options } JSON. validate_page catches off-canvas boxes, dangling CTAs, and missing form fields before anything is saved.💡 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:
…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).
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:
install asks nothing. It connects to production, opens your browser so you can click Connect, then adds the server
to every AI app it finds on this computer. Your other servers are kept, and any config file it changes is backed up next to
the original as <file>.webcake-landing-backup. No AI app found? It says so and exits with an error: install one and run it again,
or name it with --ide.
Need staging or local? --dev opens the step-by-step wizard, or skip it with --env staging / --env local.
Installed with an older version? Run
installagain. Older versions wrote VS Code's config under the wrong key, so the server never appeared there, and registered Claude Code for the current folder only.
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: --dev, --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:
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:
…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.
23 tools in five groups — full descriptions in docs/tools.md:
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.
Source: README.md at commit e1dbbbc
Get Generation Guide
Returns the page-building conventions reference: output shape, the absolute-positioning coordinate system, event vocabulary, and the recommended workflow.
Takes no parameters.
List Element Types
List every supported element type, grouped by category, with a one-line summary and whether it is a container (can hold children).
Takes no parameters.
Get Element Details
Returns usage details for one element type, or for several via `types: [...]`: a summary, when it applies, key `specials` fields, a sparse skeleton node (the server fills omitted boilerplate), and for common types a filled example. `types` returns { elements: { [type]: details } }; `type` returns a single doc.
typetypesGet Page JSON Schema
Returns the full JSON Schema (Draft 2020-12) of a Webcake page source object { page: [...], settings: {...} } for structural reference and validation.
Takes no parameters.
New Element Node
Returns a default element node for a type in the sparse authoring shape: a fresh id, seeded styles for both breakpoints, and seeded specials. properties, runtime, empty events and per-breakpoint config are omitted because the server fills them from factory defaults on validate and save.
nametyperequiredNew Page Skeleton
Returns an empty, complete top-level page source { page:[], popup:[], settings, options, cartConfigs } in the Webcake editor's shape. desktopWidth (960 or 1200) and mobileWidth (420 or 360) set settings.width_section, the canvas width that all element coordinates are measured in.
mobileOnlymobileWidthdesktopWidthValidate Page Source
Validates a page source against the JSON schema and semantic rules: unique ids, dangling event targets, children only on container types, missing field_name, top-level types, and form-data bindings (duplicate field_name within one form; dangling promoId / connectedSurvey / connectedForm / set_field_value targets). Before validating it applies deterministic layout corrections (off-canvas boxes moved on-canvas, elements below wrapped text moved down) and lists them in auto_fixed. Returns errors (structural problems that block saving) and warnings (visible layout defects such as overlapping text, off-canvas bounds, or empty bands).
pagerequiredCompute Layout Coordinates
Computes on-canvas coordinates (top/left/width/height) for a group of elements on both breakpoints. Modes: 'center' (one box centered on the canvas), 'row' (N boxes in a centered horizontal row on desktop, stacked into one column on mobile), 'grid' (N uniform cells in `cols` columns, stacked on mobile), 'stack' (a vertical list down the content column). Respects the page margins (content column 80–880 on desktop and 20–400 on mobile by default). Returns one box per item in input order, plus `notes` for off-canvas or over-wide inputs. Pure computation: no credentials, no network.
gaptopcolsmoderequiredaligncountitemsrowGapitemWidthmobileTopitemHeightcanvasMobile+4 moreSearch Stock Images
Searches Pexels stock photos (API: https://www.pexels.com/api/documentation/) by short English subject queries. Each photo includes hotlinkable URLs at several sizes, a `sizes` map with each variant's pixel dimensions, `avg_color`, and the photographer's name and attribution URL; the response also includes a `size_guide` mapping slot widths to variants (hero/banner ~940–1880px → large/large2x, card ~350px → medium, avatar → tiny). `queries: [...]` runs several searches in parallel and returns { queries: { [q]: result } } — `pick:'best'` (default) keeps only the top photo per query, `pick:'all'` the full list; `query` runs a single search. Works without configuration through a shared hosted proxy; a PEXELS_API_KEY env var or x-pexels-key header uses a personal Pexels quota.
pagepicksizecolorqueryqueriesper_pageorientationResolve Icon SVGs
Resolves icon-font names into inline SVG markup via the public Iconify API (https://iconify.design/docs/api/). Accepts Material Symbols refs ("ms:verified"), Font Awesome refs ("fa:chart-line"), Iconify ids ("mdi:home"), or bare names (treated as Material Symbols); underscores become hyphens, and Material Symbols resolve to the outlined variant with a filled fallback. These are the same `ms:` / `fa:` refs that ingest results report in block.icon. Returns { icons: { "<ref>": { ok, svg, iconify } } }. In Webcake an icon renders as an SVG mask on a rectangle element: the SVG goes in responsive.desktop.config.svgMask and responsive.mobile.config.svgMask (each breakpoint is read separately), the visible color comes from styles.background (the SVG's own fill is ignored), and the mask is stretched to the box (preserveAspectRatio='none'), so a square box keeps its proportions. No Webcake credentials needed.
iconsrequiredRender Preview Screenshot
Renders a public URL to a PNG screenshot and returns it as an image. `page_id` targets a created page's preview URL (/preview/<id>); `url` targets any public page and takes precedence. full_page (default true) captures the whole scrollable page and `width` sets the viewport; `tiles:true` returns a tall page as several top-to-bottom band images (requires a self-hosted Playwright host via RENDER_SCREENSHOT_BASE, otherwise a single image is returned). Engine: Microlink's free tier by default (API: https://microlink.io/docs/api/getting-started/overview; about 50 requests/day per IP — when rate-limited the result is ok:false with HTTP 429), or a self-hosted screenshot proxy set by RENDER_SCREENSHOT_BASE / x-render-screenshot-base; MICROLINK_API_KEY / x-microlink-key raises the quota. A page published without a custom domain serves its preview for about 10 minutes after the last publish; after that the preview shows 'Preview page is expired'. Docs: https://github.com/vuluu2k/webcake-landing-mcp/blob/main/docs/tools.md
urltileswidthpage_idfull_pageUpload Images to Webcake
Re-hosts images on Webcake's CDN (statics.pancake.vn) and returns a map from each original entry to its hosted URL. Accepts up to 20 entries per call, processed in parallel, up to 200 MB each: http(s) image URLs, data:image/…;base64 URIs, and — only when the server runs locally over stdio — local file paths (absolute, ~/, file://, or Windows drive paths; rejected per entry on the remote HTTP transport). Upload target: with Webcake credentials and a resolved organization, each image is filed into that organization's media collection (the library the Webcake editor's media picker shows) and marked collection:true with its asset_id; without credentials the public CDN endpoint is used (the URL works, but the image is not in any collection: collection:false). Organization resolution: organization_id, then WEBCAKE_ORG_ID / x-webcake-org-id, then automatic selection when the account has exactly one organization; with two or more and none given, the result is ok:false with reason:'organization_required' and the organization list. dry_run defaults to false, because this only adds images to the media library and changes no page data; dry_run:true lists what would be processed without any network or filesystem access.
urlsrequireddry_runin_folderorganization_idIngest HTML Reference
Parses an HTML string into a reference AST for rebuilding the page in Webcake: title, description, og_image, language, and sections classified by role (header, hero, features, about, form, cta, gallery, testimonials, pricing, faq, footer, unknown), each with headings, paragraphs, images, CTAs, links, form fields and a size_hint (desktop section height in px — from CSS when explicit, else estimated). Also returns top colors, fonts, palette and background_images; for Tailwind-CDN pages (e.g. Google Stitch) the palette and `design_tokens` (spacing grid, corner radii, type scale) come from the page's tailwind.config. detail:'compact' (default, ~2–5 KB) or 'full' (up to ~25 KB: per-section blocks such as cards and steps, lists, gradients, images as { src, alt }, and `widgets` — the cleaned HTML + CSS of composite visuals such as device mockups). Fonts: `font_groups` lists self-hosted fonts from @font-face rules in the settings.fontGroups shape; `typography` and per-section `text_styles` give the computed font size (desktop and mobile), weight, family, line height and letter spacing. Absolute-canvas builder exports (LadiPage-family or Webcake-published HTML) are detected and converted deterministically into a complete Webcake page `source`, with `clone_notes` listing approximations and `canvas_summary` summarizing per-section geometry; external images in that source are re-hosted automatically when it is saved. Garbled Vietnamese text (UTF-8 read as Latin-1) is repaired, with a warning. No credentials, no writes.
htmlrequireddetailintentbase_urlsectionsIngest URL Reference
Fetches a public webpage (GET, 10 s timeout, 2 MB cap) together with its external stylesheets and @imports, and parses it into the same reference AST as ingest_html: role-classified sections with size_hint heights, palette, design tokens, self-hosted fonts (`font_groups`), computed typography, images, and — with detail:'full' — per-section blocks, lists and widgets. Absolute-canvas builder exports (LadiPage-family or Webcake-published pages) are detected and converted deterministically into a complete Webcake page `source` with `clone_notes` and `canvas_summary`. JavaScript is not executed, so client-rendered sites (React/Vue/Next.js) may return little content; the result then carries a warning that the body was empty. Fetches are restricted to public hosts (private and link-local addresses are blocked). No credentials, no writes. Docs: https://github.com/vuluu2k/webcake-landing-mcp/blob/main/docs/tools.md
urlrequireddetailintentsectionsList Webcake Organizations
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.
Takes no parameters.
Create Webcake Page
Creates a new page in the user's Webcake account from a page source { page, popup, settings, options, cartConfigs }, saves it, and then publishes it (builds the rendered app on the Webcake build host and publishes it through the editor's publish route) so its preview renders; publish:false skips publishing, and a failed publish does not fail the create (result.publish reports the outcome). Before validating it applies deterministic layout corrections (off-canvas boxes, elements below wrapped text, containers grown to fit) and lists them in auto_fixed. External images and self-hosted font files in the source are re-hosted on Webcake's CDN during the save. dry_run defaults to true: it validates, caches the source under a draft_id, and returns the request it would send with the token masked; dry_run:false performs the create. A draft_id (from a validation failure, dry run, or timed-out create) re-runs from the cached source. Organization: explicit organization_id ('personal' = no organization), then WEBCAKE_ORG_ID / x-webcake-org-id, then automatic — no organizations → personal, exactly one → selected (organization_auto_selected:true), two or more → ok:false with the organization list. A page without a custom domain has a preview link that renders for about 10 minutes after each publish. Requires Webcake credentials.
namesourcedry_runpublishdraft_idorganization_idList Webcake Pages
Lists the pages owned by the account (id, name, organization_id, updated_at), most-recent first. Needs WEBCAKE_API_BASE + WEBCAKE_JWT.
Takes no parameters.
Find Webcake Pages
Searches the account's pages by name, domain and/or page id. Filters are AND-combined; name and domain are case-insensitive substrings, and domain matches custom_domain or default_domain. Each result includes id, name, organization_id, custom_domain, default_domain and updated_at. With no filters it returns the most recently updated pages. Requires Webcake credentials.
namelimitdomainpage_idGet Webcake Page Source
Fetches an existing page's source tree { page, popup, settings, options, cartConfigs } with its name, organization_id and source_version. By default the tree is compacted: boilerplate shared by every element (properties, runtime, empty events/children, per-breakpoint config and factory-default style keys) is stripped, giving the same sparse shape the save tools accept and re-hydrate. compact:false returns the raw stored tree. Requires Webcake credentials.
compactpage_idrequiredUpdate Webcake Page (Overwrite)
Replaces an existing page's stored source with an edited tree (source only; the published build is not refreshed). Validates first. Concurrency check: the save is refused with page_changed_externally when the page was edited elsewhere since it was last read (base_version, or the version the server recorded), or with unverified_overwrite when an unverified save would delete live element ids; force:true overrides. dry_run defaults to true: it validates, caches the source under a draft_id and returns the masked request; dry_run:false saves. A draft_id from a dry run or a failed/timed-out update re-runs from the cached source. Requires Webcake credentials.
forcesourcedry_runpage_iddraft_idbase_versionAppend Section(s) to Webcake Page
Appends one or more section nodes to the end of an existing page's `page` array, server-side: only the new sections are sent, and the backend rejects element ids that already exist on the page. The sections are validated first. dry_run defaults to true: it validates, caches the payload under a draft_id and previews the request; dry_run:false appends. A validation failure also returns a draft_id, which patch_page accepts for element-level fixes. Section-level saves cannot change page settings, so font weights that need new font links are reported in font_weights_notice. Requires Webcake credentials.
dry_runpage_idrequireddraft_idsectionsPatch Webcake Page (by element id)
Edits a page by element id without sending the whole source. The target is either a live page (page_id) or a cached draft (draft_id) returned by a failed or dry-run create_page, add_section or update_page call. Ops: {op:'update', id, type?, specials?, styles?:{desktop?,mobile?}, config?:{desktop?,mobile?}, events?, properties?} shallow-merges fields (op defaults to 'update'; it cannot delete existing keys), {op:'replace', id, element} swaps the node, {op:'remove', id} deletes it, and {op:'add', parent_id, element} appends a child to a container; `element` may be sparse. The server loads the source, applies the ops, validates the whole merged tree (errors block the save) and saves: a live page is updated in place, a create draft becomes a new page, a section draft is appended, and an update draft is re-saved. With a draft_id and no patches, the cached draft is committed as-is (the retry after a timeout). dry_run defaults to true (load, merge, validate, preview; no write); dry_run:false saves. Requires Webcake credentials; a page_id patch reads the live page, so it needs them even on a dry run.
forcedry_runpage_idpatchesdraft_idPublish Webcake Page
Publishes an existing page: builds the rendered app on the Webcake build host (POST <buildBase>/render/build; https://build.webcake.io in production, overridable with WEBCAKE_BUILD_BASE / x-webcake-build-base) and then creates or updates the published record that public serving reads. With custom_domain (already pointed at Webcake) the page is served at that domain; when omitted, the page's currently attached domain is reused; with no domain, or custom_domain:'', only the preview link (<previewBase>/preview/<page_id>) is returned, and it renders for about 10 minutes after the publish. Without a build host, or if the build fails, it falls back to a source-only publish that saves a version but serves nothing, and returns a warning. dry_run defaults to true and makes no network calls; dry_run:false builds and publishes. Requires Webcake credentials.
dry_runpage_idrequiredcustom_pathcustom_domain100% of the applicable checks met
How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.
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 │ └──────────────────────┘ └──────────┘# Opens the browser — click Connect, your installed IDEs are configured (prod)npx -y webcake-landing-mcp install
# Developers only — step by step: environment, login or JWT, org, IDE(s)npx -y webcake-landing-mcp install --dev
# Scripts and CI — every supported IDE, even ones not installed yetnpx -y webcake-landing-mcp install --ide all --jwt <your-jwt>
# Remove the server from every IDE confignpx -y webcake-landing-mcp uninstallhttps://mcp.toolvn.io.vn/mcp?jwt=<YOUR_TOKEN>npx -y webcake-landing-mcp login # opens the browser once, saves the token to ~/.webcake-landing-mcp/auth.json