Next Devtools MCP vs Webcake Landing

A side-by-side look at the Next Devtools MCP and Webcake Landing MCP servers: transport, auth, tools, quality signals, and the config to install either one in Claude, Cursor, Windsurf or VS Code.

Next Devtools MCP logoNext Devtools MCPDeveloper Tools · Local subprocess (stdio)Official Next.js MCP server for coding agents. Provides runtime diagnostics, route inspection, dev server logs, docs search, and upgrade guides. Requires Next.js 16+ dev server for full runtime features.86ExcellentAuth: no auth requiredWebcake Landing logoWebcake LandingDeveloper Tools · Local subprocess (stdio)Build, validate, and persist Webcake landing-page source JSON: element schemas plus AI usage hints.65GreatAuth: not declared

Verdict: choose Next Devtools MCP for developer tools work as a local process; choose Webcake Landing for developer tools as a local process. You can also run both side by side in one mcpServers block.

Which MCP server should you choose?

Next Devtools MCP logoChoose Next Devtools MCP when

  • You need dedicated capabilities in the Developer Tools domain.
  • You prefer a local stdio subprocess transport.
  • Its auth model fits you: No auth required.
  • You want tools like nextjs_index, nextjs_call, nextjs_docs.
Explore Next Devtools MCP

Webcake Landing logoChoose Webcake Landing when

  • You need dedicated capabilities in the Developer Tools domain.
  • You prefer a local stdio subprocess transport.
  • You want tools like get_generation_guide, list_elements, get_element.
Explore Webcake Landing

Feature & specification comparison

Rows where the two servers differ are marked.

SpecNext Devtools MCP logoNext Devtools MCPWebcake Landing logoWebcake Landing
CategoryDeveloper ToolsDeveloper Tools
Quality signal86/100 · Excellent65/100 · Great
Install commandConfirmedConfirmed
TransportLocal subprocess (stdio)Local subprocess (stdio)
AuthNo auth requiredNot declared
PricingFreeNot declared
Required env varsNone listedNone listed
Verified owner VerifiedCommunity listing
GitHub stars8327
Directory activity 9 views 0 installs 1 upvotes 0 views 0 installs 0 upvotes
Tools423

Tools & capabilities

Next Devtools MCP tools 4

  • nextjs_indexDiscover running Next.js dev servers and list each one's runtime MCP tools.
  • nextjs_callCall a runtime tool on a discovered server (errors, routes, logs, Server Actions).
  • nextjs_docsGateway.** Point the agent at version-accurate docs in `node_modules/next/dist/docs/`.
  • browser_evalGateway.** Point the agent at the [`agent-browser`](https://github.com/vercel-labs/agent-browser) CLI for browser automation.

Webcake Landing tools 23

  • get_generation_guideReturns the page-building conventions reference: output shape, the absolute-positioning coordinate system, event vocabulary, and the recommended workflow.
  • list_elementsList every supported element type, grouped by category, with a one-line summary and whether it is a container (can hold children).
  • get_elementReturns 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.
  • get_page_schemaReturns the full JSON Schema (Draft 2020-12) of a Webcake page source object { page: [...], settings: {...} } for structural reference and validation.
  • new_elementReturns 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.
  • new_page_skeletonReturns 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.
  • validate_pageValidates 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).
  • layoutComputes 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.
  • search_imagesSearches 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.
  • get_icon_svgResolves 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.
  • render_previewRenders 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
  • upload_imagesRe-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.
  • +11 more on the listing page

Ready-to-paste client configs

Paste either block (or both) into your client config, e.g. claude_desktop_config.json or ~/.cursor/mcp.json. We only show a config when the install command is confirmed.

Next Devtools MCP

mcpServers (Claude Desktop / Cursor)
{
  "mcpServers": {
    "vercel-next-devtools-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "next-devtools-mcp@latest"
      ]
    }
  }
}

Webcake Landing

mcpServers (Claude Desktop / Cursor)
{
  "mcpServers": {
    "webcake-landing": {
      "command": "npx",
      "args": [
        "-y",
        "webcake-landing-mcp"
      ]
    }
  }
}

Frequently asked questions

Next Devtools MCP is categorized under Developer Tools and uses a local stdio subprocess. Webcake Landing belongs to Developer Tools and uses a local stdio subprocess. Pick Next Devtools MCP for developer tools work and Webcake Landing for developer tools.

Copy the mcpServers block from the config section on this page into your client's config (for example claude_desktop_config.json or ~/.cursor/mcp.json), then fully restart the client.

Next Devtools MCP is listed as free. Auth: no auth required. Webcake Landing has no declared pricing — check the project's own site. If a server needs environment variables such as API keys, define them under the env key in your client's MCP config.

Yes. MCP clients support multiple servers: add vercel-next-devtools-mcp and webcake-landing as separate keys in the same mcpServers object, and your assistant will call tools from either one.

On AllMCPs, Next Devtools MCP has a quality signal of 86/100 (Excellent) with 9 views, 0 installs and 832 GitHub stars. Webcake Landing has 65/100 (Great) with 0 views, 0 installs and 7 GitHub stars.