Exemples MCP

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

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

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

2. ai-generate-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]

Si vous omettez fileId, un nouveau fichier est créé automatiquement. Transmettez un fileId existant pour ajouter des écrans à ce fichier. Prompt pour votre assistant IA :

Generate a Flowstep design: a mobile sign-in screen for a developer tool with email/password and a Google SSO button in dark theme, then show me the image.

2. Visualiser un composant React

Importez un fichier .jsx ou .tsx comme pièce jointe, puis demandez à Flowstep de générer une conception correspondante. Flowstep lit le code source et produit un écran, sans qu’il soit nécessaire de lancer l’application.

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

2. ai-generate-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 pour votre assistant IA :

Read src/components/settings/ApiKeys.tsx, upload it as an attachment, and generate a Flowstep screen that matches the component layout. Show me the rendered image.

3. Itérer sur un écran

Modifiez un écran existant sur place à l’aide d’instructions libres.

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

2. ai-edit-screens   { "fileId": "FILE_ID",
                       "message": "Change the color scheme to dark mode and
                                   add a 'Remember me' checkbox below the password field.",
                       "elementIds": ["SCREEN_ID"] }
                     → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"], ... }

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

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 appliquer un préréglage en un clic à un écran entier, appelez plutôt ai-edit-screen-variant, par exemple avec "operationVariant": "light_theme" ou "different_layout". Prompt pour votre assistant IA :

In my “Login flow” Flowstep file, switch the sign-in screen to dark mode and add a “Remember me” checkbox below the password field. Show me the result.

4. Développer un écran en flux complet

Ajoutez des écrans suivants à 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" / "tablet_version" pour d’autres plateformes.

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

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

Lisez un écran sous forme de JSX, développez à 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.

6. Vérifier votre quota avant un traitement par lots

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

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

Si remaining.messages.daily est faible, planifiez le traitement par lots après 00:00 UTC, moment de la réinitialisation.

Premiers pas

Utiliser Flowstep

Équipes et organisations

Export 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. Itérer sur 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 quota avant un traitement par lots

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

​2. Visualiser un composant React

​3. Itérer sur 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 quota avant un traitement par lots

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

2. Visualiser un composant React

3. Itérer sur 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 quota avant un traitement par lots