Exemple MCP

1. Generează și previzualizează un ecran

Cel mai comun flux de lucru: generezi un ecran (creând fișierul în același pas), apoi vezi rezultatul.

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]

Dacă omiți fileId, se creează automat un fișier nou. Transmite un fileId existent ca să adaugi ecrane în acel fișier. Prompt pentru asistentul AI:

Generează un design Flowstep: un ecran mobil de autentificare pentru un instrument de dezvoltare, cu câmpuri email/parolă și un buton Google SSO, în tema întunecată, apoi arată-mi imaginea.

2. Vizualizează o componentă React

Încarcă un fișier .jsx sau .tsx ca atașament și cere Flowstep să genereze un design care se potrivește. Flowstep citește sursa și produce un ecran. Nu este nevoie să rulezi aplicația.

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]

Pentru fișiere sursă mai lungi de 64.000 de caractere, folosește în schimb upload-attachment cu mimeType și fileName și rulează uploadCommand returnat. Consultă upload-attachment. Prompt pentru asistentul AI:

Citește src/components/settings/ApiKeys.tsx, încarcă-l ca atașament și generează un ecran Flowstep care se potrivește cu structura componentei. Arată-mi imaginea randată.

3. Iterează pe un ecran

Modifică un ecran existent pe loc, cu instrucțiuni libere, și, în același apel, adaugă un ecran nou care se potrivește cu el.

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 enumeră fiecare ecran pe care apelul l-a construit sau modificat, deci apelează get-screen-image o dată pentru fiecare. Omite ultima propoziție din mesaj ca să modifici doar ecranul existent. Pentru a modifica doar o parte a unui ecran, apelează mai întâi get-screen-jsx cu "includeIds": true, apoi transmite în elementIds data-id-ul elementului pe care vrei să îl modifici. Pentru o presetare cu un singur clic aplicată unui ecran întreg, apelează în schimb ai-edit-screen-variant, de exemplu cu "operationVariant": "light_theme" sau "different_layout". Prompt pentru asistentul AI:

În fișierul Flowstep „Login flow”, treci ecranul de autentificare în tema întunecată, adaugă o casetă de bifare „Remember me” sub câmpul pentru parolă și adaugă un ecran de recuperare a parolei care se potrivește. Arată-mi rezultatele.

4. Extinde un ecran într-un flux complet

Adaugă ecrane următoare la un design 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]

Repetă pasul 2 cu operationVariant: "error_state" sau "empty_state" ca să adaugi ecrane pentru cazuri-limită, sau cu "web_version" ori "tablet_version" pentru alte platforme.

operationVariant este obligatoriu pentru ai-generate-screen-variant, iar instrumentul primește exact un singur screenId. Ca să adaugi un ecran care nu este o variantă a unuia existent, folosește ai-design-screens cu un fileId.

5. Transferă un ecran în baza de cod, apoi scrie modificările înapoi

Citește un ecran ca JSX, construiește pornind de la el și trimite JSX-ul editat înapoi pe canvas, fără să folosești mesaje.

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]

Câmpurile omise (name, fidelity, screenType, colorTheme, fragments) își păstrează valorile curente. Ca să păstrezi originalul și să adaugi versiunea ta alături de el, apelează add-screen-jsx cu screenType și jsx în loc de replace-screen-jsx. Ca să afișezi propria imagine în ecran, încarcă-o cu upload-attachment și pune assetUrl-ul returnat într-un img src din JSX-ul tău. Consultă Imagini în JSX.

6. Verifică limita înainte de o sarcină în lot

Verifică capacitatea rămasă înainte să pornești mai multe generări. get-plan-details se poate apela gratuit.

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

Dacă remaining.messages.daily este scăzut, programează lotul după ora 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. Generează și previzualizează un ecran

2. Vizualizează o componentă React

3. Iterează pe un ecran

4. Extinde un ecran într-un flux complet

5. Transferă un ecran în baza de cod, apoi scrie modificările înapoi

6. Verifică limita înainte de o sarcină în lot

​1. Generează și previzualizează un ecran

​2. Vizualizează o componentă React

​3. Iterează pe un ecran

​4. Extinde un ecran într-un flux complet

​5. Transferă un ecran în baza de cod, apoi scrie modificările înapoi

​6. Verifică limita înainte de o sarcină în lot

1. Generează și previzualizează un ecran

2. Vizualizează o componentă React

3. Iterează pe un ecran

4. Extinde un ecran într-un flux complet

5. Transferă un ecran în baza de cod, apoi scrie modificările înapoi

6. Verifică limita înainte de o sarcină în lot