Flato MCP

Please read and follow the canonical Flato MCP agent guide: https://www.flato.ai/docs/mcp.md

Install Flato MCP, use the MCP client's browser-based OAuth flow when authorization is needed, guide me through any browser confirmation, verify the connection with flato_whoami, then follow the guide's bootstrap workflow before making design changes.

Important Codex App rule: after adding flato-editor or completing codex mcp login, the current Codex conversation may not hot-load newly added flato_* tools. If flato_* tools are unavailable in this same conversation, stop and ask me to open a new Codex conversation or restart Codex App.

When a project returns waiting_for_live_editor_bridge or needs_open_editor, have the MCP host/client open editorUrl automatically when supported. Only ask me to open editorUrl manually if the host cannot open URLs.

Flato は AI デザインのための AI-native Canvas runtime を提供し、AI エージェントと人が編集可能なプレゼンテーションやビジュアルコンテンツを一つの継続的なワークフローで共同作成できます。

Flato MCP は Claude Code、Codex、Cursor など MCP 対応エージェントを Flato の AI-native Canvas runtime に接続します。エージェントはプレゼンテーション、ポスター、SNS ビジュアルなどの編集可能なデザインを作成・継続更新でき、ユーザーはブラウザエディタを開いて手動編集、PDF や画像の書き出し、リンク共有を行い、同じプロジェクト上で AI との協作を続けられます。

Flato MCP でできること

Flato MCP は外部 AI エージェントに、Flato の AI-native Canvas runtime への制御されたアクセスを与えます。

1. 保存済みの編集可能なデザインプロジェクトを作成する。
2. 既存の editor URL または share link を引き継ぐ。
3. 現在のキャンバス、ページ、ブロック、スタイル、レイアウトフィードバックを読み取る。
4. プレゼンテーション、ポスター、SNS ビジュアルなどのデザイン形式を作成・更新する。
5. ユーザーがライブエディタを開き、手動編集、書き出し、共有、AI との継続協作を行えるようにする。
6. AI による変更を、分断されたファイルではなく同じライブプロジェクトに紐づける。

Flato MCP をインストール

Flato を AI coding tool に追加するときは、この HTTP MCP server URL を使用します。

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

公式 GitHub Package

リリース情報、README ガイド、package ルートのメタデータは次の公式 Flato MCP リポジトリを参照してください。

sologovision/flato-design-mcp

初回認可

MCP server を追加しても、保存されるのは接続設定だけです。多くのクライアントでは、設定を保存した瞬間ではなく、AI ツールが Flato MCP server を初めて呼び出したときに Flato OAuth ウィンドウが開きます。

インストール後にブラウザウィンドウが開かない場合は、AI ツールに mcp_auth または flato_whoami を呼び出して Flato MCP 認可を開始させてください。認可後、接続確認のためにもう一度 flato_whoami を呼び出します。

Claude Code

ターミナルでこのコマンドを実行します。

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

その後、Claude Code セッションで /mcp と入力して OAuth サインインフローを開始します。Claude Code は Flato MCP server を初めて呼び出すときに、Flato 認可用のブラウザを開きます。

Codex App

Codex App では、この直接 Streamable HTTP MCP server 設定を ~/.codex/config.toml に追加します。

[mcp_servers.flato-editor]
url = "https://api.flato.ai/api/mcp/editor"
tool_timeout_sec = 120

server を追加したら、新しい Codex 会話を開くか Codex App を再起動します。OAuth が自動開始しない場合は codex mcp login flato-editor を実行します。OAuth はブラウザで完了します。Flato のユーザー名、パスワード、Authorization header を求めないでください。personal Codex plugin は legacy local demo 用であり、通常の Flato MCP セットアップでは使いません。

Cursor

Cursor Settings > MCP を開いて新しい server を追加するか、~/.cursor/mcp.json に次を追加します。

{
  "mcpServers": {
    "flato": {
      "type": "http",
      "url": "https://api.flato.ai/api/mcp/editor"
    }
  }
}

認証は OAuth で処理されます。Cursor は通常、最初の実際の MCP tool 呼び出し時に Flato 認可用ブラウザを開きます。server は読み込まれたが OAuth ウィンドウが出ない場合、Cursor Agent に mcp_auth または flato_whoami を呼び出させてください。

インストール後のエージェントフロー

Flato MCP をインストールした後、エージェントは次の手順に従います。

1. まだ認可されていない場合は OAuth 認可を開始する。
2. flato_whoami を呼び出して認可を確認し、プロジェクト/エディタ状態を確認する。
3. 新規デザインの場合、ユーザー向けの短い projectName を選び、flato_create_project を呼び出す。
4. editor URL がある場合、完全な projectUrl で flato_use_project を呼び出す。
5. share URL がある場合、完全な shareUrl で flato_use_share_link を呼び出す。
6. 返された状態が waiting_for_live_editor_bridge の場合、返された editorUrl をユーザーに渡し、停止してユーザーが開くのを待つ。
7. canWrite=true になるまで flato_get_project_status を呼び出す。
8. 作成、編集、書き出しの前に flato_get_design_context を呼び出す。

Flato URL を引き継ぐ

AI エージェントに https://www.flato.ai/editor/<projectId> のような Flato project URL が渡された場合、Flato MCP をインストールして認可し、その完全な projectUrl で flato_use_project を呼び出します。

https://www.flato.ai/share/<shareId> のような Flato share URL が渡された場合、その完全な shareUrl で flato_use_share_link を呼び出します。Flato MCP は認可済みユーザーのアカウントに編集可能なプロジェクトコピーを作成し、新しい editorUrl を返します。

古い MCP client で flato_use_share_link が使えない場合は、share link を開いて Edit a copy を使い、コピー後の editor URL で flato_use_project を呼び出します。

新しいプロジェクトを作成する

新規作業では、エージェントにユーザー向けの短い projectName を選ばせ、flato_create_project を呼び出します。

flato_create_project、flato_use_project、flato_use_share_link が waiting_for_live_editor_bridge を返した場合、エージェントは返された editorUrl をあなたに渡し、停止してあなたが開くのを待ちます。エディタが読み込まれたら canWrite=true になるまで flato_get_project_status を呼び出し、その後デザイン変更の前に flato_get_design_context を呼び出します。

Credits 使用に関する注意

Flato MCP は、Claude Code、Codex、Cursor、その他の MCP クライアントなど、ローカル AI エージェントが使用する token に対して Flato Credits を消費しません。

Flato Credits は、Flato 側の AI 生成またはメディア処理機能を使用した場合にのみ消費されます。テキスト変更、レイアウト調整、要素の移動、画像の切り抜きなどの手動キャンバス編集では Credits は消費されません。

MP4/MPEG-4 動画書き出し、vectorizer、動画生成など、一部の Flato 機能には有効なサブスクリプションが必要です。機能の利用可否は現在のプラットフォーム上のルールに従います。その他の対応済み MCP およびプラットフォーム機能は、別途表示がない限り無料で利用できます。

ローカルのモデル/API 利用は、Flato Credits ではなく、利用している AI エージェントまたは AI サービス提供元によって課金されます。