{
  "markdown": "# Flato Design MCP\n\nFlato is the native canvas runtime for AI design.\n\nFlato gives AI agents a live, editable visual canvas for design work. Through\nMCP, agents can create, inspect, revise, export to PNG, JPG, PDF, or image-only\nPPTX, and QA Flato projects while users keep full access to the browser editor.\n\nFlato Design MCP connects Codex, Claude Code, Cursor, and other MCP-capable\nagents to that native canvas.\n\n```text\nhttps://api.flato.ai/api/mcp/editor\n```\n\nThis repository is the official distribution package for setup docs, the base\nguide skill, Codex plugin packaging, examples, and registry/review metadata. It\ndoes not contain the Flato MCP server source code.\n\n## Positioning\n\nFlato is the native canvas runtime for AI design, not a one-shot image\ngenerator or a static HTML deck generator. The MCP workflow is built around\neditable pages, structured blocks, fresh design context, explicit page and\nblock ids, live editor handoff, and visual QA.\n\nUse this package when you want an AI agent to operate Flato's editable visual\ncanvas safely through MCP.\n\n## What's Included\n\n- `skills/flato-design-mcp-guide`: installable base guide skill for agents.\n- `plugins/flato-design-mcp-codex`: Codex plugin package with MCP config and the\n  guide skill.\n- `.agents/plugins/marketplace.json`: Codex marketplace descriptor for this\n  repo.\n- `docs/`: setup, OAuth, permissions, and troubleshooting notes.\n- `registry/`: MCP registry and platform review metadata drafts.\n- `examples/prompts/`: first prompts for testing the integration.\n\n## Codex Install\n\nCodex can install this repo as a plugin marketplace:\n\n```bash\ncodex plugin marketplace add sologovision/flato-design-mcp --ref main\ncodex plugin add flato-design-mcp-codex@flato-design-mcp\ncodex mcp login flato-editor\n```\n\nThen open a new Codex conversation and verify:\n\n```text\nUse Flato Design MCP. Call flato_whoami first and report the result. Do not create, edit, or write any project.\n```\n\nSee [Codex setup](docs/setup-codex.md).\n\n## Claude Code Install\n\nAdd the hosted Flato MCP server:\n\n```bash\nclaude mcp add --transport http flato-editor https://api.flato.ai/api/mcp/editor\n```\n\nThen use the guide skill in `skills/flato-design-mcp-guide`.\n\nSee [Claude Code setup](docs/setup-claude-code.md).\n\n## Cursor And Other MCP Clients\n\nUse the hosted MCP server URL:\n\n```text\nhttps://api.flato.ai/api/mcp/editor\n```\n\nThen follow the workflow in `skills/flato-design-mcp-guide/SKILL.md`.\n\nSee [Cursor setup](docs/setup-cursor.md).\n\n## OAuth\n\nFlato Design MCP uses browser OAuth. If needed, Flato asks you to sign in or\ncreate an account before authorization.\n\nDo not paste Flato passwords, bearer tokens, refresh tokens, or local OAuth\ncache contents into an agent conversation.\n\nSee [Authentication](docs/authentication.md).\n\n## Account And Subscription\n\nA Flato account is required for OAuth. A paid Flato subscription is not required\nto install, connect, or start using Flato Design MCP.\n\nSome features, exports, higher usage, team/workspace capabilities, or paid image\ngeneration and editing may still depend on the authenticated user's Flato plan\nor credits. Agents should report plan or credit errors from MCP instead of\nasking users to subscribe in advance.\n\n## First Agent Workflow\n\nAfter connecting Flato MCP, an agent should:\n\n1. Call `flato_whoami`.\n2. Create or select a project with `flato_create_project`,\n   `flato_use_project`, or `flato_use_share_link`.\n3. Open the live Flato editor when requested.\n4. Poll `flato_get_project_status` until `canWrite=true`.\n5. Read `flato://canvas/fundamentals-v1`, or call\n   `flato_get_canvas_fundamentals` if resource reading is unavailable.\n6. Call `flato_get_design_context` before any write.\n7. Use concrete page and block ids returned by fresh context reads.\n8. Inspect `mcpFeedback` after writes.\n9. Export important results with `flato_export`; use PNG or JPG preview exports\n   for visual QA.\n\n## Interactions\n\nPage-level interactions are authored through `interactiveScript` on\n`flato_create_pages` and `flato_update_pages`. Agents should rely on current\nMCP tool schemas and `flato://canvas/fundamentals-v1` for the full interaction\ncontract instead of copying static schema fragments from this repo.\n\nSupported inline interaction events include click/input/change and desktop\nhover/mouse events such as `onclick`, `onmouseover`, `onmouseout`,\n`onmouseenter`, and `onmouseleave`. Hover is useful for desktop presentations;\ninclude click/tap behavior or a visible fallback when mobile touch users matter.\n\n## Verified Smoke Test\n\nThe v0.1.3 Codex plugin package uses the full guide skill and the current\nhosted Flato MCP contract.\n\nThe Codex install path has been verified with:\n\n```bash\ncodex plugin marketplace add sologovision/flato-design-mcp --ref main\ncodex plugin add flato-design-mcp-codex@flato-design-mcp\ncodex mcp login flato-editor\n```\n\nAn independent Codex CLI session successfully called `flato_whoami` through the\ninstalled `flato-editor` MCP server without creating or editing any Flato\nproject.\n\n## Screenshots\n\n### GitHub release\n\n![Flato Design MCP GitHub release page](assets/screenshots/github-release-v0.1.0.png)\n\n### Codex plugin install\n\n![Codex plugin install verified](assets/screenshots/codex-install-success.png)\n\n### Read-only MCP smoke test\n\n![Read-only MCP smoke test passed](assets/screenshots/flato-whoami-smoke-test.png)\n\n### Editable presentation canvas\n\n![Editable presentation canvas in Flato](assets/screenshots/flato-canvas-1.png)\n\n### Canvas editing and content tools\n\n![Flato canvas editing and content tools](assets/screenshots/flato-canvas-2.png)\n\n### AI-assisted canvas edits\n\n![AI-assisted edits in the Flato canvas](assets/screenshots/flato-canvas-3.png)\n\n### Codex working with the live canvas\n\n![Codex working with the live Flato canvas](assets/screenshots/flato-canvas-4-withCodex.png)\n\n## Release Assets\n\nGitHub releases attach:\n\n- `flato-design-mcp-guide-vX.Y.Z.zip`: installable base guide skill.\n- `flato-design-mcp-codex-vX.Y.Z.zip`: Codex plugin package.\n\n## Safety Principles\n\n- Do not ask users to paste passwords, bearer tokens, or local OAuth tokens.\n- Do not inspect local OAuth or token stores.\n- Do not guess `pageId` or `blockId`.\n- Do not claim generated assets are placed until a design write uses the\n  returned asset URL.\n- Use backups before broad or risky edits.\n\n## Related Flato Docs\n\n- User docs: https://www.flato.ai/docs/mcp\n- Agent-readable guide: https://www.flato.ai/docs/mcp.md\n- Flato app: https://www.flato.ai\n- Privacy: https://www.flato.ai/docs/privacy-policy\n- Terms: https://www.flato.ai/docs/terms-of-use\n\n## Support And Security\n\n- Use GitHub Issues for setup and documentation problems.\n- See [SECURITY.md](SECURITY.md) for security reporting guidance.\n- Do not include tokens, passwords, or private project content in public issues.\n\n## Roadmap\n\nThis is the base package. Scenario-specific skills such as\n`flato-presentation-skill` should build on this guide instead of duplicating the\nconnection, OAuth, targeting, and safety workflow.\n",
  "bytes": 7046,
  "sha": "ace9f0806c1c9034a440f9b7806c3c6b437ad16e31a3275afbc1f94d03d9dd54",
  "repo_slug": "sologovision/flato-design-mcp",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_sologovision_flato_design_mcp_d64931f8/readme"
}