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

# Exemples de l'MCP

> Fluxos de treball complets per a tasques comunes de Flowstep MCP.

## 1. Genereu i visualitzeu una pantalla

El fluxe de treball més comú: generar una pantalla (creant el fitxer al mateix pas), i després veure el resultat.

```
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]
```

Ometre `fileId` crea un fitxer nou automàticament. Passeu un `fileId` existent per afegir pantalles a aquest fitxer en comptes.

**Prompt per al vostre assistent IA:**

> Genereu un disseny de Flowstep: una pantalla de connexió mòbil per a una eina de desenvolupador amb camps de correu electrònic/contrasenya i un botó de Google SSO en tema fosc, i després mostreu-me la imatge.

***

## 2. Visualitzeu un component React

Pengeu un fitxer `.jsx` o `.tsx` com a adjunt i demaneu a Flowstep que generi un disseny coincident. Flowstep llegeix el codi font i produeix una pantalla — no cal executar l'aplicació.

```
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 per al vostre assistent IA:**

> Llegiu `src/components/settings/ApiKeys.tsx`, pengeu-la com a adjunt, i genereu una pantalla de Flowstep que coincideixi amb el disseny del component. Mostreu-me la imatge renderitzada.

***

## 3. Itereu en una pantalla generada per l'MCP

`edit-design` i `regenerate-design` requereixen context de disseny que només està present a les pantalles generades amb un array `designs`. Per a pantalles generades sense un, la solució és renderitzar la pantalla com a adjunt i cridar `create-new-design` amb la imatge.

```
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]
```

Per a pantalles que sí que tenen context de disseny, crideu `edit-design` directament amb el canvi en `message` i la pantalla en `targets`.

***

## 4. Expandiu una pantalla a un fluxe complet

Afegiu pantalles de seguiment a un disseny existent.

```
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]
```

Repetiu el pas 2 amb `operationVariant: "error_state"` o `"empty_state"` per afegir pantalles de casos límit.

<Note>
  `operationVariant` és un paràmetre obligatori per a `expand-design`. La pantalla base també ha d'haver estat generada amb un array `designs` (context de disseny) — per a pantalles sense un, utilitzeu la solució de l'adjunt de l'Exemple 3.
</Note>

***

## 5. Auditeu la quota abans d'una feina en lot

Comproveu la capacitat restant abans de posar en marxa múltiples generacions.

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

Si `daily` és baix, programeu el lot per després de les 00:00 UTC quan es reinicia.