flow2

Flow2 MCP Server

モバイルファーストのプレゼンテーションをデザインしましょう。AI アシスタントから作成、編集、プレビュー、公開できます。

これは、Flow2 の公式 Model Context Protocol サーバーです。Claude などの AI アシスタントが Flow2 アカウントを直接操作できます。新しいフローの作成、画面の追加と編集、ブロックの挿入、結果のプレビュー、公開まで、すべてチャットのプロンプトから実行できます。

• エンドポイント： https://mcp.flow2.co/
• トランスポート： streamable-http
• 認証： Dynamic Client Registration（RFC 7591）を使用した OAuth 2.1
• レジストリ： co.flow2/flow2

---

クイックスタート

Claude Code（および Cowork）

claude mcp add --transport http flow2 https://mcp.flow2.co/ --scope user

続いて、Claude Code 内で /mcp を実行し、OAuth サインインを完了します。

Claude.ai（ウェブ＋デスクトップ）

設定 → コネクター → カスタムコネクターを追加 → URL：https://mcp.flow2.co/。接続をクリックして認証します。

Cursor

~/.cursor/mcp.json 内に記述します。

{
  "mcpServers": {
    "flow2": {
      "url": "https://mcp.flow2.co/"
    }
  }
}

その他の MCP 対応クライアント

リモートの streamable-HTTP MCP サーバーに対応しているクライアントであれば、上記の URL を使用して接続できます。クライアントが DCR に対応している場合、OAuth は自動的に処理されます。

---

できること

Flow2 MCP サーバーは、フロー作成に関するすべての機能をツールとして提供します。

ツール	機能
create_flow	Flow2 プレゼンテーションを新規作成します
update_flow_meta	フロー名またはフローレベルのメタデータを更新します
get_flow	フローの現在の状態を読み取ります
add_screen	フローに新しい画面を追加します
get_screen	画面とそのブロックを読み取ります
delete_screen	フローから画面を削除します
add_block	画面にブロック（テキスト、画像、ボタンなど）を追加します
patch_block	既存のブロックの内容またはスタイルを更新します
delete_block	画面からブロックを削除します
get_blocks_schema	利用可能なブロックの種類とスキーマを一覧表示します
get_preview	1 つの画面のスクリーンショット URL を取得します
render-flow-preview	チャット内にフロー全体をインライン表示します。すべての画面を縦にスクロールしてプレビューでき、テーマのアクセントインジケーターも表示されます（Apps 対応クライアントでは操作可能）
render-screen-preview	1 つの画面をスマートフォンのフレーム付きスクリーンショットとしてチャット内にインライン表示します
list_jobs / check_job_status	時間のかかる操作の進行状況を確認します
check_credits	アカウントの残りクレジットを確認します

すべての書き込みツールには、適切な場合に destructiveHint: false の注釈が付いており、AI クライアントが安全性を判断できます。読み取り専用ツールには readOnlyHint: true のマークが付いています。

インラインプレビュー（Apps 対応クライアント）

MCP Apps 拡張機能に対応しているクライアント（Claude.ai ウェブ＋デスクトップ、Claude Code、ChatGPT、Cursor、VS Code）では、render-flow-preview と render-screen-preview によって、サンドボックス化された iframe 内にインタラクティブなインラインプレビューが表示されます。フローを確認するためにチャットを離れる必要はありません。各画面の CTA ボタンはクリック可能なリンクになり、インジケーターにはフローのテーマのアクセントカラーが反映されます。その他のクライアントでは、カバー画像のスクリーンショットが表示されます。

---

プロンプトの例

サーバーに接続したら、次のように試してみてください。

• 「フィンテックアプリ『Lumen』の新しいモバイル向けピッチデッキを作成して。」
• 「目を引く見出しと『Get started』ボタンを備えたヒーロー画面を追加して。」
• 「アイコンと短いキャプションを使った、製品の特長を紹介する画面を 3 つ生成して。」
• 「最新のフローを見せて。」（インラインプレビューを表示）
• 「料金プランのフローの 3 番目の画面をプレビューして。」
• 「最新のフローへのリンクを共有して。」

アシスタントが適切な MCP ツールを呼び出し、Flow2 アカウントに変更がリアルタイムで反映されます。

---

認証

サーバーは、動的クライアント登録に対応した OAuth 2.1 を実装しています。新しいクライアントから接続すると、次の処理が行われます。

1. /.well-known/oauth-authorization-server を検出します
2. registration_endpoint を介してクライアントとして登録します
3. PKCE を使用した標準的な認可コードフローを案内します
4. 継続的なアクセスのためにリフレッシュトークンを保存します

Flow2 アカウントの設定から、いつでもクライアントの認可を取り消せます。

---

プライバシーとデータの取り扱い

• 範囲： MCP サーバーがアクセスするのは、認証済みユーザーに属する Flow2 のデータのみです。
• ログ記録： リクエストのメタデータ（ツール名、タイムスタンプ、ステータス）は運用目的で記録されます。ツールの引数とレスポンス本文は、リクエストの処理中を除き保持されません。
• サードパーティサービス： Flow2 は、少数のインフラストラクチャプロバイダー（ホスティング、エラー追跡）を利用しています。全リストについては、プライバシーポリシーをご覧ください。
• 保持期間： 認証トークンは保存時に暗号化されます。Flow2 の設定からアクセスを取り消すと、トークンは消去されます。

詳細：プライバシーポリシー · 利用規約。

---

サポート

• メール： [email protected]
• 課題： github.com/flowboard/flow2-mcp/issues

---

ライセンス

MIT — LICENSEをご覧ください。