Exemples de MCP

1. Genera i previsualitza una pantalla

El flux de treball més habitual: genera una pantalla (creant el fitxer en el mateix pas) i després mira’n el resultat.

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]

Si omets fileId, es crea un fitxer nou automàticament. Passa un fileId existent per afegir-hi pantalles. Prompt per a l’assistent d’IA:

Genera un disseny de Flowstep: una pantalla d’inici de sessió per a mòbil per a una eina de desenvolupament, amb correu electrònic i contrasenya i un botó de Google SSO en tema fosc, i després mostra’m la imatge.

2. Visualitza un component de React

Puja un fitxer .jsx o .tsx com a adjunt i demana a Flowstep que generi un disseny equivalent. Flowstep llegeix el codi font i produeix una pantalla, sense necessitat d’executar l’aplicació.

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]

Per a fitxers de codi font de més de 64.000 caràcters, fes servir upload-attachment amb mimeType i fileName i executa el uploadCommand retornat. Consulta upload-attachment. Prompt per a l’assistent d’IA:

Llegeix src/components/settings/ApiKeys.tsx, puja’l com a adjunt i genera una pantalla de Flowstep que coincideixi amb la disposició del component. Mostra’m la imatge renderitzada.

3. Itera sobre una pantalla

Canvia una pantalla existent in situ amb instruccions de text lliure i, en la mateixa crida, afegeix una pantalla nova que hi concordi.

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 enumera totes les pantalles que la crida ha construït o canviat, de manera que has de cridar get-screen-image una vegada per a cadascuna. Omet l’última frase del missatge si només vols editar la pantalla existent. Per canviar només una part d’una pantalla, crida primer get-screen-jsx amb "includeIds": true i passa el data-id de l’element que vols canviar a elementIds. Per aplicar una preconfiguració amb un clic a una pantalla completa, crida ai-edit-screen-variant en lloc seu, per exemple amb "operationVariant": "light_theme" o "different_layout". Prompt per a l’assistent d’IA:

Al meu fitxer de Flowstep “Login flow”, canvia la pantalla d’inici de sessió a mode fosc, afegeix una casella “Remember me” sota el camp de contrasenya i afegeix una pantalla de recuperació de contrasenya que hi concordi. Mostra’m els resultats.

4. Amplia una pantalla fins a un flux complet

Afegeix pantalles posteriors a un disseny existent.

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]

Repeteix el pas 2 amb operationVariant: "error_state" o "empty_state" per afegir pantalles de casos límit, o "web_version" / "tablet_version" per a altres plataformes.

operationVariant és obligatori per a ai-generate-screen-variant, i l’eina accepta exactament un screenId. Per afegir una pantalla que no sigui una variant d’una d’existent, fes servir ai-design-screens amb un fileId.

5. Lliura una pantalla al teu codi i després escriu-hi els canvis

Llegeix una pantalla com a JSX, construeix a partir d’ella i torna el JSX editat al llenç, tot sense fer servir missatges.

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]

Els camps omesos (name, fidelity, screenType, colorTheme, fragments) conserven els seus valors actuals. Per conservar l’original i afegir la teva versió al costat, crida add-screen-jsx amb screenType i jsx en lloc de replace-screen-jsx. Per mostrar una imatge pròpia a la pantalla, puja-la amb upload-attachment i posa el assetUrl retornat en un img src al teu JSX. Consulta Imatges en JSX.

6. Comprova la quota abans d’un treball per lots

Comprova la capacitat restant abans d’iniciar diverses generacions. get-plan-details és gratuït de cridar.

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

Si remaining.messages.daily és baix, programa el lot per després de les 00:00 UTC, quan es reinicia.

Primers passos

Ús de Flowstep

Equips i organitzacions

Exportació i integracions

Servidor MCP

Facturació i plans

Seguretat i privadesa

1. Genera i previsualitza una pantalla

2. Visualitza un component de React

3. Itera sobre una pantalla

4. Amplia una pantalla fins a un flux complet

5. Lliura una pantalla al teu codi i després escriu-hi els canvis

6. Comprova la quota abans d’un treball per lots

​1. Genera i previsualitza una pantalla

​2. Visualitza un component de React

​3. Itera sobre una pantalla

​4. Amplia una pantalla fins a un flux complet

​5. Lliura una pantalla al teu codi i després escriu-hi els canvis

​6. Comprova la quota abans d’un treball per lots

1. Genera i previsualitza una pantalla

2. Visualitza un component de React

3. Itera sobre una pantalla

4. Amplia una pantalla fins a un flux complet

5. Lliura una pantalla al teu codi i després escriu-hi els canvis

6. Comprova la quota abans d’un treball per lots