Ejemplos de MCP

1. Generar y previsualizar una pantalla

El flujo de trabajo más común: generar una pantalla (creando el archivo en el mismo paso), luego ver el resultado.

1. create-new-design { "message": "Mobile sign-in screen for a developer tool.
                                  Email/password fields, Google SSO button, dark theme." }
                     → { "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"] }

2. get-screen-image  { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                     → [inline PNG]

Omitir fileId crea un nuevo archivo automáticamente. Pasa un fileId existente para agregar pantallas a ese archivo en su lugar. Prompt para tu asistente de IA:

Genera un diseño de Flowstep: una pantalla de inicio de sesión móvil para una herramienta de desarrollador con campos de correo electrónico/contraseña y un botón de SSO de Google en tema oscuro, luego muéstrame la imagen.

2. Visualizar un componente React

Carga un archivo .jsx o .tsx como archivo adjunto y pide a Flowstep que genere un diseño coincidente. Flowstep lee la fuente y produce una pantalla — no es necesario ejecutar la aplicación.

1. upload-attachment  { "fileData": "<UTF-8 contents of ApiKeys.tsx>",
                        "fileName": "ApiKeys.tsx",
                        "mimeType": "text/javascript" }
                      → { "id": "ATT_ID", "path": "...", "type": "document",
                          "mimeType": "text/javascript" }

2. create-new-design  { "message": "Generate a desktop screen that matches this React component.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "document" }] }
                      → { "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"] }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]

Prompt para tu asistente de IA:

Lee src/components/settings/ApiKeys.tsx, cárgalo como archivo adjunto y genera una pantalla de Flowstep que coincida con el diseño del componente. Muéstrame la imagen renderizada.

3. Iterar en una pantalla generada por MCP

edit-design y regenerate-design requieren contexto de diseño que solo está presente en pantallas generadas con un array designs. Para pantallas generadas sin uno, la solución alternativa es renderizar la pantalla como archivo adjunto y llamar a create-new-design con la imagen.

1. upload-attachment  { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → { "id": "ATT_ID", "path": "...", "type": "image", "mimeType": "image/jpeg" }

2. create-new-design  { "fileId": "FILE_ID",
                        "message": "Change the color scheme to dark mode and
                                    add a 'Remember me' checkbox below the password field.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "image" }] }
                      → { "fileId": "FILE_ID", "screenIds": ["NEW_SCREEN_ID"] }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "NEW_SCREEN_ID" }
                      → [inline PNG]

Para pantallas que sí tienen contexto de diseño, llama a edit-design directamente con el cambio en message y la pantalla en targets.

4. Expandir una pantalla a un flujo completo

Agrega pantallas de seguimiento a un diseño existente.

1. list-screens   { "fileId": "FILE_ID" }
                  → [{ "screenId": "BASE_SCREEN_ID", "prompt": "Sign-in screen", ... }]

2. expand-design  { "fileId": "FILE_ID",
                    "message": "Add the next screen in the user flow",
                    "operationVariant": "next_screen",
                    "targets": ["BASE_SCREEN_ID"] }
                  → { "fileId": "FILE_ID", "screenIds": ["NEXT_SCREEN_ID"] }

3. get-screen-image { "fileId": "FILE_ID", "screenId": "NEXT_SCREEN_ID" }
                    → [inline PNG]

Repite el paso 2 con operationVariant: "error_state" o "empty_state" para agregar pantallas de casos extremos.

operationVariant es un parámetro obligatorio para expand-design. La pantalla base también debe haber sido generada con un array designs (contexto de diseño) — para pantallas sin él, usa la solución alternativa de archivos adjuntos del Ejemplo 3.

5. Auditar cuota antes de un trabajo por lotes

Comprueba la capacidad restante antes de iniciar múltiples generaciones.

get-plan-details {}
→ {
    "remaining": {
      "messages": { "daily": 38, "monthly": 413 }
    }
  }

Si daily es bajo, programa el lote para después de las 00:00 UTC cuando se restablezca.

Primeros pasos

Uso de Flowstep

Equipos y organizaciones

Exportación e integraciones

Servidor MCP

Facturación y planes

Seguridad y privacidad

1. Generar y previsualizar una pantalla

2. Visualizar un componente React

3. Iterar en una pantalla generada por MCP

4. Expandir una pantalla a un flujo completo

5. Auditar cuota antes de un trabajo por lotes

​1. Generar y previsualizar una pantalla

​2. Visualizar un componente React

​3. Iterar en una pantalla generada por MCP

​4. Expandir una pantalla a un flujo completo

​5. Auditar cuota antes de un trabajo por lotes

1. Generar y previsualizar una pantalla

2. Visualizar un componente React

3. Iterar en una pantalla generada por MCP

4. Expandir una pantalla a un flujo completo

5. Auditar cuota antes de un trabajo por lotes