原型 · 预览版：收录官方注册中心里的全部服务器，每 30 分钟同步一次。评价和账户功能将在后续阶段推出。
PopNx MCP为使用 AI 的人准备的 MCP 服务器 · 用大白话讲清楚
新手模式 关
配色跟随系统浅色深色
语言ไทยEnglish中文日本語한국어EspañolDeutsch
☰ 菜单设置
新手模式 关
配色跟随系统浅色深色
语言ไทยEnglish中文日本語한국어EspañolDeutsch

WebCake Storefront

作者：vuluu2k版本 1.38.0i★ –i电脑或云端
注册名称io.github.vuluu2k/webcake-storefront-mcp

安装

概览

作者提供的说明（英文原文）

Build pages and manage products, orders, and content on the WebCake/StoreCake storefront builder.

PopNx MCP 的三大支柱

这三项永远不会合并成一个分数：意见、测量和人气是不同的东西。

它能帮你做什么

我们还没有为它写通俗的介绍。下面是我们从注册中心读取到的事实。

  • 连接方式: 电脑或云端
  • 传输方式: stdio, Streamable HTTP
  • 分类: 网店与支付
  • 你需要填写：WEBCAKE_TOKEN, WEBCAKE_SESSION_ID, PEXELS_API_KEY, x-webcake-jwt, x-webcake-session-id

安装

选择你使用的 AI 应用，然后复制设置。

安装之前

  • 基础检查：3 项中通过 3 项
  • 在作者的服务器上运行：你向它提出的内容会经过他们的服务器。
  • 需要你自己填写： WEBCAKE_TOKEN, WEBCAKE_SESSION_ID, WEBCAKE_ENV, PEXELS_API_KEY, x-webcake-jwt, x-webcake-session-id

标为机密的值是你账户的钥匙。千万不要分享给别人，也不要粘贴到聊天里。

你需要

  • 在云端运行无需安装任何东西，通过互联网连接
  • npm已安装 Node.js（用于 npx 命令）

你用的是哪个应用？

在上方选择你的应用。我们会记住它，下次按钮会显示“安装到 …”。

这个地址需要在请求的 header 中放入密钥，而添加连接器的菜单无法设置。请改用 Claude Code、Cursor 或 VS Code。

或者在你的电脑上运行

打开 Claude Desktop → Settings → Developer → Edit Config，把下面的内容粘贴到 claude_desktop_config.json

{
  "mcpServers": {
    "webcake-storefront": {
      "command": "npx",
      "args": [
        "-y",
        "webcake-storefront-mcp"
      ],
      "env": {
        "WEBCAKE_TOKEN": "your-value",
        "WEBCAKE_SESSION_ID": "your-value",
        "WEBCAKE_ENV": "your-value",
        "PEXELS_API_KEY": "your-value"
      }
    }
  }
}

在终端中运行这条命令

claude mcp add --transport http webcake-storefront https://store.toolvn.io.vn/mcp --header 'x-webcake-jwt: your-value' --header 'x-webcake-session-id: your-value'

或者在你的电脑上运行

claude mcp add webcake-storefront --env WEBCAKE_TOKEN=your-value --env WEBCAKE_SESSION_ID=your-value --env WEBCAKE_ENV=your-value --env PEXELS_API_KEY=your-value -- npx -y webcake-storefront-mcp

运行前请先填写空着的值。

在 Cursor 中打开

或者自己复制设置

粘贴到项目中的 .cursor/mcp.json，或 ~/.cursor/mcp.json

{
  "mcpServers": {
    "webcake-storefront": {
      "url": "https://store.toolvn.io.vn/mcp",
      "headers": {
        "x-webcake-jwt": "your-value",
        "x-webcake-session-id": "your-value"
      }
    }
  }
}

或者在你的电脑上运行

在 Cursor 中打开

或者自己复制设置

粘贴到项目中的 .cursor/mcp.json，或 ~/.cursor/mcp.json

{
  "mcpServers": {
    "webcake-storefront": {
      "command": "npx",
      "args": [
        "-y",
        "webcake-storefront-mcp"
      ],
      "env": {
        "WEBCAKE_TOKEN": "your-value",
        "WEBCAKE_SESSION_ID": "your-value",
        "WEBCAKE_ENV": "your-value",
        "PEXELS_API_KEY": "your-value"
      }
    }
  }
}

浏览器会先询问是否打开应用，然后应用会显示设置并请你确认。密钥的值会留空，由你自己填写。

在 VS Code 中打开

或者自己复制设置

粘贴到项目中的 .vscode/mcp.json

{
  "servers": {
    "webcake-storefront": {
      "type": "http",
      "url": "https://store.toolvn.io.vn/mcp",
      "headers": {
        "x-webcake-jwt": "your-value",
        "x-webcake-session-id": "your-value"
      }
    }
  }
}

或者在你的电脑上运行

在 VS Code 中打开

或者自己复制设置

粘贴到项目中的 .vscode/mcp.json

{
  "servers": {
    "webcake-storefront": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "webcake-storefront-mcp"
      ],
      "env": {
        "WEBCAKE_TOKEN": "your-value",
        "WEBCAKE_SESSION_ID": "your-value",
        "WEBCAKE_ENV": "your-value",
        "PEXELS_API_KEY": "your-value"
      }
    }
  }
}

浏览器会先询问是否打开应用，然后应用会显示设置并请你确认。密钥的值会留空，由你自己填写。

这个地址需要在请求的 header 中放入密钥，而添加连接器的菜单无法设置。请改用 Claude Code、Cursor 或 VS Code。

你的选择通过 Cookie 保存在这台设备上，无需账户。

需要你填写的值

  • WEBCAKE_TOKEN 机密 env
    Storefront JWT Bearer token (the builder's `jwt` cookie / store_jwt).
  • WEBCAKE_SESSION_ID 机密 env
    Session id sent as the x-session-id header (the builder's `wsid` cookie).
  • WEBCAKE_ENV env
    Named environment preset that fills the API + app base URLs (default prod).
  • PEXELS_API_KEY 机密 env
    Optional Pexels API key for the search_images tool.
  • x-webcake-jwt 机密 HTTP header
    Storefront Bearer JWT (or authenticate via the OAuth flow / ?jwt= link).
  • x-webcake-session-id 机密 HTTP header
    Session id (the builder's wsid).

这些设置是根据作者在注册中心的条目生成的。如果 README 的写法不同，请以 README 为准。

它能做什么

服务器要求先登录，才会列出它的工具。

基础检查i

我们检查的是任何人都能看到的信息；我们没有阅读代码。不适用的检查项不计入总数。 · 检查于 2026年11月7日

  • ✓ 通过

    作者与仓库一致

    注册名称已通过 GitHub 账户 vuluu2k 验证，该账户拥有此仓库

  • … 尚未检查

    仍在维护

    我们还没有从 GitHub 读取这个仓库

  • … 尚未检查

    有许可证

    我们还没有从 GitHub 读取这个仓库

  • ✓ 通过

    端点有响应

    在 1827 毫秒内响应（HTTP 401）

  • ✓ 通过

    使用 OAuth 登录

    声明支持 OAuth 登录，你的 AI 应用可以带你去登录

  • … 尚未检查

    工具描述中没有隐藏指令

    尚未检查；我们会在检查端点时读取工具列表

与“网店与支付”中的其他服务器比较i

  • 星标数多于此分类中其他 1755 个服务器的 0%
  • 发布到注册中心的时间比此分类中其他 1755 个服务器的 89% 更新
  • 基础检查结果等于或优于此分类中其他 1755 个服务器的 100%

与注册中心里这个分类中所有活跃的服务器比较。只有当发布者拥有该仓库时，星标数才计入。

常见问题

WebCake Storefront 安全吗？

它在 3 项适用的基础检查中通过了 3 项。我们没有阅读代码。在添加密钥或令牌之前，请先看看这个服务器要求哪些权限，并使用只具备所需权限的密钥。

它需要哪些密钥或代码？

你需要填写：WEBCAKE_TOKEN, WEBCAKE_SESSION_ID, PEXELS_API_KEY, x-webcake-jwt, x-webcake-session-id

它在我的电脑上运行还是在云端？

两种方式都可以：安装在你的电脑上，或者连接云端版本。

它还在维护吗？

GitHub 仓库最后更新于–，最新版本（1.38.0）于前天进入注册中心。

哪些应用可以使用它？

支持 MCP 的应用，例如 Claude Desktop、Claude Code、Cursor 和 VS Code。它通过 URL 连接，所以接受远程 MCP 服务器的应用也可以使用，例如开启开发者模式的 ChatGPT。

有什么可以替代它？

同一分类中有：Spree Commerce: open-source B2B and marketplace ecommerce, Stripe MCP, MCP Cn Commerce

替代选择

同一分类中其他作者的服务器，按星标数排序。

如何看卡片：★ GitHub 星标i三大支柱：评价 · 检查 · 使用情况i更新 = 最新版本发布到注册中心的时间i

Stripe MCP

作者：stripe

MCP server integrating with Stripe - tools for customers, products, payments, and more.

在云端运行★ 2,043MIT12个月前更新
安装

MCP Cn Commerce

作者：TonyWang-hub

8 read-only MCP platform entries; support is operation-specific; merchant live acceptance pending

在你的电脑上运行★ 96MIT28天前更新
安装

作者的 README

打开 README

按原文从作者的仓库复制。PopNx MCP 没有审查或背书其内容。HTML、图片和脚本已被移除。链接会离开本站。

WebCake Storefront MCP

English · Tiếng Việt

Describe a store page in plain words — your AI builds it, validates it, and publishes it to your WebCake storefront.

⭐ If this saves you an afternoon of dragging blocks around, [give it a star](https://github.com/vuluu2k/webcake-storefront-mcp) — every star keeps a solo project alive.

*"Build a page for my coffee shop — a hero with a Shop Now button, a product grid, and an order form. Save it and publish."*

…and a real, editable page appears on your WebCake/StoreCake site. No dragging blocks, no learning the schema, no hand-writing JSON.

🧩 How it works

This server is the bridge between your AI assistant and your storefront. The AI never *guesses* what a page looks like — it asks this MCP, which knows the entire BuilderX component model, validates the result, and saves it.

   You              AI assistant          webcake-storefront MCP          WebCake / StoreCake

┌──────┐ prompt ┌────────────┐ tools ┌───────────────────────┐ API ┌──────────┐ │ idea │ ───────► │ Claude / │ ─────► │ • knows the BuilderX │ ───► │ a real │ │ │ │ Cursor / │ │ component model │ │ editable │ │ │ ◄─────── │ Windsurf │ ◄───── │ • builds + validates │ ◄─── │ page on │ └──────┘ live URL └────────────┘ result │ • saves + publishes │ │ your site│ └───────────────────────┘ └──────────┘

  1. You ask in plain language — goal, brand, sections, products, form fields.
  2. The AI learns the model from the MCP: the element catalog, the CSS-grid layout, the breakpoints — so it builds a *real* storefront page, not a guess.
  3. It assembles + validates the { sections: [...] } page source. validate_page catches duplicate ids, broken grids, and form fields without a name before anything is saved.
  4. It saves to your site — dry-run preview first, then for real — and publish_site makes it live.
  5. You get the preview URL — open it, tweak in the editor, done.
Why it's reliable
📚 Knows the real modelServes 130+ BuilderX component types (text, image, button, form, product grid, cart, countdown, gallery…) ported straight from the builder's own factory — the exact same shapes the editor produces.
✅ Validates before savingStructural checks (unique ids, valid grid, form fields with names, working event targets) so the page isn't broken when it lands.
🛡️ Safe by defaultEvery write is dry-run first — preview the change, nothing touches your site until you confirm.
✏️ Edits surgicallyAsk for one change ("make the CTA green") and it edits *only* that element — every other id, style, and block stays exactly as it was.

💡 Selling COD or online? It speaks the full commerce model too — products, variations, cart, orders, promotions, combos.

✨ What you can build

One sentence to your AI → a finished, editable storefront page:

Just say…
🛒 Product page*"A one-product page for my skincare serum — gallery, price, an order form with cart."*
🏬 Storefront home*"A homepage — hero banner, featured product grid, a newsletter form."*
⚡ Flash sale*"A flash-sale page — big countdown, discounted product grid, a sticky Buy button."*
🎟️ Event / webinar*"A registration page — countdown, agenda, a sign-up form."*
💌 Invitation*"A wedding invite — names, date, a map, an RSVP form."*
📰 Blog / content*"A blog index with featured posts and a subscribe box."*
🔗 Link-in-bio*"A link-in-bio — avatar, short bio, 5 link buttons, socials."*

…then "make the CTA green" or "add a 4th feature" and it edits *only* that block.

🤖 Works in Claude Desktop, Claude Code, Cursor, Windsurf, VS Code, or any MCP-capable client — and the build guide + element catalog tools need zero backend calls, so you can explore the model before pasting a token.

Under the hood

An MCP (Model Context Protocol) server that teaches AI agents the WebCake/StoreCake storefront builder (BuilderX) component model and connects them to the backend. The AI produces the full { sections: [...] } page source; build_page creates the page and saves it, and publish_site makes the whole site live.

Beyond page authoring, it exposes your real store: pages & custom code, products, orders, collections, blog articles, promotions, combos, themes, customers, and automation — ~280 tools in total.

MethodBest forAuth
npx (local) — runs on your machinePersonal daily use, full controlbrowser login, or a token + session
Remote (`serve`) — self-host Streamable-HTTPTeams, the claude.ai dialog, always-on?jwt= link / x-webcake-jwt header

The build + catalog tools (get_build_guide, list_elements, get_element, new_section, validate_page) work with zero config; everything that reads or writes your site needs a token + session.

🚀 Get connected

Pick one. Both hand your AI tool the full storefront toolkit. No coding.

① npx — runs on your machine (recommended)

Zero install, always the latest version, needs Node.js 18+. One line connects your account and configures your AI apps:

# Opens the browser — click Connect, your installed IDEs are configured (prod)

npx -y webcake-storefront-mcp install

Developers only — step by step: environment, login or token, IDE(s)

npx -y webcake-storefront-mcp install --dev

Scripts and CI — every supported IDE, even ones not installed yet

npx -y webcake-storefront-mcp install --ide all --token --session

Remove the server from every IDE config

npx -y webcake-storefront-mcp uninstall

`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 .webcake-storefront-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 install again. 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.

Targets for --ide: claude-desktop, claude-code, cursor, windsurf, vscode, codex, antigravity, gemini, cline, kiro, opencode, or all. Just want to run the server (configure by hand)? npx -y webcake-storefront-mcp.

② Reconnect your account — no token copy/paste
npx -y webcake-storefront-mcp login

install already does this the first time. Use login when your token expires: it opens the builder's connect page, you click *Connect*, and your token + session are saved locally and picked up automatically.

Remote URL — self-hosted, nothing per-client to install
npx -y webcake-storefront-mcp serve --port 8787

Then point any client at http:// :8787/mcp?jwt= (clients that support headers can send x-webcake-jwt instead; pick the site in chat with switch_site). Server-side secrets like PEXELS_API_KEY live on the host — handy on a VPS.

⚠️ A ?jwt= link contains your personal token — treat it like a password and use HTTPS in production.

⚙️ Configuration

Two values are required: `WEBCAKE_TOKEN` (Bearer JWT) and `WEBCAKE_SESSION_ID` (sent as x-session-id). You pick the site at runtime — just ask in chat and the AI calls list_my_sites / switch_site (your choice is saved and reused next session), so no WEBCAKE_SITE_ID is needed.

Base URLs come from a named environment — set WEBCAKE_ENV (or --env) and you never type a URL:

WEBCAKE_ENVapiapp (login)preview
localhttp://localhost:24679http://localhost:5173demo.localhost:24679/
staginghttps://api.staging.storecake.iohttps://staging.webcake.iostaging2.webcake.me/
`prod` (default)https://api.storefront.webcake.iohttps://webcake.io .webcake.me

Override a preset with WEBCAKE_API_URL / WEBCAKE_APP_URL. Optional, configured server-side: PEXELS_API_KEY (search_images). Token / session / site can also be set in chat via update_auth and switch_site — saved to a local config file at ~/.webcake-storefront-mcp/.

How to get your token + session

  1. Open the WebCake builder and log in.
  2. Open DevTools (F12) → Network tab → click any API request.
  3. In Request Headers: Authorization: Bearer … → WEBCAKE_TOKEN; x-session-id: … → WEBCAKE_SESSION_ID.
  4. No site id needed up front — in chat, run list_my_sites then switch_site to choose the site (remembered next time).

🧰 The tools at a glance

~280 tools. The headline group builds pages; the rest read and edit your live store.

GroupToolsNeeds
Build a pageget_build_guide · list_elements · get_element · new_element · new_section · new_page_skeleton · validate_page · build_page · add_sectioncatalog tools: nothing
Media & ingestsearch_images (Pexels) · upload_images (CDN) · ingest_html · ingest_url (recreate a reference page)—
Pages & codelist_pages · get_page_source · search_page_elements · get_page_element · update_page_element(s) · create_page · update_page · update_page_source · custom CSS/JS · page contents · global sections · publish_sitetoken + session
Commerceproducts · orders · collections · promotions · combostoken + session
Content & storeblog articles · themes / site style · apps · customers · send_mailtoken + session
Backend codeHTTP-function CRUD (get_http_function, edit_http_function, run_function, debug_function…)token + session
Contextget_current_context · list_my_sites · switch_site · update_auth · toggle_confirm_modetoken
Site plansget_site_subscription (current plan, status, days left) · count_my_sites (by plan / custom domain / trash) · list_planstoken

Every write defaults to `dry_run=true` — it previews the exact change and only touches your site when you re-run with dry_run=false.

💬 Suggested prompt

Build me a WebCake storefront page for <brand/offer>. Use the webcake-storefront MCP:

call get_build_guide, list_elements, build the sections with new_section,

validate_page until zero errors, then build_page (dry-run first) and publish_site.

⭐ Like the idea? Drop a star

This is a solo, open-source project — every ⭐ genuinely keeps it moving and helps other builders find it.

  • ⭐ [Star the repo](https://github.com/vuluu2k/webcake-storefront-mcp) — 2 seconds, huge motivation

只显示了开头部分；其余内容请在仓库中阅读

问 PopNx