Flato Design MCP

Flato Design MCP

Flato は、AI デザイン向けのネイティブキャンバスランタイムです。

Flato は、デザイン作業に使える、リアルタイムで編集可能なビジュアルキャンバスを AI エージェントに提供します。MCP を通じて、エージェントはデザインの作成、確認、修正、PNG、JPG、PDF、または画像のみの PPTX へのエクスポート、Flato プロジェクトの QA を実行でき、ユーザーは引き続きブラウザーエディターにフルアクセスできます。

Flato Design MCP は、Codex、Claude Code、Cursor、その他の MCP 対応エージェントを、このネイティブキャンバスに接続します。

https://api.flato.ai/api/mcp/editor

このリポジトリは、セットアップドキュメント、基本ガイドスキル、Codex プラグインのパッケージ、サンプル、レジストリ／レビュー用メタデータを配布する公式パッケージです。Flato MCP サーバーのソースコードは含まれていません。

位置付け

Flato は、AI デザイン向けのネイティブキャンバスランタイムです。一度きりの画像生成ツールでも、静的な HTML デッキ生成ツールでもありません。MCP ワークフローは、編集可能なページ、構造化されたブロック、最新のデザインコンテキスト、明示的なページ ID とブロック ID、ライブエディターへの引き継ぎ、ビジュアル QA を中心に構築されています。

AI エージェントが MCP を通じて Flato の編集可能なビジュアルキャンバスを安全に操作できるようにする場合は、このパッケージを使用してください。

含まれるもの

• skills/flato-design-mcp-guide：エージェントにインストールできる基本ガイドスキルです。
• plugins/flato-design-mcp-codex：MCP 設定とガイドスキルを含む Codex プラグインパッケージです。
• .agents/plugins/marketplace.json：このリポジトリの Codex マーケットプレイス記述子です。
• docs/：セットアップ、OAuth、権限、トラブルシューティングに関するメモです。
• registry/：MCP レジストリおよびプラットフォームレビュー用メタデータのドラフトです。
• examples/prompts/：インテグレーションをテストするための最初のプロンプトです。

Codex のインストール

Codex では、このリポジトリをプラグインマーケットプレイスとしてインストールできます。

codex plugin marketplace add sologovision/flato-design-mcp --ref main
codex plugin add flato-design-mcp-codex@flato-design-mcp
codex mcp login flato-editor

次に、新しい Codex の会話を開始し、次のように確認します。

Use Flato Design MCP. Call flato_whoami first and report the result. Do not create, edit, or write any project.

Codex のセットアップを参照してください。

Claude Code のインストール

ホストされている Flato MCP サーバーを追加します。

claude mcp add --transport http flato-editor https://api.flato.ai/api/mcp/editor

次に、skills/flato-design-mcp-guide のガイドスキルを使用します。

Claude Code のセットアップを参照してください。

Cursor およびその他の MCP クライアント

ホストされている MCP サーバーの URL を使用します。

https://api.flato.ai/api/mcp/editor

次に、skills/flato-design-mcp-guide/SKILL.md のワークフローに従います。

Cursor のセットアップを参照してください。

OAuth

Flato Design MCP はブラウザー OAuth を使用します。必要に応じて、認証の前に Flato へのサインインまたはアカウントの作成を求められます。

Flato のパスワード、ベアラートークン、リフレッシュトークン、ローカルの OAuth キャッシュの内容をエージェントとの会話に貼り付けないでください。

認証を参照してください。

アカウントとサブスクリプション

OAuth には Flato アカウントが必要です。Flato Design MCP のインストール、接続、利用開始に有料の Flato サブスクリプションは必要ありません。

一部の機能、エクスポート、より多くの利用量、チーム／ワークスペース機能、有料の画像生成および編集は、認証済みユーザーの Flato プランまたはクレジットに依存する場合があります。エージェントは、事前にユーザーへサブスクリプションへの加入を求めるのではなく、MCP から返されたプランまたはクレジットに関するエラーを報告してください。

エージェントの最初のワークフロー

Flato MCP に接続した後、エージェントは次の手順を実行します。

1. flato_whoami を呼び出します。
2. flato_create_project、flato_use_project、または flato_use_share_link を使って、プロジェクトを作成または選択します。
3. リクエストされたら、ライブの Flato エディターを開きます。
4. canWrite=true になるまで flato_get_project_status をポーリングします。
5. flato://canvas/fundamentals-v1 を読み取るか、リソースを読み取れない場合は flato_get_canvas_fundamentals を呼び出します。
6. 書き込みを行う前に flato_get_design_context を呼び出します。
7. 最新のコンテキスト読み取りで返された、具体的なページ ID とブロック ID を使用します。
8. 書き込み後に mcpFeedback を確認します。
9. 重要な結果は flato_export でエクスポートします。ビジュアル QA には PNG または JPG のプレビューエクスポートを使用します。

インタラクション

ページレベルのインタラクションは、flato_create_pages と flato_update_pages の interactiveScript を通じて記述します。エージェントは、このリポジトリから静的なスキーマの断片をコピーするのではなく、現在の MCP ツールスキーマと flato://canvas/fundamentals-v1 を参照して、インタラクションの仕様全体を確認してください。

サポートされているインラインインタラクションイベントには、クリック／入力／変更のほか、onclick、onmouseover、 onmouseout、onmouseenter、onmouseleave などのデスクトップ向けホバー／マウスイベントがあります。ホバーはデスクトップでのプレゼンテーションに便利です。モバイルのタッチ操作を考慮する場合は、クリック／タップ動作または視覚的な代替手段を用意してください。

検証済みスモークテスト

v0.1.3 の Codex プラグインパッケージでは、完全版ガイドスキルと現在のホスト型 Flato MCP コントラクトを使用します。

Codex のインストール手順は、以下の内容で検証済みです。

codex plugin marketplace add sologovision/flato-design-mcp --ref main
codex plugin add flato-design-mcp-codex@flato-design-mcp
codex mcp login flato-editor

独立した Codex CLI セッションで、Flato プロジェクトを作成または編集することなく、インストール済みの flato-editor MCP サーバーを介して flato_whoami の呼び出しに成功しました。

スクリーンショット

GitHub リリース

Codex プラグインのインストール

読み取り専用 MCP スモークテスト

編集可能なプレゼンテーションキャンバス

キャンバス編集およびコンテンツツール

AI 支援によるキャンバス編集

ライブキャンバスで作業する Codex

リリースアセット

GitHub リリースには、以下が添付されています。

• flato-design-mcp-guide-vX.Y.Z.zip：インストール可能な基本ガイドスキル。
• flato-design-mcp-codex-vX.Y.Z.zip：Codex プラグインパッケージ。

安全性の原則

• パスワード、ベアラートークン、ローカルの OAuth トークンをユーザーに貼り付けるよう求めないでください。
• ローカルの OAuth ストアやトークンストアを調査しないでください。
• pageId や blockId を推測しないでください。
• 生成したアセットの URL を使ってデザインを書き込むまでは、アセットが配置されたと主張しないでください。
• 広範囲に及ぶ編集やリスクの高い編集を行う前に、バックアップを使用してください。

Flato 関連ドキュメント

• ユーザードキュメント：https://www.flato.ai/docs/mcp
• エージェント向けガイド：https://www.flato.ai/docs/mcp.md
• Flato アプリ：https://www.flato.ai
• プライバシー：https://www.flato.ai/docs/privacy-policy
• 利用規約：https://www.flato.ai/docs/terms-of-use

サポートとセキュリティ

• セットアップやドキュメントに関する問題には、GitHub Issues を使用してください。
• セキュリティ報告の手順については、SECURITY.md を参照してください。
• 公開イシューにトークン、パスワード、非公開のプロジェクト内容を記載しないでください。

ロードマップ

これは基本パッケージです。flato-presentation-skill などのシナリオ固有のスキルは、接続、OAuth、ターゲティング、安全性に関するワークフローを重複して実装するのではなく、このガイドを基盤として構築してください。