Flato Design MCP

io.github.sologovision由 GitHub 帳號 sologovision 發布v0.1.3更新於 Oct 24, 2026

Connect AI agents to Flato's editable canvas runtime through a hosted MCP server.

已驗證Streamable HTTP可網頁執行效率與工作流媒體與設計

概覽

AI 產生的概覽

託管式 MCP 伺服器，將 AI 代理連接到 Flato 可編輯設計畫布，用來建立、修改、匯出與檢查視覺專案。

可以做什麼
辨識目前登入的帳號並管理專案：查看身分、建立或選擇專案、開啟即時編輯器、輪詢可寫入狀態、讀取分享連結。在變更前讀取設計脈絡與畫布基礎規範。以明確的頁面與區塊 ID 建立和更新頁面、區塊，包含頁面層級互動。將成果匯出為 PNG、JPG、PDF 或純圖片 PPTX，並檢視回饋進行視覺檢查。
適用情境
當希望代理在即時可編輯畫布上製作或修改設計，而非產生一次性圖片或靜態 HTML，且使用者想同時在瀏覽器編輯器中繼續操作時使用。
執行需求
透過 streamable HTTP 存取的遠端託管端點，不需本機套件。需要 Flato 帳號並以瀏覽器 OAuth 登入。連線不要求付費訂閱，但部分功能、匯出、更高用量與付費圖片生成可能取決於使用者的方案或額度。
安裝前請注意
涉及 OAuth 憑證：不要把 Flato 密碼、bearer token、refresh token 或本機 OAuth 快取內容貼到對話中，也不要檢視本機權杖存放區。代理會寫入專案，進行大範圍或有風險的修改前應先備份。部分匯出與圖片生成可能消耗方案額度或需要付費。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Flato Design MCP，將其新增到工作區。
  2. 連接 所需的 憑證。它們會被私密儲存，絕不會在公開頁面上展示。
  3. 為需要使用其工具的對話啟用該服務。

Web executable，透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。

交給代理程式安裝

把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式，或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南，先向你展示發布者、端點和登入方式，經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。

閱讀 https://sourceweft.com/mcp/io.github.sologovision%2Fflato-design-mcp/install.md，並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前，先告訴我它的發布者、端點和登入方式，等我確認。不要把 API 金鑰寫進命令或我會提交的檔案；問我金鑰應從哪裡取得。

檢視代理程式所依據的安裝指南

其他 MCP 客戶端

把它新增到你客戶端的 mcpServers 設定中。 客戶端會在首次連接時完成 OAuth 登入。

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

README

Flato Design MCP

Flato is the native canvas runtime for AI design.

Flato gives AI agents a live, editable visual canvas for design work. Through MCP, agents can create, inspect, revise, export to PNG, JPG, PDF, or image-only PPTX, and QA Flato projects while users keep full access to the browser editor.

Flato Design MCP connects Codex, Claude Code, Cursor, and other MCP-capable agents to that native canvas.

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

This repository is the official distribution package for setup docs, the base guide skill, Codex plugin packaging, examples, and registry/review metadata. It does not contain the Flato MCP server source code.

Positioning

Flato is the native canvas runtime for AI design, not a one-shot image generator or a static HTML deck generator. The MCP workflow is built around editable pages, structured blocks, fresh design context, explicit page and block ids, live editor handoff, and visual QA.

Use this package when you want an AI agent to operate Flato's editable visual canvas safely through MCP.

What's Included

  • skills/flato-design-mcp-guide: installable base guide skill for agents.
  • plugins/flato-design-mcp-codex: Codex plugin package with MCP config and the guide skill.
  • .agents/plugins/marketplace.json: Codex marketplace descriptor for this repo.
  • docs/: setup, OAuth, permissions, and troubleshooting notes.
  • registry/: MCP registry and platform review metadata drafts.
  • examples/prompts/: first prompts for testing the integration.

Codex Install

Codex can install this repo as a plugin marketplace:

bash
codex plugin marketplace add sologovision/flato-design-mcp --ref maincodex plugin add flato-design-mcp-codex@flato-design-mcpcodex mcp login flato-editor

Then open a new Codex conversation and verify:

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

See Codex setup.

Claude Code Install

Add the hosted Flato MCP server:

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

Then use the guide skill in skills/flato-design-mcp-guide.

See Claude Code setup.

Cursor And Other MCP Clients

Use the hosted MCP server URL:

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

Then follow the workflow in skills/flato-design-mcp-guide/SKILL.md.

See Cursor setup.

OAuth

Flato Design MCP uses browser OAuth. If needed, Flato asks you to sign in or create an account before authorization.

Do not paste Flato passwords, bearer tokens, refresh tokens, or local OAuth cache contents into an agent conversation.

See Authentication.

Account And Subscription

A Flato account is required for OAuth. A paid Flato subscription is not required to install, connect, or start using Flato Design MCP.

Some features, exports, higher usage, team/workspace capabilities, or paid image generation and editing may still depend on the authenticated user's Flato plan or credits. Agents should report plan or credit errors from MCP instead of asking users to subscribe in advance.

First Agent Workflow

After connecting Flato MCP, an agent should:

  1. Call flato_whoami.
  2. Create or select a project with flato_create_project, flato_use_project, or flato_use_share_link.
  3. Open the live Flato editor when requested.
  4. Poll flato_get_project_status until canWrite=true.
  5. Read flato://canvas/fundamentals-v1, or call flato_get_canvas_fundamentals if resource reading is unavailable.
  6. Call flato_get_design_context before any write.
  7. Use concrete page and block ids returned by fresh context reads.
  8. Inspect mcpFeedback after writes.
  9. Export important results with flato_export; use PNG or JPG preview exports for visual QA.

Interactions

Page-level interactions are authored through interactiveScript on flato_create_pages and flato_update_pages. Agents should rely on current MCP tool schemas and flato://canvas/fundamentals-v1 for the full interaction contract instead of copying static schema fragments from this repo.

Supported inline interaction events include click/input/change and desktop hover/mouse events such as onclick, onmouseover, onmouseout, onmouseenter, and onmouseleave. Hover is useful for desktop presentations; include click/tap behavior or a visible fallback when mobile touch users matter.

Verified Smoke Test

The v0.1.3 Codex plugin package uses the full guide skill and the current hosted Flato MCP contract.

The Codex install path has been verified with:

bash
codex plugin marketplace add sologovision/flato-design-mcp --ref maincodex plugin add flato-design-mcp-codex@flato-design-mcpcodex mcp login flato-editor

An independent Codex CLI session successfully called flato_whoami through the installed flato-editor MCP server without creating or editing any Flato project.

Screenshots

GitHub release

[Flato Design MCP GitHub release page]

Codex plugin install

[Codex plugin install verified]

Read-only MCP smoke test

[Read-only MCP smoke test passed]

Editable presentation canvas

[Editable presentation canvas in Flato]

Canvas editing and content tools

[Flato canvas editing and content tools]

AI-assisted canvas edits

[AI-assisted edits in the Flato canvas]

Codex working with the live canvas

[Codex working with the live Flato canvas]

Release Assets

GitHub releases attach:

  • flato-design-mcp-guide-vX.Y.Z.zip: installable base guide skill.
  • flato-design-mcp-codex-vX.Y.Z.zip: Codex plugin package.

Safety Principles

  • Do not ask users to paste passwords, bearer tokens, or local OAuth tokens.
  • Do not inspect local OAuth or token stores.
  • Do not guess pageId or blockId.
  • Do not claim generated assets are placed until a design write uses the returned asset URL.
  • Use backups before broad or risky edits.

Related Flato Docs

Support And Security

  • Use GitHub Issues for setup and documentation problems.
  • See SECURITY.md for security reporting guidance.
  • Do not include tokens, passwords, or private project content in public issues.

Roadmap

This is the base package. Scenario-specific skills such as flato-presentation-skill should build on this guide instead of duplicating the connection, OAuth, targeting, and safety workflow.

來源：README.md，提交 675a871

工具

0
該伺服器需要登入，因此 SourceWeft 無法在沒有帳號的情況下讀取其工具，也未收錄。已連接帳號所能看到的內容可能因帳號及其權限而異。

版本歷史

1
  1. v0.1.3最新Sep 16, 2026

評分

已滿足適用檢查項的 85%

該評分衡量此收錄條目的完整程度，依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價，也不表示伺服器安全或目前可用：可連通性是帶日期的檢查結果，評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通必需25 分
  • 已宣告認證方式必需10 分
  • 已列出工具15 分

    請讓伺服器在無憑證時回應 tools/list，或發布可在沙箱中無憑證啟動的軟體包。

  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分