Saltar al contenido principal
Flowstep es el lienzo de diseño para software creado por agentes. El servidor MCP de Flowstep expone ese lienzo a través del Model Context Protocol, para que los agentes que tu equipo ya usa puedan diseñar pantallas, revisar el resultado renderizado y construir a partir de él, sin salir del editor ni de la terminal. Las pantallas que un agente crea mediante MCP se guardan en los mismos archivos de Flowstep en los que trabaja tu equipo. Siguen siendo editables en el lienzo, se pueden compartir y están listas para exportar o copiar a Figma. El servidor está alojado en https://api.flowstep.ai/mcp (transporte Streamable HTTP). No necesitas ejecutar ningún proceso local ni gestionar ninguna clave de API. Los clientes inician sesión con tu cuenta de Flowstep mediante OAuth.

​
Qué puedes hacer

El servidor expone 22 herramientas en ocho categorías: Las tres herramientas de Diseño con IA usan la misma asignación de mensajes que la app de Flowstep. Todas las demás herramientas son gratuitas. Consulta Límites de uso.

​
Casos de uso comunes

Generar pantallas a partir de un prompt: llama a ai-design-screens con una descripción. Si omites fileId, Flowstep crea el archivo y las pantallas en un solo paso. Llama a get-screen-image para cada screenId devuelto y ver el resultado en línea. Visualizar un componente de React: sube tu código fuente .jsx o .tsx con upload-attachment (mimeType: text/javascript) y, después, pasa el adjunto devuelto a ai-design-screens con un mensaje que describa la pantalla. Flowstep lee el código fuente y genera un diseño que coincide con él. Iterar sobre un diseño: llama a ai-design-screens con uno o más screenId (o ids de elementos individuales) en elementIds e instrucciones libres para cambiarlos en su lugar. La misma llamada también puede añadir pantallas nuevas, así que una solicitud puede editar una pantalla y construir la siguiente. Usa ai-edit-screen-variant para aplicar un preajuste, como un tema oscuro o una disposición diferente, a una pantalla completa. Ampliar un flujo: llama a ai-generate-screen-variant para añadir la siguiente pantalla, un estado de error o vacío, o una versión web, de tablet o móvil de una pantalla existente. Trabajar primero con código: lee cualquier pantalla como JSX con get-screen-jsx y, después, escribe tu propio JSX con add-screen-jsx (pantalla nueva) o replace-screen-jsx (sobrescribir una existente). Para usar tus propias imágenes, súbelas con upload-attachment y pon el assetUrl devuelto en tu JSX. Estas herramientas son gratuitas. Mantener la coherencia con la marca: usa update-design-guidelines para guardar tus colores, tipografía y reglas de componentes en un archivo como texto DESIGN.md. Las generaciones de IA basadas en ese archivo los respetan. Léelos con get-design-guidelines o bórralos con delete-design-guidelines. Importar desde Figma: llama a import-figma con un enlace de marco de Figma y un fileId para traer el marco al lienzo como elementos editables. La organización del archivo debe tener Figma conectado primero. Consultar tu asignación: llama a get-plan-details para ver tu plan, tu uso y los mensajes restantes antes de lanzar un lote de generaciones.

​
Endpoint

Transporte: Streamable HTTP. Modelo de sesión: sin estado (cada solicitud es independiente y no hay ID de sesión). El servidor admite la versión 2026-07-28 del protocolo MCP, que anuncia en https://api.flowstep.ai/.well-known/mcp.json. Los clientes que usan la versión anterior del protocolo, 2025-11-25, se conectan al mismo endpoint.

​
Próximos pasos

Inicio rápido

Conecta un cliente y ejecuta tu primera llamada a una herramienta.

Autenticación

Cómo funcionan el inicio de sesión OAuth 2.1 PKCE y la aprobación.

Herramientas

Referencia completa de entradas y salidas de las 22 herramientas.

Ejemplos

Flujos de trabajo de principio a fin para tareas comunes.