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

> Flux de travail complets pour les tâches courantes de Flowstep MCP.

## 1. Générez et prévisualisez un écran

Le flux de travail le plus courant : générez un écran (en créant le fichier dans la même étape), puis visualisez le résultat.

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

L'omission de `fileId` crée un nouveau fichier automatiquement. Transmettez un `fileId` existant pour ajouter des écrans à ce fichier à la place.

**Invite pour votre assistant IA :**

> Générez une conception Flowstep : un écran de connexion mobile pour un outil de développeur avec des champs de connexion par e-mail/mot de passe et un bouton Google SSO en thème sombre, puis affichez-moi l'image.

***

## 2. Visualisez un composant React

Téléchargez un fichier `.jsx` ou `.tsx` en tant que pièce jointe et demandez à Flowstep de générer une conception correspondante. Flowstep lit la source et produit un écran — pas besoin d'exécuter l'application.

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

**Invite pour votre assistant IA :**

> Lisez `src/components/settings/ApiKeys.tsx`, téléchargez-le en tant que pièce jointe, et générez un écran Flowstep qui correspond à la mise en page du composant. Affichez-moi l'image rendue.

***

## 3. Itérez sur un écran généré par MCP

`edit-design` et `regenerate-design` nécessitent un contexte de conception qui n'est présent que sur les écrans générés avec un tableau `designs`. Pour les écrans générés sans, la solution de contournement consiste à rendre l'écran en tant que pièce jointe et à appeler `create-new-design` avec l'image.

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

Pour les écrans qui ont un contexte de conception, appelez `edit-design` directement avec la modification dans `message` et l'écran dans `targets`.

***

## 4. Étendez un écran à un flux complet

Ajoutez des écrans de suivi à une conception existante.

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

Répétez l'étape 2 avec `operationVariant: "error_state"` ou `"empty_state"` pour ajouter des écrans de cas limites.

<Note>
  `operationVariant` est un paramètre requis pour `expand-design`. L'écran de base doit également avoir été généré avec un tableau `designs` (contexte de conception) — pour les écrans sans, utilisez la solution de contournement de pièce jointe de l'exemple 3.
</Note>

***

## 5. Auditez le quota avant une tâche par lot

Vérifiez la capacité restante avant de lancer plusieurs générations.

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

Si `daily` est faible, programmez le lot après 00:00 UTC quand il réinitialise.