Exemples MCP

1. Générer et prévisualiser un écran

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

1. list-files         {}
                      → { "files": [ ... ] }          // check for an existing file first

2. ai-design-screens  { "message": "Mobile sign-in screen for a developer tool.
                                    Email/password fields, Google SSO button, dark theme." }
                      → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"],
                          "designGuidelinesUpdated": null }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]

Omettre fileId crée automatiquement un nouveau fichier. Transmettez un fileId existant pour ajouter plutôt des écrans à ce fichier. Prompt à votre assistant IA :

Générez une conception Flowstep : un écran de connexion mobile pour un outil pour développeurs, avec des champs courriel et mot de passe, un bouton Google SSO et un thème sombre, puis affichez-moi l’image.

2. Visualiser un composant React

Téléversez un fichier .jsx ou .tsx comme pièce jointe, puis demandez à Flowstep de générer une conception correspondante. Flowstep lit la source et produit un écran; il n’est pas nécessaire d’exécuter l’application.

1. upload-attachment  { "text": "<UTF-8 contents of ApiKeys.tsx>",
                        "mimeType": "text/javascript" }
                      → { "id": "ATT_ID", "path": "...", "assetUrl": "...", "type": "document",
                          "mimeType": "text/javascript" }

2. ai-design-screens  { "message": "Generate a desktop screen that matches this React component.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "document" }] }
                      → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"], ... }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]

Pour les fichiers source de plus de 64 000 caractères, utilisez plutôt upload-attachment avec mimeType et fileName, puis exécutez la uploadCommand renvoyée. Consultez upload-attachment. Prompt à votre assistant IA :

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

3. Modifier un écran

Modifiez un écran existant sur place à l’aide d’instructions libres, et, dans le même appel, ajoutez un nouvel écran qui lui correspond.

1. list-screens       { "fileId": "FILE_ID" }
                      → { "screens": [{ "screenId": "SCREEN_ID", "name": "Sign-in", ... }] }

2. ai-design-screens  { "fileId": "FILE_ID",
                        "message": "Edit this sign-in screen: switch it to dark mode and add a
                                    'Remember me' checkbox below the password field. Then add a
                                    matching forgot-password screen.",
                        "elementIds": ["SCREEN_ID"] }
                      → { "status": "generated", "fileId": "FILE_ID",
                          "screenIds": ["SCREEN_ID", "NEW_SCREEN_ID"], ... }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]
   get-screen-image   { "fileId": "FILE_ID", "screenId": "NEW_SCREEN_ID" }
                      → [inline PNG]

screenIds énumère chaque écran construit ou modifié par l’appel. Appelez donc get-screen-image une fois pour chacun. Omettez la dernière phrase du message si vous voulez seulement modifier l’écran existant. Pour ne modifier qu’une partie d’un écran, appelez d’abord get-screen-jsx avec "includeIds": true, puis transmettez le data-id de l’élément à modifier dans elementIds. Pour un préréglage en un clic sur tout un écran, appelez plutôt ai-edit-screen-variant, par exemple avec "operationVariant": "light_theme" ou "different_layout". Prompt à votre assistant IA :

Dans mon fichier Flowstep « Login flow », passez l’écran de connexion en mode sombre, ajoutez une case à cocher « Remember me » sous le champ du mot de passe, puis ajoutez un écran de mot de passe oublié qui lui correspond. Affichez-moi les résultats.

4. Développer un écran en flux complet

Ajoutez des écrans de suite à une conception existante.

1. list-screens                { "fileId": "FILE_ID" }
                               → { "screens": [{ "screenId": "BASE_SCREEN_ID", "prompt": "Sign-in screen", ... }] }

2. ai-generate-screen-variant  { "fileId": "FILE_ID",
                                 "screenId": "BASE_SCREEN_ID",
                                 "operationVariant": "next_screen" }
                               → { "status": "generated", "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, ou avec "web_version" ou "tablet_version" pour d’autres plateformes.

operationVariant est obligatoire pour ai-generate-screen-variant, et l’outil prend exactement un screenId. Pour ajouter un écran qui n’est pas une variante d’un écran existant, utilisez ai-design-screens avec un fileId.

5. Transmettre un écran à votre base de code, puis réintégrer vos modifications

Lisez un écran en JSX, bâtissez à partir de celui-ci, puis renvoyez votre JSX modifié sur le canevas, sans utiliser de messages.

1. get-screen-jsx      { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → { "name": "Settings", "fidelity": "ui", "screenType": "web",
                           "colorTheme": "default", "jsx": "<div ...>...</div>", "fragments": [] }

2. replace-screen-jsx  { "fileId": "FILE_ID", "screenId": "SCREEN_ID",
                         "jsx": "<div ...>...edited...</div>" }
                       → { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }

3. get-screen-image    { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → [inline PNG]

Les champs omis (name, fidelity, screenType, colorTheme, fragments) conservent leurs valeurs actuelles. Pour conserver l’original et ajouter votre version à côté, appelez add-screen-jsx avec screenType et jsx au lieu de replace-screen-jsx. Pour afficher votre propre image dans l’écran, téléversez-la avec upload-attachment et placez le assetUrl renvoyé dans un img src de votre JSX. Consultez Images dans le JSX.

6. Vérifier votre allocation avant un travail par lots

Vérifiez la capacité restante avant de lancer plusieurs générations. get-plan-details est gratuit à appeler.

get-plan-details {}
→ { "plan": { ... }, "subscription": { ... }, "limits": { ... }, "usage": { ... },
    "remaining": { "messages": { "daily": ..., "monthly": ... } } }

Si remaining.messages.daily est faible, planifiez le lot après 00 h 00 UTC, moment de la réinitialisation.

Premiers pas

Utiliser Flowstep

Équipes et organisations

Exportation et intégrations

Serveur MCP

Facturation et forfaits

Sécurité et confidentialité

1. Générer et prévisualiser un écran

2. Visualiser un composant React

3. Modifier un écran

4. Développer un écran en flux complet

5. Transmettre un écran à votre base de code, puis réintégrer vos modifications

6. Vérifier votre allocation avant un travail par lots

​1. Générer et prévisualiser un écran

​2. Visualiser un composant React

​3. Modifier un écran

​4. Développer un écran en flux complet

​5. Transmettre un écran à votre base de code, puis réintégrer vos modifications

​6. Vérifier votre allocation avant un travail par lots

1. Générer et prévisualiser un écran

2. Visualiser un composant React

3. Modifier un écran

4. Développer un écran en flux complet

5. Transmettre un écran à votre base de code, puis réintégrer vos modifications

6. Vérifier votre allocation avant un travail par lots