Flato Design MCP server

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.

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

guide skill.

• skills/flato-design-mcp-guide: installable base guide skill for agents.
• plugins/flato-design-mcp-codex: Codex plugin package with MCP config and the

repo.

• .agents/plugins/marketplace.json: Codex marketplace descriptor for this

• 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:

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

Then open a new Codex conversation and verify:

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:

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:

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:

flatouseproject, or flatouseshare_link.

1. Call flato_whoami.
2. Create or select a project with flatocreateproject,

flatogetcanvas_fundamentals if resource reading is unavailable.

1. Open the live Flato editor when requested.
2. Poll flatogetproject_status until canWrite=true.
3. Read flato://canvas/fundamentals-v1, or call

for visual QA.

1. Call flatogetdesign_context before any write.
2. Use concrete page and block ids returned by fresh context reads.
3. Inspect mcpFeedback after writes.
4. Export important results with flato_export; use PNG or JPG preview exports

Interactions

Shortened. The full README is on GitHub.