> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Ejemplos de MCP

> Flujos de trabajo de extremo a extremo para tareas comunes de Flowstep 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.

<Note>
  `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.
</Note>

***

## 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.