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

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.

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.

Premiers pas

Utiliser Flowstep

Équipes et organisations

Export et intégrations

Serveur MCP

Facturation et forfaits

Sécurité et confidentialité

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

2. Visualisez un composant React

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

4. Étendez un écran à un flux complet

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

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

​2. Visualisez un composant React

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

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

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

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

2. Visualisez un composant React

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

4. Étendez un écran à un flux complet

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