Flato MCP
Instala Flato MCP con un agente de IA
Copia esta instrucción en Claude Code, Codex, Cursor u otro agente compatible con MCP. El agente debe leer la guía Markdown, instalar Flato MCP, autorizarse, verificar la conexión y seguir el flujo de abajo.
Please read this Flato MCP guide, install Flato MCP, trigger OAuth authorization when needed, guide me through the browser confirmation, verify the connection with flato_whoami, then follow the agent workflow in the guide. Important Codex App rule: after adding flato-editor or completing codex mcp login, the current Codex conversation may not hot-load newly added MCP tools. If flato_* tools are unavailable in this same conversation, stop and ask me to open a new Codex conversation or restart Codex App; do not inspect local OAuth/token stores or manually extract bearer tokens. When a project returns waiting_for_live_editor_bridge or needs_open_editor, have the MCP host/client open editorUrl automatically when supported, and only ask me to open editorUrl if the host cannot open URLs. Markdown guide: https://www.flato.ai/docs/mcp.md Es la ruta más corta cuando quieres que el agente haga la configuración por ti. El resto de la página es la guía de instalación y checklist de ejecución.
Flato ofrece un runtime de lienzo AI-native para diseño con IA, donde agentes de IA y personas co-crean presentaciones editables y contenido visual en un flujo continuo.
Flato MCP conecta Claude Code, Codex, Cursor y otros agentes compatibles con MCP al runtime de lienzo AI-native de Flato. Los agentes pueden crear y actualizar diseños editables como presentaciones, posters y visuales sociales, mientras los usuarios abren el editor web, hacen ajustes manuales, exportan PDFs o imágenes, comparten enlaces y siguen colaborando con IA en el mismo proyecto.
Qué hace Flato MCP
Flato MCP da a un agente externo acceso controlado al runtime de lienzo AI-native de Flato:
- Crear un proyecto de diseño editable y guardado.
- Tomar control de una URL de editor o un enlace compartido existente.
- Leer el lienzo actual, páginas, bloques, estilos y feedback de layout.
- Crear y actualizar presentaciones, posters, visuales sociales y otros formatos de diseño.
- Permitir que el usuario abra el editor en vivo, edite manualmente, exporte, comparta y siga colaborando con IA.
- Mantener cada cambio de IA dentro del mismo proyecto vivo, en lugar de generar archivos desconectados.
Instalar Flato MCP
Usa esta URL HTTP de servidor MCP al añadir Flato a una herramienta de IA para código:
https://api.flato.ai/api/mcp/editor Autorización inicial
Añadir el servidor MCP solo guarda la configuración de conexión. En la mayoría de clientes, la ventana OAuth de Flato se abre cuando la herramienta de IA llama por primera vez al servidor Flato MCP, no al guardar la configuración.
Si no se abre una ventana del navegador después de instalar, pide a tu herramienta de IA que active la autorización de Flato MCP llamando a mcp_auth o flato_whoami. Cuando la autorización termine, pídele que llame de nuevo a flato_whoami para confirmar la conexión.
Claude Code
Ejecuta este comando en tu terminal:
claude mcp add --transport http flato https://api.flato.ai/api/mcp/editor Después escribe /mcp en una sesión de Claude Code para iniciar el flujo de inicio de sesión OAuth. Claude Code abre el navegador para autorizar Flato cuando llama por primera vez al servidor Flato MCP.
Codex App
En Codex App, añade esta configuración directa del servidor MCP Streamable HTTP a ~/.codex/config.toml:
[mcp_servers.flato-editor]
url = "https://api.flato.ai/api/mcp/editor"
tool_timeout_sec = 120 Después de añadir el servidor, abre una nueva conversación en Codex o reinicia Codex App. Si OAuth no empieza automáticamente, ejecuta codex mcp login flato-editor. OAuth se completa en el navegador; no pidas usuario, contraseña ni Authorization header de Flato. Un plugin personal de Codex queda solo para demos locales heredadas, no para la instalación normal de Flato MCP.
Cursor
Abre Cursor Settings > MCP y añade un nuevo servidor, o agrega esto a ~/.cursor/mcp.json:
{
"mcpServers": {
"flato": {
"type": "http",
"url": "https://api.flato.ai/api/mcp/editor"
}
}
} La autenticación se gestiona con OAuth. Cursor normalmente abre el navegador para autorizar Flato en la primera llamada real a una herramienta MCP. Si Cursor carga el servidor pero no aparece la ventana OAuth, pide a Cursor Agent que llame a mcp_auth o flato_whoami.
Flujo del agente después de instalar
Después de instalar Flato MCP, el agente debe:
- Activar OAuth si todavía no se ha autorizado.
- Llamar a flato_whoami para confirmar auth e inspeccionar el estado del proyecto/editor.
- Para un nuevo diseño, elegir un projectName breve para el usuario y llamar a flato_create_project.
- Para una URL de editor, llamar a flato_use_project con el projectUrl completo.
- Para un enlace compartido, llamar a flato_use_share_link con el shareUrl completo.
- Si el estado devuelto es waiting_for_live_editor_bridge, entregar al usuario el editorUrl devuelto, detenerse y esperar a que lo abra.
- Llamar a flato_get_project_status hasta que canWrite=true.
- Llamar a flato_get_design_context antes de crear, editar o exportar.
Tomar control de una URL de Flato
Si alguien entrega a tu agente una URL de proyecto Flato como https://www.flato.ai/editor/<projectId>, instala y autoriza Flato MCP, y luego pide al agente llamar a flato_use_project con ese projectUrl completo.
Si alguien entrega una URL compartida como https://www.flato.ai/share/<shareId>, pide al agente llamar a flato_use_share_link con ese shareUrl completo. Flato MCP crea una copia editable del proyecto en la cuenta autorizada y devuelve un nuevo editorUrl.
Si flato_use_share_link no está disponible en un cliente MCP antiguo, abre el enlace compartido, usa Edit a copy y pide al agente llamar a flato_use_project con la URL del editor copiado.
Crear un proyecto nuevo
Para un trabajo nuevo, pide al agente elegir un projectName breve y claro para el usuario y llamar a flato_create_project.
Cuando flato_create_project, flato_use_project o flato_use_share_link devuelve waiting_for_live_editor_bridge, el agente debe darte el editorUrl devuelto, detenerse y esperar a que lo abras. Después de cargar el editor, debe llamar a flato_get_project_status hasta canWrite=true y luego a flato_get_design_context antes de hacer cambios.
Aviso sobre el uso de Credits
Flato MCP no consume Flato Credits por los tokens usados por tu agente de IA local, como Claude Code, Codex, Cursor u otros clientes MCP.
Flato Credits se consumen solo cuando se usan funciones de generación con IA o procesamiento de medios del lado de Flato. Las ediciones manuales del lienzo, como cambiar texto, ajustar el layout, mover elementos o recortar imágenes, no consumen Credits.
Algunas funciones de Flato requieren una suscripción activa, como la exportación MPEG, vectorizer y generación de video. La disponibilidad sigue las reglas actuales de la plataforma; las demás funciones MCP y de la plataforma compatibles son gratuitas salvo que se indique lo contrario.
El uso local del modelo o API lo factura tu agente de IA o proveedor de servicios de IA, no Flato Credits.