Exemple MCP

1. Generați și previzualizați un ecran

Cel mai frecvent flux de lucru: generați un ecran (creând fișierul în același pas), apoi vizualizați rezultatul.

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]

Omiterea fileId creează automat un nou fișier. Transmiteți un fileId existent pentru a adăuga ecrane la acel fișier. Prompt pentru asistentul vostru AI:

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. Vizualizați o componentă React

Încărcați un fișier .jsx sau .tsx ca atașament și cereți Flowstep să genereze un design corespunzător. Flowstep citește sursa și produce un ecran — nu este nevoie să rulați aplicația.

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]

Prompt pentru asistentul vostru AI:

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. Iterați pe un ecran generat de MCP

edit-design și regenerate-design necesită context de design care este prezent doar pe ecranele generate cu un tablou designs. Pentru ecranele generate fără unul, soluția alternativă este redarea ecranului ca atașament și apelarea create-new-design cu imaginea.

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]

Pentru ecrane care au context de design, apelați direct edit-design cu schimbarea în message și ecranul în targets.

4. Extindeți un ecran la un flux complet

Adaugă ecrane suplimentare la un design existent.

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]

Repetați pasul 2 cu operationVariant: "error_state" sau "empty_state" pentru a adăuga ecrane de caz-limită.

operationVariant este un parametru obligatoriu pentru expand-design. Ecranul de bază trebuie, de asemenea, să fi fost generat cu un tablou designs (context de design) — pentru ecrane fără el, utilizați soluția alternativă cu atașament din Exemplul 3.

5. Auditați cota înainte de o lucrare în lot

Verificați capacitatea rămasă înainte de a iniția mai multe generări.

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

Dacă daily este scăzut, planificați lucrul în lot după 00:00 UTC când se resetează.

Primii pași

Utilizarea Flowstep

Echipe și organizații

Export și integrări

Server MCP

Facturare și planuri

Securitate și confidențialitate

1. Generați și previzualizați un ecran

2. Vizualizați o componentă React

3. Iterați pe un ecran generat de MCP

4. Extindeți un ecran la un flux complet

5. Auditați cota înainte de o lucrare în lot

​1. Generați și previzualizați un ecran

​2. Vizualizați o componentă React

​3. Iterați pe un ecran generat de MCP

​4. Extindeți un ecran la un flux complet

​5. Auditați cota înainte de o lucrare în lot

1. Generați și previzualizați un ecran

2. Vizualizați o componentă React

3. Iterați pe un ecran generat de MCP

4. Extindeți un ecran la un flux complet

5. Auditați cota înainte de o lucrare în lot