Webcake Landing — Claude Code MCP server: setup and overview
Gives AI models the WebCake element catalog to construct valid landing page JSON, run layout checks, and save pages directly to your WebCake account.
claude mcp add --transport http webcake-landing-mcp https://mcp.toolvn.io.vn/mcpWhat Webcake Landing does
This tool connects AI coding assistants to the WebCake platform. It exposes a catalog of 40+ element types, covering forms, countdowns, and product displays. The model learns the canvas coordinate system and builds exact page structures without guessing JSON fields.
Before any page reaches your account, validate_page scans for off-canvas blocks, duplicate identifiers, and unlinked buttons. If you already have a layout elsewhere, ingest_html and ingest_url convert that markup into a structural baseline for the AI.
Without setting WEBCAKE_JWT, saving pages directly to an account is impossible: unauthenticated sessions only support schema lookups and page validation. Running the server locally through npx requires Node.js 18+.
What it helps with
- generate full WebCake landing page JSON from plain prompts
- validate canvas coordinates and CTA links before writing changes
- convert external HTML layouts into WebCake page skeletons
- publish finished landing pages to a WebCake workspace
- edit specific visual elements without altering the rest of the canvas
Example prompts for the agent
- Build a landing page for a coffee shop with a signup form and three feature cards.
- Check this layout with validate_page before saving it.
- Turn the layout from this link into a WebCake structure using ingest_url.
How to install Webcake Landing
1Platform CLI: remote server
claude mcp add --transport http webcake-landing-mcp https://mcp.toolvn.io.vn/mcp2Platform CLI
claude mcp add --env WEBCAKE_JWT=<WEBCAKE_JWT> --env WEBCAKE_ENV=<WEBCAKE_ENV> --env WEBCAKE_API_BASE=<WEBCAKE_API_BASE> --env WEBCAKE_ORG_ID=<WEBCAKE_ORG_ID> --env PEXELS_API_KEY=<PEXELS_API_KEY> --transport stdio webcake-landing -- npx -y webcake-landing-mcpReplace <…> with your own values
1Platform CLI: remote server
codex mcp add webcake-landing --url https://mcp.toolvn.io.vn/mcp2Platform CLI
codex mcp add webcake-landing --env WEBCAKE_JWT=<WEBCAKE_JWT> --env WEBCAKE_ENV=<WEBCAKE_ENV> --env WEBCAKE_API_BASE=<WEBCAKE_API_BASE> --env WEBCAKE_ORG_ID=<WEBCAKE_ORG_ID> --env PEXELS_API_KEY=<PEXELS_API_KEY> -- npx -y webcake-landing-mcpReplace <…> with your own values
Config file
{
"mcpServers": {
"webcake-landing": {
"url": "https://mcp.toolvn.io.vn/mcp"
}
}
}{
"mcpServers": {
"webcake-landing": {
"command": "npx",
"args": [
"-y",
"webcake-landing-mcp"
],
"env": {
"WEBCAKE_JWT": "<WEBCAKE_JWT>",
"WEBCAKE_ENV": "<WEBCAKE_ENV>",
"WEBCAKE_API_BASE": "<WEBCAKE_API_BASE>",
"WEBCAKE_ORG_ID": "<WEBCAKE_ORG_ID>",
"PEXELS_API_KEY": "<PEXELS_API_KEY>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"webcake-landing": {
"type": "http",
"url": "https://mcp.toolvn.io.vn/mcp"
}
}
}{
"servers": {
"webcake-landing": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"webcake-landing-mcp"
],
"env": {
"WEBCAKE_JWT": "<WEBCAKE_JWT>",
"WEBCAKE_ENV": "<WEBCAKE_ENV>",
"WEBCAKE_API_BASE": "<WEBCAKE_API_BASE>",
"WEBCAKE_ORG_ID": "<WEBCAKE_ORG_ID>",
"PEXELS_API_KEY": "<PEXELS_API_KEY>"
}
}
}
}Replace <…> with your own values
1Platform CLI: remote server
gemini mcp add -t http webcake-landing https://mcp.toolvn.io.vn/mcp2Platform CLI
gemini mcp add -e WEBCAKE_JWT=<WEBCAKE_JWT> -e WEBCAKE_ENV=<WEBCAKE_ENV> -e WEBCAKE_API_BASE=<WEBCAKE_API_BASE> -e WEBCAKE_ORG_ID=<WEBCAKE_ORG_ID> -e PEXELS_API_KEY=<PEXELS_API_KEY> webcake-landing npx -y webcake-landing-mcpReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Webcake Landing
How do I install Webcake Landing in Claude Code?
Run claude mcp add --transport http webcake-landing https://mcp.toolvn.io.vn/mcp. This links your client to the hosted HTTP endpoint without running local scripts.
What does Webcake Landing do?
It provides WebCake element schemas to AI assistants, validates generated landing page JSON, and deploys pages to your account.
Is an API token required to use Webcake Landing?
Catalog lookups and layout validation run without authentication. The WEBCAKE_JWT token is only required when persisting or publishing pages.
