WebCake Storefront

Name: WebCake Storefront
Author: vuluu2k

โดย vuluu2kรุ่น 1.38.0i★ –iบนเครื่องหรือคลาวด์

ชื่อใน registryio.github.vuluu2k/webcake-storefront-mcp

ติดตั้ง

ภาพรวม

คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)

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

สามเสาของ PopNx MCP

สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน

เสียงผู้ใช้iยังไม่มีรีวิวรีวิวเปิดพร้อมระบบบัญชีในขั้นถัดไป
ผลตรวจเบื้องต้นของเราiผ่าน 3 จาก 3 ข้อตรวจจากข้อมูลที่เปิดอยู่ ยังไม่ได้สแกนโค้ด
การใช้งานiยังไม่ได้วัด★ –

ใช้ทำอะไรได้

ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry

การเชื่อมต่อ: บนเครื่องหรือคลาวด์
ช่องทาง (transport): 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) ในเครื่อง

คุณใช้แอปไหน

ClaudeClaude CodeCursorVS CodeChatGPT

เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”

ที่อยู่นี้ต้องใส่ key ใน header ของคำขอ ซึ่งเมนูเพิ่ม connector ใส่ให้ไม่ได้ ใช้ 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": "ใส่ค่าของคุณ",
        "WEBCAKE_SESSION_ID": "ใส่ค่าของคุณ",
        "WEBCAKE_ENV": "ใส่ค่าของคุณ",
        "PEXELS_API_KEY": "ใส่ค่าของคุณ"
      }
    }
  }
}

พิมพ์คำสั่งนี้ใน Terminal

claude mcp add --transport http webcake-storefront https://store.toolvn.io.vn/mcp --header 'x-webcake-jwt: ใส่ค่าของคุณ' --header 'x-webcake-session-id: ใส่ค่าของคุณ'

หรือรันในเครื่องคุณ

claude mcp add webcake-storefront --env WEBCAKE_TOKEN='ใส่ค่าของคุณ' --env WEBCAKE_SESSION_ID='ใส่ค่าของคุณ' --env WEBCAKE_ENV='ใส่ค่าของคุณ' --env PEXELS_API_KEY='ใส่ค่าของคุณ' -- 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": "ใส่ค่าของคุณ",
        "x-webcake-session-id": "ใส่ค่าของคุณ"
      }
    }
  }
}

หรือรันในเครื่องคุณ

เปิดใน Cursor

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json

{
  "mcpServers": {
    "webcake-storefront": {
      "command": "npx",
      "args": [
        "-y",
        "webcake-storefront-mcp"
      ],
      "env": {
        "WEBCAKE_TOKEN": "ใส่ค่าของคุณ",
        "WEBCAKE_SESSION_ID": "ใส่ค่าของคุณ",
        "WEBCAKE_ENV": "ใส่ค่าของคุณ",
        "PEXELS_API_KEY": "ใส่ค่าของคุณ"
      }
    }
  }
}

เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง

เปิดใน VS Code

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .vscode/mcp.json ของโปรเจกต์

{
  "servers": {
    "webcake-storefront": {
      "type": "http",
      "url": "https://store.toolvn.io.vn/mcp",
      "headers": {
        "x-webcake-jwt": "ใส่ค่าของคุณ",
        "x-webcake-session-id": "ใส่ค่าของคุณ"
      }
    }
  }
}

หรือรันในเครื่องคุณ

เปิดใน VS Code

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .vscode/mcp.json ของโปรเจกต์

{
  "servers": {
    "webcake-storefront": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "webcake-storefront-mcp"
      ],
      "env": {
        "WEBCAKE_TOKEN": "ใส่ค่าของคุณ",
        "WEBCAKE_SESSION_ID": "ใส่ค่าของคุณ",
        "WEBCAKE_ENV": "ใส่ค่าของคุณ",
        "PEXELS_API_KEY": "ใส่ค่าของคุณ"
      }
    }
  }
}

ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี

ค่าที่ต้องใส่เอง

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).

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

ทำอะไรได้บ้าง

server ให้ล็อกอินก่อนจึงจะแสดงรายการเครื่องมือ

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 7 พ.ย. 2569

✓ ผ่าน
ตัวตนผู้ทำตรงกับ repo
ชื่อใน registry ยืนยันด้วยบัญชี GitHub vuluu2k ซึ่งเป็นเจ้าของ repo
… ยังไม่ตรวจ
ยังมีคนดูแล
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
… ยังไม่ตรวจ
มีสัญญาอนุญาต (license)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
✓ ผ่าน
endpoint ตอบ
ตอบกลับใน 1827 ms (HTTP 401)
✓ ผ่าน
ล็อกอินแบบ OAuth
ประกาศวิธีล็อกอินแบบ OAuth ให้โปรแกรม AI พาไปล็อกอินเอง
… ยังไม่ตรวจ
คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง
ยังไม่ได้ตรวจ เราอ่านรายการเครื่องมือตอนตรวจ endpoint

เทียบกับตัวอื่นในหมวด ร้านค้าออนไลน์และรับเงินi

ดาวมากกว่า 0% ของอีก 1751 ตัวในหมวดนี้
ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 89% ของอีก 1751 ตัวในหมวดนี้
ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 100% ของอีก 1751 ตัวในหมวดนี้

เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo

คำถามที่พบบ่อย

WebCake Storefront ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 3 จาก 3 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น

ต้องใช้กุญแจหรือรหัสอะไรบ้าง?

ต้องใส่ค่าเหล่านี้: WEBCAKE_TOKEN, WEBCAKE_SESSION_ID, PEXELS_API_KEY, x-webcake-jwt, x-webcake-session-id

ตัวนี้รันบนเครื่องหรือบนคลาวด์?

ได้ทั้งสองแบบ จะลงในเครื่องหรือต่อผ่านคลาวด์ก็ได้

ยังมีคนดูแลอยู่ไหม?

repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (1.38.0) เข้า registry เมื่อวานซืน

ใช้กับโปรแกรมไหนได้บ้าง?

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต่อผ่าน URL จึงใช้กับโปรแกรมที่รับ remote MCP ได้ เช่น ChatGPT ที่เปิดโหมดนักพัฒนา

มีตัวไหนใช้แทนได้บ้าง?

ในหมวดเดียวกันมี Spree Commerce: open-source B2B and marketplace ecommerce, Stripe MCP, MCP Cn Commerce

ตัวที่ใช้แทนได้

server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว

อ่านการ์ด:★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi

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-Clauseอัปเดต 7 วันที่ผ่านมา

ติดตั้ง

Stripe MCP

โดย stripe

server ทางการของ Stripe ให้ AI ดูและจัดการลูกค้า สินค้า การชำระเงิน และใบแจ้งหนี้ ต่อผ่านคลาวด์ของ Stripe และล็อกอินแบบ OAuth

รันบนคลาวด์★ 2,043MITอัปเดต 12 เดือนที่ผ่านมา

ติดตั้ง

MCP Cn Commerce

โดย TonyWang-hub

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

รันบนเครื่อง★ 96MITอัปเดต 28 วันที่ผ่านมา

ติดตั้ง

README จากผู้ทำ

เปิดอ่าน README

ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ 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

ตัดมาแค่ช่วงต้น อ่านต่อใน repo

WebCake Storefront

ภาพรวม

สามเสาของ PopNx MCP

ใช้ทำอะไรได้

ติดตั้ง

ก่อนติดตั้ง

หรือรันในเครื่องคุณ

หรือรันในเครื่องคุณ

หรือรันในเครื่องคุณ

หรือรันในเครื่องคุณ

ค่าที่ต้องใส่เอง

ทำอะไรได้บ้าง

ผลตรวจเบื้องต้นi

ตัวตนผู้ทำตรงกับ repo

ยังมีคนดูแล

มีสัญญาอนุญาต (license)

endpoint ตอบ

ล็อกอินแบบ 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)