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

# Esempi MCP

> Flussi di lavoro end-to-end per comuni attività Flowstep MCP.

## 1. Genera e visualizza una schermata

Il flusso di lavoro più comune: genera una schermata (creando il file nello stesso passaggio), quindi visualizza il risultato.

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

Omettendo `fileId` crea automaticamente un nuovo file. Passa un `fileId` esistente per aggiungere schermate a quel file invece.

**Prompt al tuo assistente AI:**

> Genera un design Flowstep: una schermata di accesso mobile per uno strumento per sviluppatori con email/password e un pulsante SSO Google in tema scuro, quindi mostrami l'immagine.

***

## 2. Visualizza un componente React

Carica un file `.jsx` o `.tsx` come allegato e chiedi a Flowstep di generare un design corrispondente. Flowstep legge il sorgente e produce una schermata — non è necessario eseguire l'app.

```
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 al tuo assistente AI:**

> Leggi `src/components/settings/ApiKeys.tsx`, caricalo come allegato, e genera una schermata Flowstep che corrisponda al layout del componente. Mostrami l'immagine renderizzata.

***

## 3. Itera su una schermata generata da MCP

`edit-design` e `regenerate-design` richiedono un contesto di design che è presente solo su schermate generate con un array `designs`. Per le schermate generate senza uno, la soluzione è renderizzare la schermata come allegato e chiamare `create-new-design` con l'immagine.

```
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 le schermate che hanno un contesto di design, chiama `edit-design` direttamente con la modifica in `message` e la schermata in `targets`.

***

## 4. Espandi una schermata a un flusso completo

Aggiungi schermate successive a un design esistente.

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

Ripeti il passaggio 2 con `operationVariant: "error_state"` o `"empty_state"` per aggiungere schermate di casi limite.

<Note>
  "`operationVariant` è un parametro obbligatorio per `expand-design`. La schermata di base deve essere stata generata anche con un array `designs` (contesto di design) — per le schermate senza uno, usa la soluzione di allegato dall'Esempio 3."
</Note>

***

## 5. Verifica la quota prima di un lavoro batch

Verifica la capacità rimanente prima di avviare più generazioni.

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

Se `daily` è basso, pianifica il batch dopo le 00:00 UTC quando si ripristina.