WebCake Storefront

WebCake Storefront MCP

英語 · ベトナム語

ストアページの内容を平易な言葉で説明するだけで、AI がページを作成し、検証して、WebCake のストアフロントに公開します。

⭐ ブロックをドラッグして配置する手間が午後いっぱい分省けたなら、スターを付けてください — ひとつひとつのスターが、個人プロジェクトの支えになります。

「コーヒーショップのページを作ってください。［今すぐ購入］ボタン付きのヒーロー、商品グリッド、注文フォームを入れて、保存して公開してください。」

…すると、WebCake/StoreCake サイトに本物の編集可能なページが表示されます。ブロックのドラッグも、スキーマの学習も、JSON の手書きも必要ありません。

---

🧩 仕組み

このサーバーは、AI アシスタントとストアフロントをつなぐ橋渡し役です。AI がページの見た目を推測することはありません。この MCP に問い合わせることで、BuilderX のコンポーネントモデル全体を把握し、結果を検証して保存します。

   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. 自然な言葉で依頼します — 目的、ブランド、セクション、商品、フォームのフィールドを伝えます。
2. AI がモデルを学習します — MCP から要素カタログ、CSS グリッドレイアウト、ブレークポイントを取得するため、推測ではなく、本物のストアフロントページを作成できます。
3. ページソースを組み立てて検証します — { sections: [...] } 形式のページソースを作成します。validate_page は、保存前に重複 ID、壊れたグリッド、名前のないフォームフィールドを検出します。
4. サイトに保存します — まずドライランでプレビューしてから実際に保存し、publish_site で公開します。
5. プレビュー URL を受け取ります — URL を開いて、エディターで調整すれば完了です。

信頼性が高い理由

📚 実際のモデルを把握	BuilderX のコンポーネントタイプを 130 種類以上提供します（テキスト、画像、ボタン、フォーム、商品グリッド、カート、カウントダウン、ギャラリーなど）。ビルダー自体のファクトリーからそのまま移植されているため、エディターが生成するものとまったく同じ形です。
✅ 保存前に検証	構造をチェックします（一意の ID、有効なグリッド、名前付きフォームフィールド、機能するイベントターゲット）。ページが反映されたときに壊れていない状態を保ちます。
🛡️ デフォルトで安全	書き込みはすべて最初にドライランを行います。変更をプレビューでき、確認するまではサイトに反映されません。
✏️ 必要な箇所だけを編集	「CTA を緑色にして」のようにひとつ変更を依頼すると、その要素だけを編集します。他の ID、スタイル、ブロックはすべて元の状態を保ちます。

💡 代金引換（COD）またはオンライン販売をしていますか？商品、バリエーション、カート、注文、プロモーション、コンボを含むコマースモデル全体にも対応しています。

---

✨ 作成できるもの

AI に一文伝えるだけで、完成した編集可能なストアフロントページが作れます。

	こんなふうに伝えるだけ
🛒 商品ページ	「スキンケア美容液の単品ページ。ギャラリー、価格、カート付き注文フォームを追加して。」
🏬 ストアフロントのホーム	「ホームページを作って。ヒーローバナー、注目商品のグリッド、ニュースレターフォームを追加して。」
⚡ フラッシュセール	「フラッシュセールのページを作って。大きなカウントダウン、割引商品のグリッド、固定表示の購入ボタンを追加して。」
🎟️ イベント／ウェビナー	「登録ページを作って。カウントダウン、アジェンダ、申し込みフォームを追加して。」
💌 招待状	「結婚式の招待状を作って。名前、日付、地図、出欠確認フォームを追加して。」
📰 ブログ／コンテンツ	「注目記事と購読ボックスを備えたブログ一覧を作って。」
🔗 プロフィール用リンク集	「プロフィール用のリンク集を作って。アバター、短い自己紹介、リンクボタン5つ、ソーシャルリンクを追加して。」

…その後、**「CTAを緑にして」や「4つ目の特徴を追加して」**と伝えれば、そのブロックだけが編集されます。

🤖 Claude Desktop、Claude Code、Cursor、Windsurf、VS Code、またはMCP対応クライアントで動作します。ビルドガイドと要素カタログのツールはバックエンドへの呼び出しが不要なので、トークンを貼り付ける前にモデルを試せます。

---

仕組み

AI エージェントにWebCake/StoreCakeストアフロントビルダー （BuilderX）のコンポーネントモデルを教え、バックエンドに接続するMCP（Model Context Protocol）サーバーです。AI がページソース全体 { sections: [...] } を生成し、build_page がページを作成して保存します。publish_site を使うとサイト全体が公開されます。

ページ作成に加えて、実際のストアのページとカスタムコード、商品、注文、コレクション、 ブログ記事、プロモーション、コンボ、テーマ、顧客、オートメーションも利用できます。ツールは全部で約280個です。

方法	最適な用途	認証
npx（ローカル） — お使いのマシン上で実行	個人の日常利用、完全な制御	ブラウザーでの login、またはトークン＋セッション
リモート（serve） — Streamable-HTTPをセルフホスト	チーム、claude.aiのダイアログ、常時稼働	?jwt= リンク／x-webcake-jwt ヘッダー

ビルド＋カタログツール（get_build_guide、list_elements、get_element、new_section、 validate_page）は設定なしで使えます。サイトの読み取りや書き込みを行う機能には、すべてトークン＋セッションが必要です。

---

🚀 接続する

どちらか一つを選んでください。どちらもAIツールにストアフロントのツール一式を連携します。コーディングは不要です。

① npx — お使いのマシン上で実行（推奨）

インストール不要で、常に最新バージョンを使用できます。Node.js 18以降が必要です。1行でIDEを設定できます。

# Interactive — pick your IDE(s) and paste your credentials
npx -y webcake-storefront-mcp install

# Non-interactive — configure every supported IDE at once
npx -y webcake-storefront-mcp install --ide all --token <token> --session <session-id>

# Remove the server from every IDE config
npx -y webcake-storefront-mcp uninstall

対象：claude-desktop、claude-code、cursor、windsurf、vscode、または all。 サーバーを実行するだけの場合（手動で設定する場合）は、npx -y webcake-storefront-mcp を実行してください。

② ブラウザーでログイン — トークンのコピー＆ペースト不要

npx -y webcake-storefront-mcp login

ビルダーの接続ページが開きます。Connect をクリックすると、トークンとセッションがローカルに保存され、自動的に読み込まれます。

リモートURL — セルフホスト型。クライアントごとのインストールは不要

npx -y webcake-storefront-mcp serve --port 8787

その後、任意のクライアントを http://<host>:8787/mcp?jwt=<TOKEN> に接続します（ヘッダーに対応するクライアントでは、代わりに x-webcake-jwt を送信できます。チャットで switch_site を使ってサイトを選択してください）。PEXELS_API_KEY などのサーバー側のシークレットはホスト上に保存されるため、VPSでの運用に便利です。

⚠️ ?jwt= リンクには個人用トークンが含まれます。パスワードと同様に扱い、本番環境ではHTTPSを使用してください。

---

⚙️ 設定

必須の値は WEBCAKE_TOKEN（Bearer JWT）と WEBCAKE_SESSION_ID（x-session-id として送信）の2つです。サイトは実行時に選択できます。チャットで尋ねるだけで、AI が list_my_sites／switch_site を呼び出します（選択は保存され、次のセッションでも再利用されるため、WEBCAKE_SITE_ID は不要です）。

ベース URL は名前付き環境から取得されるため、WEBCAKE_ENV（または --env）を設定すれば、URL を手入力する必要はありません。

WEBCAKE_ENV	api	app（ログイン）	preview
local	http://localhost:24679	http://localhost:5173	demo.localhost:24679/<siteId>
staging	https://api.staging.storecake.io	https://staging.webcake.io	staging2.webcake.me/<siteId>
prod（デフォルト）	https://api.storefront.webcake.io	https://webcake.io	<site_slug>.webcake.me

プリセットは WEBCAKE_API_URL／WEBCAKE_APP_URL で上書きできます。任意の設定で、サーバー側に設定します： PEXELS_API_KEY（search_images）。トークン／セッション／サイトは、チャットで update_auth と switch_site を使って設定することもできます。設定はローカルの設定ファイル ~/.webcake-storefront-mcp/ に保存されます。

トークンとセッションの取得方法

1. WebCake ビルダーを開いてログインします。
2. DevTools（F12）を開き、Network タブで任意の API リクエストをクリックします。
3. Request Headers で、Authorization: Bearer … が WEBCAKE_TOKEN、x-session-id: … が WEBCAKE_SESSION_ID です。
4. 事前にサイト ID を用意する必要はありません。チャットで list_my_sites を実行してから switch_site を実行し、サイトを選択します（次回も選択内容が記憶されています）。

---

🧰 ツールの概要

ツールは約280種類あります。主要なグループはページを構築し、それ以外のツールは公開中のストアを読み取ったり編集したりします。

グループ	ツール	必要なもの
ページの構築	get_build_guide · list_elements · get_element · new_element · new_section · new_page_skeleton · validate_page · build_page · add_section	カタログツール：なし
メディアと取り込み	search_images（Pexels） · upload_images（CDN） · ingest_html · ingest_url（参照ページを再現）	—
ページとコード	list_pages · get_page_source · search_page_elements · get_page_element · update_page_element(s) · create_page · update_page · update_page_source · カスタム CSS/JS · ページコンテンツ · グローバルセクション · publish_site	トークンとセッション
コマース	商品 · 注文 · コレクション · プロモーション · コンボ	トークンとセッション
コンテンツとストア	ブログ記事 · テーマ／サイトスタイル · アプリ · 顧客 · send_mail	トークンとセッション
バックエンドコード	HTTP 関数の CRUD（get_http_function、edit_http_function、run_function、debug_function…）	トークンとセッション
コンテキスト	get_current_context · list_my_sites · switch_site · update_auth · toggle_confirm_mode	トークン
サイトプラン	get_site_subscription（現在のプラン、ステータス、残り日数） · count_my_sites（プラン／カスタムドメイン／ゴミ箱別） · list_plans	トークン

書き込み操作はすべて、デフォルトで dry_run=true です。正確な変更内容をプレビューし、dry_run=false で再実行した場合にのみサイトに反映します。

💬 プロンプトの例

<ブランド／オファー>向けの WebCake ストアフロントページを作成してください。webcake-storefront MCP を使ってください： get_build_guide、list_elements を呼び出し、new_section でセクションを構築して、 エラーがゼロになるまで validate_page を実行し、その後 build_page（まずはドライラン）を実行して publish_site で公開してください。

---

⭐ このアイデアが気に入ったら、スターを付けてください

これは個人で取り組んでいるオープンソースプロジェクトです。⭐を付けていただくことが、プロジェクトの継続を支え、ほかの開発者にも見つけてもらうきっかけになります。

• ⭐ リポジトリにスターを付ける — 2秒でできて、大きな励みになります。
• 🐛 Issueを作成する — バグ、足りないコンポーネント、またはちょっとしたアイデアをお寄せください。
• 🔁 まだブロックを1つずつ組み合わせてストアページを作っている方に共有してください。

WebCakeコミュニティのために、❤️を込めて作りました。ご参加ありがとうございます。