Webcake Landing

WebCake ランディング MCP

英語 · ベトナム語

ランディングページの内容を自然な言葉で説明すれば、AI がページを作成してチェックし、WebCake に直接公開します。

⭐ 箱をドラッグする作業に何時間もかけずに済んだら、スターを付けてください — 開発者 1 人で取り組んでいるプロジェクトです。スターを付けてもらえると、開発を続ける励みになります。

「コーヒーショップのランディングページを作って — サインアップボタン付きのヒーロー、3 つの特徴を紹介するセクション、リード獲得フォームを配置して、ワークスペースに保存して。」

すると、実際に編集可能な WebCake ページがあなたのアカウントに表示されます。箱をドラッグしたり、スキーマを覚えたり、JSON を手作業で書いたりする必要はありません。

---

🧩 仕組み

このサーバーは、AI アシスタントと WebCake をつなぐ架け橋です。AI が WebCake ページの構造を推測することはありません。WebCake の要素モデル全体を把握し、結果を検証して保存するこの MCP に問い合わせます。

   You              AI assistant            webcake-landing MCP            WebCake
  ┌──────┐  prompt  ┌────────────┐  tools  ┌──────────────────────┐  API  ┌──────────┐
  │ idea │ ───────► │  Claude /  │ ──────► │ • knows the element  │ ────► │  a real  │
  │      │          │  Cursor /  │         │   model + AI hints   │       │ editable │
  │      │ ◄─────── │  Windsurf  │ ◄────── │ • builds + validates │ ◄──── │  page in │
  └──────┘ page URL └────────────┘ result  │ • saves to your acct │       │  WebCake │
                                           └──────────────────────┘       └──────────┘

1. 自然な言葉で依頼します — 目的、ブランド、セクション、CTA、フォーム項目を伝えます。
2. AI が MCP からモデルを学習します — 要素カタログ、絶対位置指定のキャンバス、イベントの語彙を把握することで、推測ではなく、実際に WebCake のページを作成します。
3. すべてを組み立てて検証します — { page, popup, settings, options } の JSON 全体を作成します。validate_page が、オフキャンバスのボックス、リンク先のない CTA、フォーム項目の不足を、保存前に検出します。
4. WebCake アカウントに保存します — まずドライランでプレビューし、その後に実際に保存します。
5. エディターへのリンクを受け取ります — 開いて調整し、公開できます。面倒な作業は AI が済ませています。

信頼できる理由

📚 実際のモデルを把握	WebCake の実際の要素カタログ（ヒーロー、フォーム、カウントダウン、ギャラリー、商品リストなど 40 種類以上）を提供します。各要素には、エディターのレンダラーから直接取得した、正確な specials と AI 向けのヒントが含まれます。
✅ 保存前に検証	構造および意味のチェック（ID の一意性、キャンバス内のレイアウト、機能する CTA、一意のフォーム項目）により、保存時にページが壊れていないことを確認します。
🛡️ デフォルトで安全	すべての書き込みはまずドライランで実行されます（リクエストをプレビューし、トークンをマスクします）。確認するまで、アカウントには何も反映されません。
✏️ 変更箇所だけを編集	「CTA を緑にして」のように 1 つの変更を依頼すると、その要素だけを編集します。他の ID、座標、ブロックはすべて、元の状態のまま保たれます。

💡 リード獲得、イベント、招待、アプリのプロモーションにも、代引き／オンライン販売にも対応します。WebCake のコマースモデル（商品リスト、バリエーション、カート）も扱えます。

---

✨ 作成できるもの

AI にひと言伝えるだけで、完成した編集可能な WebCake ページができます。実際に作成できるものをいくつかご紹介します。

	こう伝えるだけ…
🧲 リード獲得用ランディングページ	「SaaS のウェイトリストページ。ヒーロー、3 つのメリット、メール登録フォームを作って。」
🛒 代引き／オンラインストア	「スキンケア美容液の単品ページ。ギャラリー、価格、バリエーション、カート付き注文フォームを作って。」
🎟️ イベント／ウェビナー	「土曜日のウェビナーの登録ページ。カウントダウン、アジェンダ、申し込みフォームを作って。」
💌 招待状	「結婚式の招待状。名前、日付、地図、出欠確認フォームを入れて。」
📱 アプリのプロモーション	「フィットネスアプリのページ。スマートフォンのモックアップ、機能一覧、App Store と Google Play のボタンを入れて。」
⚡ フラッシュセール	「フラッシュセールのページ。大きなカウントダウン、割引商品のグリッド、固定表示の購入ボタンを作って。」
🔗 プロフィールのリンク集	「クリエイタープロフィール用のリンク集。アバター、短い自己紹介、リンクボタン 5 個、SNS を入れて。」
🎉 製品のローンチ	「v2 のローンチページ。ヒーロー、新機能一覧、先行アクセス申し込みフォームを作って。」

…続けて**「CTA を緑にして」や「4 つ目の機能を追加して」**と伝えると、そのブロックだけが編集され、ほかの ID と座標はすべてそのまま維持されます。

🤖 Claude Desktop、Claude Code、Cursor、Windsurf、Augment、Codex、Antigravity、Gemini CLI、Cline、Kiro、OpenCode、または MCP 対応クライアントで利用できます。さらに、リファレンスツールと生成ツールはセットアップ不要なので、トークンを貼り付ける前に試せます。

---

内部の仕組み

AI エージェントに要件から完全なWebCake ランディングページのソース JSONを作成し、WebCake バックエンドに保存する方法を教える MCP（Model Context Protocol）サーバーです。

要素カタログ、要素ごとの使用ヒントと specials、ページ全体の JSON Schema、有効な要素／ページのスケルトン、ページバリデーター、バックエンドでページを作成・編集するツールを提供します。AI エージェントが { page, popup, settings, options, cartConfigs } の完全な JSON を生成し、create_page がそれを保存して自動公開（ビルド＋publish_html）するため、プレビューはすぐに表示されます（編集ツールはソースのみを保存するため、編集後は publish_page で再公開してください）。

方法	おすすめの用途	認証
npx（ローカル） — お使いのマシンで実行	個人での日常利用、完全な制御	ブラウザーでの login、JWT、または認証なし（リファレンスツール）
ホスト URL — インストール不要でライブサーバーを利用	Node.js がない場合、チーム、claude.ai のダイアログ	個人用の ?jwt= リンク／x-webcake-jwt ヘッダー

リファレンスツールと生成ツール（get_generation_guide、list_elements、validate_page、…）および取り込みツール（ingest_html、ingest_url — 既存の HTML や URL をレイアウトの基準として取り込み、AI がそれを再現または調整できるようにします）は、設定不要で利用できます。トークンが必要なのは永続化ツール（create_page、update_page、add_section、patch_page、publish_page、list_pages、find_pages、get_page、list_organizations）のみです。認証情報は、リクエストごとのヘッダー → 環境変数 → 保存済みの auth.json（login）の順に適用されます。

---

🚀 接続する — 主な 2 つの方法

いずれか 1 つを選んでください。どちらの方法でも、AI ツール（Claude、Cursor など）に Webcake ランディングページ作成ツール一式を提供できます。コーディングは不要です。

① npx — お使いのマシンで実行（個人利用におすすめ）

インストール不要で常に最新版を利用でき、Node.js 18 以降が必要です。1 行実行するだけでトークンを取得し、IDE の設定も書き込みます。

# Interactive — pick environment, log in via browser (or paste a JWT), pick IDE(s)
npx -y webcake-landing-mcp install

# Non-interactive — configure every supported IDE at once (env + token via flags)
npx -y webcake-landing-mcp install --ide all --env prod --jwt <your-jwt>

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

対象ごとの適切な設定ファイルに webcake-landing エントリーを書き込みます。対象は claude-desktop、 claude-code、cursor、windsurf、augment（VS Code）、codex、antigravity、gemini（Gemini CLI）、 cline、kiro、opencode、all です。フラグ：--ide、--env、--jwt、--org-id、 --api-base／--app-base、--npx／--local、-y。詳しくは install --help を参照してください。

サーバーを実行するだけにしますか（設定は後で手動で行います）？ npx -y webcake-landing-mcp

🛠️ IDE ごとに設定を手書きする方法、シェルスクリプトのインストーラー（install.sh／install.ps1）、またはローカルにクローンしてビルドする方法については、docs/manual-install.md を参照してください。

② リモート URL …/mcp?jwt= — ホスト済みで、インストール不要

サーバーは すでに https://mcp.toolvn.io.vn/mcp で稼働中です。Node.js も、スリープさせずに維持するマシンも必要ありません。 個人用リンク（トークンが埋め込まれています）を取得し、クライアントの カスタムコネクターを追加 または設定に貼り付けてください。

https://mcp.toolvn.io.vn/mcp?jwt=<YOUR_TOKEN>

リンクの取得方法は 2 つあります。

• 最も簡単な方法 — Webcake ダッシュボードで https://webcake.io/mcp-remote を開くと、リンクが生成され、コピーされます。
• 手動で取得 — 手順を説明したガイドをご覧ください：docs/connect-mcp.md。

追加のオプション：&env=prod、&org_id=…、&api_base=…。各チームメンバーには、それぞれの jwt が設定されたリンクを渡してください → ユーザーごとに利用でき、OAuth は不要です。ヘッダーに対応しているクライアントでは、トークンを URL に 含めるのではなく、x-webcake-jwt として送信してください。ヘッダーと環境変数の完全な対応表は docs/configuration.md にあります。

✅ 最適な用途：Node.js を使わない場合、チームでの共有利用、claude.ai のコネクターダイアログ（URL のみで、ヘッダーは不要）。 ⚠️ リンクには個人用トークンが含まれています。パスワードと同様に扱い、必ず HTTPS を使用してください。

---

⚙️ 設定

簡単に説明すると、これが必要なのは 永続化ツール のみです。

npx -y webcake-landing-mcp login    # opens the browser once, saves the token to ~/.webcake-landing-mcp/auth.json

…または、WEBCAKE_ENV（local | staging | prod — すべてのベース URL を設定）と WEBCAKE_JWT を設定してください。

publish_page でページを実際に 公開 するには、ビルドホストが必要です（公開された publish_html ルートで必要となる app／app_css をレンダリングします）。

• prod プリセットは https://build.webcake.io を自動設定するため、追加の設定は不要です（環境の解決結果が prod の場合にプリセットが適用されます：WEBCAKE_ENV=prod、--env prod、または x-webcake-env: prod）。
• staging／local では、WEBCAKE_BUILD_BASE=<url> を設定するか、リクエストごとに x-webcake-build-base ヘッダーを送信してください。
• これを設定しない場合、publish_page は従来のソースのみの保存にフォールバックし、rendered:false, live:false と警告を返します。ページは公開されません。
• ページが 恒久的に 公開されるのは custom_domain がある場合のみです。設定しない場合、返される /preview/<page_id> リンクは公開から約 10 分後に期限切れになります。

それ以外の情報（すべての環境変数の一覧、環境プリセット、ホストされたサーバーのリクエストごとのヘッダー、login のブラウザーフロー（およびバックエンドの仕様）、JWT を手動で取得する方法）は、docs/configuration.md にあります。

---

📚 ドキュメント

ガイド	内容
IDE／claude.ai の接続	すべてのクライアントでの接続手順（npx とホスト URL）、トラブルシューティング表。
設定	環境変数、--env プリセット、ブラウザーでの login、リクエストごとのヘッダー、JWT の取得方法。
ツールリファレンス	全 23 ツールの詳細、手順ごとのワークフロー、モデルに関する注意事項。
使用例	3 つのエンドツーエンドの手順：概要からの構築、部分的な編集、型の確認。
手動／高度なインストール	シェルインストーラー、クローンしたビルド、IDE ごとの手書き設定。
ページ要素のスキーマ	要素モデルの完全なリファレンス（およびすべての特殊要素／イベント）。

🧰 ツール一覧

5つのグループに23個のツールがあります。詳しい説明は docs/tools.md をご覧ください。

グループ	ツール	必要なもの
リファレンス	get_generation_guide · list_elements · get_element · get_page_schema	なし
生成	new_element · new_page_skeleton · validate_page · layout（両方のブレークポイントに対応した、正確な中央揃え／行／グリッド／スタックの座標）	なし
メディア	search_images（Pexels の実際のストック写真） · get_icon_svg（Material Symbols／Font Awesome のアイコン名 → Iconify 経由でインライン SVG に変換） · upload_images（外部画像、data: URI、またはユーザーのマシン上のローカルファイルパスから画像を再ホストします。Webcake の認証情報 と 組織が利用可能な場合、ファイルはメディアコレクションにアップロードされます。組織は必須で、ページの組織と一致している必要があるため、事前に決めてください。組織が1つなら自動選択され、2つ以上あって未選択の場合は organization_required と組織の一覧が返されます。JWT がない場合は、パブリック CDN が使用されます） · render_preview（ページ／URL のスクリーンショットを撮影し、モデルが表示して比較できるようにします）	なし
取り込み	ingest_html · ingest_url（既存のページを再作成します）	なし
永続化	list_organizations · create_page · list_pages · find_pages · get_page · update_page · add_section · patch_page · publish_page	WEBCAKE_API_BASE + WEBCAKE_JWT

すべての書き込み操作は dry_run=true がデフォルトです。リクエストの正確な内容（トークンはマスクされます）をプレビューし、dry_run=false にして再実行した場合にのみアカウントに変更を加えます。

おすすめのプロンプト

<ブランド／オファー> の WebCake ランディングページを作成してください。webcake-landing MCP を使ってください。 get_generation_guide、new_page_skeleton の順に呼び出し、使用する各要素タイプについて get_element を呼び出してください。 { page, popup, settings, options } の JSON を組み立て、エラーがなくなるまで validate_page を実行してから、create_page を呼び出してください（まずドライランで実行）。

---

⭐ 気に入ったらスターをお願いします

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

• ⭐ リポジトリにスターを付ける — 2秒ででき、大きな励みになります。
• 🐛 イシューを作成する — バグ、未対応の要素タイプ、またはちょっとしたアイデアをお知らせください。
• 🔁 ランディングページをまだ一つずつ組み立てている方に、ぜひ共有してください。

WebCake コミュニティへの ❤️ を込めて作成しました。ご覧いただき、ありがとうございます。