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

“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.”

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.

Per iniziare

Usare Flowstep

Team e organizzazioni

Esportazione e integrazioni

Server MCP

Fatturazione e piani

Sicurezza e privacy

1. Genera e visualizza una schermata

2. Visualizza un componente React

3. Itera su una schermata generata da MCP

4. Espandi una schermata a un flusso completo

5. Verifica la quota prima di un lavoro batch

​1. Genera e visualizza una schermata

​2. Visualizza un componente React

​3. Itera su una schermata generata da MCP

​4. Espandi una schermata a un flusso completo

​5. Verifica la quota prima di un lavoro batch

1. Genera e visualizza una schermata

2. Visualizza un componente React

3. Itera su una schermata generata da MCP

4. Espandi una schermata a un flusso completo

5. Verifica la quota prima di un lavoro batch