WebCake Storefront

Name: WebCake Storefront
Author: vuluu2k

作者：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の3つの柱

この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。

利用者の声iレビューはまだありませんレビューは今後のステップで、アカウント機能と一緒に始まります
私たちの基本チェックi3項目中3項目に合格公開情報からチェック。コードはまだスキャンしていません
利用状況i未計測★ –

できること

このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。

接続方法: パソコンでもクラウドでも
トランスポート: 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

「秘密」と表示された値は、あなたのアカウントの鍵です。絶対に人に教えたり、チャットに貼り付けたりしないでください。

必要なもの

クラウドで動くインストール不要。インターネット経由でつながります
npmNode.jsのインストール（npxコマンドに必要）

どのアプリを使っていますか？

ClaudeClaude CodeCursorVS CodeChatGPT

上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。

このアドレスはリクエストの 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"
      }
    }
  }
}

選んだアプリは、この端末の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

このカテゴリのほかの1754件のうち0%よりスターが多い
このカテゴリのほかの1754件のうち89%より最近レジストリに公開
基本チェックの結果が、このカテゴリのほかの1754件のうち100%と同じかそれ以上

レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。

よくある質問

WebCake Storefrontは安全ですか？

当てはまる基本チェック3項目のうち3項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。

どんなキーやコードが必要ですか？

入力が必要なもの：WEBCAKE_TOKEN, WEBCAKE_SESSION_ID, PEXELS_API_KEY, x-webcake-jwt, x-webcake-session-id

パソコンで動きますか、それともクラウドですか？

どちらでも使えます。パソコンにインストールしても、クラウド版につないでもかまいません。

今もメンテナンスされていますか？

GitHubリポジトリの最終更新は–、最新バージョン（1.38.0）がレジストリに届いたのは一昨日です。

どのアプリで使えますか？

Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。URLでつながるので、リモートMCPサーバーに対応したアプリ（開発者モードのChatGPTなど）でも使えます。

代わりに使えるものは？

同じカテゴリには：Spree Commerce: open-source B2B and marketplace ecommerce, Stripe MCP, MCP Cn Commerce

代わりの候補

同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。

カードの見方：★ GitHubスターi3つの柱：レビュー · チェック · 利用状況i更新＝最新バージョンをレジストリに公開した日i

Spree Commerce: open-source B2B and marketplace ecommerce

作者：spree

Open-source B2B and marketplace ecommerce; new stores include an MCP server for AI agents.

クラウドで動く★ 15,812BSD-3-Clause7 日前更新

インストール

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│ └───────────────────────┘ └──────────┘

You ask in plain language — goal, brand, sections, products, form fields.
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.
It assembles + validates the { sections: [...] } page source. validate_page catches duplicate ids, broken grids, and form fields without a name before anything is saved.
It saves to your site — dry-run preview first, then for real — and publish_site makes it live.
You get the preview URL — open it, tweak in the editor, done.

Why it's reliable


📚 Knows the real model	Serves 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 saving	Structural checks (unique ids, valid grid, form fields with names, working event targets) so the page isn't broken when it lands.
🛡️ Safe by default	Every write is dry-run first — preview the change, nothing touches your site until you confirm.
✏️ Edits surgically	Ask 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.

Method	Best for	Auth
npx (local) — runs on your machine	Personal daily use, full control	browser `login`, or a token + session
Remote (`serve`) — self-host Streamable-HTTP	Teams, 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_ENV`	api	app (login)	preview
`local`	`http://localhost:24679`	`http://localhost:5173`	`demo.localhost:24679/`
`staging`	`https://api.staging.storecake.io`	`https://staging.webcake.io`	`staging2.webcake.me/`
`prod` (default)	`https://api.storefront.webcake.io`	`https://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

Open the WebCake builder and log in.
Open DevTools (F12) → Network tab → click any API request.
In Request Headers: Authorization: Bearer … → WEBCAKE_TOKEN; x-session-id: … → WEBCAKE_SESSION_ID.
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.

Group	Tools	Needs
Build a page	`get_build_guide` · `list_elements` · `get_element` · `new_element` · `new_section` · `new_page_skeleton` · `validate_page` · `build_page` · `add_section`	catalog tools: nothing
Media & ingest	`search_images` (Pexels) · `upload_images` (CDN) · `ingest_html` · `ingest_url` (recreate a reference page)	—
Pages & code	`list_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_site`	token + session
Commerce	products · orders · collections · promotions · combos	token + session
Content & store	blog articles · themes / site style · apps · customers · `send_mail`	token + session
Backend code	HTTP-function CRUD (`get_http_function`, `edit_http_function`, `run_function`, `debug_function`…)	token + session
Context	`get_current_context` · `list_my_sites` · `switch_site` · `update_auth` · `toggle_confirm_mode`	token
Site plans	`get_site_subscription` (current plan, status, days left) · `count_my_sites` (by plan / custom domain / trash) · `list_plans`	token

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

冒頭だけを表示しています。続きはリポジトリで読めます

WebCake Storefront

概要

PopNx MCPの3つの柱

できること

インストール

インストールの前に

または、パソコンで動かす

または、パソコンで動かす

または、パソコンで動かす

または、パソコンで動かす

自分で入力する値

できること

基本チェックi

作者とリポジトリが一致

今もメンテナンスされている

ライセンスがある

エンドポイントが応答する

OAuthでサインイン

ツールの説明に隠れた指示がない

ネットショップ・決済のほかのサーバーとの比較i

よくある質問

代わりの候補

Spree Commerce: open-source B2B and marketplace ecommerce

Stripe MCP

MCP Cn Commerce

作者のREADME

🧩 How it works

Why it's reliable

✨ What you can build

Under the hood

🚀 Get connected

① npx — runs on your machine (recommended)

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

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

Remove the server from every IDE config

② Reconnect your account — no token copy/paste

Remote URL — self-hosted, nothing per-client to install

⚙️ Configuration

🧰 The tools at a glance

💬 Suggested prompt

⭐ Like the idea? Drop a star

① `npx` — runs on your machine (recommended)