Pagenflow
Model Context Protocol

メール業務を Claude から。

Pagenflow の MCP サーバーは、Claude、Claude Code、Cursor など MCP 対応のエージェントをあなたのアカウントに接続します。プロジェクトの作成、メールテンプレートの作成と検証、テストメールの送信を自然な言葉で。ローカルへのインストールは不要です。

アクセストークンを発行設定手順を見る
claude mcp add --transport http pagenflow https://mcp.pagenflow.workers.dev

Claude Code 用のワンライナーです。ほかのクライアントは下の手順をご覧ください。

ClaudeClaude · Pagenflow 接続済み
ブラックフライデーのメールをサイバーマンデー用に複製して、見出しを「48時間限定」に変えて、検証してからテストを送って。
Claude
  • template_duplicateBlack Friday → Black Friday (Cyber Monday)
  • template_field_ops見出し、CTA ラベル、ヒーロー画像を更新
  • template_validateエラー 0 · 警告 1（代替テキストなし）
  • template_test_sendyou@brand.com に送信
完了しました。Black Friday (Cyber Monday) の準備ができ、テストを受信トレイに送りました。検証で代替テキストのない画像が 1 枚見つかりました。修正しましょうか？

対応クライアント

ClaudeClaudeCursorCursorWindsurfWindsurfClineClineCodexCodexKimiKimi
できること

Pagenflow MCP サーバーでできること

Model Context Protocol（MCP）は、AI アシスタントが実際のアプリを操作できるようにするオープン標準です。Pagenflow はあなたのアカウントをツールとして公開します。自然な言葉で伝えるだけで、今あなたが持っている権限のまま実行されます。

春のセールのメールを React Email で書き出して、スクリーンショットを送って。
template_exporttemplate_screenshot

テンプレート

作成・検証・公開・書き出し（HTML、React、Shopify Liquid）、テストメールの送信、プレビュー画像の生成。

去年のキャンペーンをアーカイブして、Q4 ローンチにスターを付けて。
project_archiveproject_toggle_star

プロジェクト

プロジェクトの作成、スター付け、アーカイブ、複製、公開。

sam@acme.com を編集者として招待して。
team_member_inviteteam_member_update_role

チームとメンバー

メンバーの招待、ロールの変更、ワークスペースの切り替え。

メインカラーを #D97757 にして、新しいロゴをアップロードして。
design_system_set_tokensdesign_system_set_logo

デザインシステムとフォント

ブランドカラー、タイポグラフィトークン、ロゴを常に同期。

フッターのコンポーネントは何がある？
component_category_listcomponent_list

再利用コンポーネント

チームで共有しているブロックを閲覧・管理できます。

今月のクレジットはあといくつ残ってる？
credits_getbilling_get

請求とクレジット

書き出しやテスト送信をまとめて始める前に、プランとクレジット残高を確認できます。

qa@acme.com をテスト送信先に追加して。
recipient_addintegration_list

連携と受信者

接続済みの連携を確認し、テスト送信先を管理できます。

未対応：ドラッグ＆ドロップのキャンバスそのもの、新しいサードパーティ連携の接続、支払い手続きの完了。これらは引き続きブラウザで行う必要があります。

設定

Pagenflow を AI アシスタントに接続する方法

ホスト型 MCP サーバーまで 3 ステップ。インストールも常駐プロセスも不要です。

  1. 1

    個人アクセストークンを発行する

    アカウント設定 → API トークンを開き、名前（例：「Claude Desktop」）を付けてコピーします。表示されるのは一度だけで、ログインと同じ権限を持つため、AI クライアントの設定内にだけ保管してください。

  2. 2

    Pagenflow をリモート MCP サーバーとして追加する

    クライアントを選び、どこでも同じ URL とトークンを貼り付けます。標準の Streamable HTTP を使用します。

    Settings → Developer → Edit Config

    JSON
    {
  "mcpServers": {
    "pagenflow": {
      "url": "https://mcp.pagenflow.workers.dev",
      "headers": {
        "Authorization": "Bearer pfmcp_live_your_token_here"
      }
    }
  }
}
  3. 3

    アシスタントに仕事を頼む

    「Pagenflow のチームを一覧表示して」や「オンボーディングメールというプロジェクトを作って」と試してみましょう。アシスタントはツールを自分で見つけ、あなたのアカウントで使えるものだけを参照します。

整理されたツール

各ツールは領域ごとに名前と範囲が決まっているため、アシスタントは毎回正しいツールを選べます。

アカウントの権限内だけで動作

トークンにできるのは、所有者がアプリでできることだけです。アカウント設定からいつでも無効化できます。

インストール不要

ホスト型の Streamable HTTP サーバー。クライアントに URL を指定するだけで、ローカルプロセスは不要です。

よくある質問

Pagenflow MCP サーバーのよくある質問

MCP 経由で Pagenflow を使うために知っておきたいこと。

Model Context Protocol（MCP）とは？

MCP は、Claude などの AI アシスタントが外部のツールやデータソースに安全に接続できるようにするオープン標準です。アプリとチャット画面の間でコピー＆ペーストする代わりに、MCP 対応のアシスタントが定義済みの「ツール」を直接呼び出します。Pagenflow の場合、プロジェクトの作成、テンプレートの管理、メンバーの招待など数十種類の操作がこれにあたります。

個人アクセストークンは安全ですか？無効にできますか？

個人アクセストークンはログインと同じ権限を持つので、パスワードと同様に扱ってください。トークンは「アカウント設定 → API トークン」で自分で発行・無効化でき、無効化はすぐに反映されます。MCP クライアントごと（例：「Claude Desktop」「Claude Code」）に別のトークンを使えば、ほかに影響を与えずに 1 つだけ無効化できます。

AI アシスタントはテンプレートのビジュアルデザインを編集できますか？

まだできません。MCP サーバーは作成、整理、公開、書き出し、テスト、スクリーンショットなどテンプレートまわりのすべてに対応していますが、ドラッグ＆ドロップのデザイン自体は引き続き Pagenflow のエディターで行います。AI によるビジュアル編集はロードマップに含まれています。

Pagenflow の MCP サーバーで使える AI ツールは？

MCP 対応のクライアントならどれでも使えます：Claude Desktop、Claude Code、Cursor、Windsurf、Cline、Codex、Kimi、そして MCP の Streamable HTTP トランスポートに対応したその他のエージェントフレームワーク。クライアントの設定にサーバーの URL と個人アクセストークンを追加するだけで、ローカルへのインストールは不要です。

MCP 経由の操作でプランのクレジットは消費されますか？

はい。アプリでクレジットを消費する操作（テンプレートの書き出しやテストメールの送信など）は、MCP 経由でも同じだけ消費します。プロジェクト一覧の表示やクレジット残高の確認などの読み取り専用操作は常に無料です。

はじめる

メール業務のカギを Claude に。

トークンを発行してコマンドを 1 つ貼り付けるだけで、メールテンプレートを自然な言葉で管理できます。アクセスはいつでも取り消せます。

アクセストークンを発行設定手順
claude mcp add --transport http pagenflow https://mcp.pagenflow.workers.dev

ローカルインストール不要 · Claude、Cursor、Windsurf、Cline、Codex、Kimi に対応