Skip to main content
Flowstep expone sus herramientas de diseño a través del Model Context Protocol, permitiendo que tu asistente de IA cree e itere sobre pantallas de UI sin salir de tu editor. El servidor está hospedado en https://api.flowstep.ai/mcp (transporte HTTP transmisible). No hay ningún proceso local que ejecutar.

Qué puedes hacer

El servidor expone 20 herramientas en siete categorías:

Casos de uso comunes

Generar pantallas a partir de un prompt — llama a create-new-design con una descripción. Flowstep crea el archivo y las pantallas en un paso. Llama a get-screen-image con los screenIds devueltos para ver el resultado en línea. Visualizar un componente React — carga tu archivo .jsx o .tsx mediante upload-attachment (utiliza mimeType: text/javascript), y luego pasa el archivo adjunto devuelto a create-new-design con un mensaje que describa el componente. Flowstep lee el código fuente y genera una pantalla de diseño coincidente. Iterar sobre un diseño — llama a edit-design con un screenId objetivo e instrucciones para modificarlo, o regenerate-design para rehacer una pantalla desde cero. Mantener directrices de diseño — llama a get-design-guidelines para recuperar tus reglas de estilo actuales (colores, tipografía, espaciado, tono), y luego usa update-design-guidelines para mantenerlas sincronizadas a medida que tu diseño evoluciona. Pasar directrices coherentes a create-new-design o edit-design asegura que todas las pantallas generadas mantengan la marca. Usa delete-design-guidelines para restablecerlas completamente. Importar desde Figma — llama a import-figma con un enlace de frame de Figma y un fileId para traer el frame a un archivo de Flowstep como elementos editables. La organización del archivo debe tener Figma conectado primero. Auditar cuota — llama a get-plan-details para ver el uso restante diario y mensual antes de iniciar un lote de generaciones.

Endpoint

Transporte: HTTP transmisible. Modelo de sesión: stateless (cada solicitud es independiente, sin ID de sesión).

Pasos siguientes

Inicio rápido

Primera llamada a herramienta en menos de 5 minutos con Cursor.

Autenticación

Cómo funciona OAuth 2.1 PKCE y cómo se emiten los tokens.

Herramientas

Referencia completa de entrada/salida para las 20 herramientas.

Ejemplos

Flujos de trabajo de extremo a extremo para tareas comunes.