MCP-példák

1. Képernyő generálása és előnézete

A leggyakoribb munkafolyamat: generálj egy képernyőt (a fájl ugyanabban a lépésben jön létre), majd nézd meg az eredményt.

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]

Ha a fileId mezőt kihagyod, a rendszer automatikusan létrehoz egy új fájlt. Ha meglévő fileId-t adsz meg, a képernyők ahhoz a fájlhoz kerülnek. Prompt az AI-asszisztensednek:

Generálj egy Flowstep-tervet: egy mobil bejelentkező képernyőt egy fejlesztői eszközhöz, e-mail/jelszó mezőkkel és Google SSO gombbal, sötét témában, majd mutasd meg a képet.

2. React-komponens vizualizálása

Tölts fel egy .jsx vagy .tsx fájlt mellékletként, és kérd meg a Flowstepet, hogy generáljon hozzá illeszkedő tervet. A Flowstep beolvassa a forrást, és képernyőt készít. Nem kell futtatni az alkalmazást.

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]

A 64 000 karakternél hosszabb forrásfájloknál használd helyette az upload-attachment eszközt a mimeType és a fileName megadásával, majd futtasd a visszaadott uploadCommand parancsot. Lásd: upload-attachment. Prompt az AI-asszisztensednek:

Olvasd be a src/components/settings/ApiKeys.tsx fájlt, töltsd fel mellékletként, és generálj egy Flowstep-képernyőt, amely illeszkedik a komponens elrendezéséhez. Mutasd meg a renderelt képet.

3. Képernyő iterálása

Változtass meg egy meglévő képernyőt helyben szabad formájú utasításokkal, és ugyanabban a hívásban adj hozzá egy hozzá illeszkedő új képernyőt.

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]

A screenIds listázza az összes képernyőt, amelyet a hívás épített vagy módosított, ezért minden képernyőhöz hívd meg egyszer a get-screen-image eszközt. Ha csak a meglévő képernyőt szeretnéd szerkeszteni, hagyd ki az üzenet utolsó mondatát. Egy képernyő egy részének módosításához előbb hívd meg a get-screen-jsx eszközt a "includeIds": true paraméterrel, majd az elementIds mezőben add meg a módosítani kívánt elem data-id értékét. Egy teljes képernyő egykattintásos előbeállításához használd helyette az ai-edit-screen-variant eszközt, például a "operationVariant": "light_theme" vagy a "different_layout" értékkel. Prompt az AI-asszisztensednek:

A „Login flow” nevű Flowstep-fájlomban kapcsold át a bejelentkező képernyőt sötét módba, adj a jelszómező alá egy „Remember me” jelölőnégyzetet, és készíts hozzá egy illeszkedő elfelejtett jelszó képernyőt. Mutasd meg az eredményt.

4. Képernyő kibővítése teljes folyamattá

Adj hozzá további képernyőket egy meglévő tervhez.

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]

Ismételd meg a 2. lépést operationVariant: "error_state" vagy "empty_state" értékkel, hogy szélsőséges esetekre szolgáló képernyőket adj hozzá. A "web_version" vagy a "tablet_version" értékkel más platformokhoz készíthetsz változatot.

Az operationVariant kötelező az ai-generate-screen-variant eszköznél, és az eszköz pontosan egy screenId-t fogad. Ha olyan képernyőt szeretnél hozzáadni, amely nem egy meglévő képernyő változata, használd az ai-design-screens eszközt a fileId megadásával.

5. Képernyő átadása a kódbázisnak, majd a változtatások visszaírása

Olvass be egy képernyőt JSX-ként, építs belőle, és írd vissza a szerkesztett JSX-et a vászonra. Mindezt üzenetek felhasználása nélkül teheted meg.

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]

A kihagyott mezők (name, fidelity, screenType, colorTheme, fragments) megtartják a jelenlegi értéküket. Ha az eredetit meg szeretnéd tartani, és a saját verziódat mellé szeretnéd tenni, a replace-screen-jsx helyett hívd az add-screen-jsx eszközt a screenType és a jsx mezőkkel. Ha a saját képedet szeretnéd megjeleníteni a képernyőn, töltsd fel az upload-attachment eszközzel, és a visszakapott assetUrl értéket illeszd be egy img src attribútumba a JSX-edben. Lásd: Képek a JSX-ben.

6. Ellenőrizd a kvótádat kötegelt feladat előtt

Ellenőrizd a hátralévő kapacitást, mielőtt több generálást indítasz. A get-plan-details hívása ingyenes.

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

Ha a remaining.messages.daily érték alacsony, ütemezd a köteget 00:00 UTC után, amikor a napi kvóta visszaáll.

Első lépések

A Flowstep használata

Csapatok és szervezetek

Exportálás és integrációk

MCP-szerver

Számlázás és csomagok

Biztonság és adatvédelem

1. Képernyő generálása és előnézete

2. React-komponens vizualizálása

3. Képernyő iterálása

4. Képernyő kibővítése teljes folyamattá

5. Képernyő átadása a kódbázisnak, majd a változtatások visszaírása

6. Ellenőrizd a kvótádat kötegelt feladat előtt

​1. Képernyő generálása és előnézete

​2. React-komponens vizualizálása

​3. Képernyő iterálása

​4. Képernyő kibővítése teljes folyamattá

​5. Képernyő átadása a kódbázisnak, majd a változtatások visszaírása

​6. Ellenőrizd a kvótádat kötegelt feladat előtt

1. Képernyő generálása és előnézete

2. React-komponens vizualizálása

3. Képernyő iterálása

4. Képernyő kibővítése teljes folyamattá

5. Képernyő átadása a kódbázisnak, majd a változtatások visszaírása

6. Ellenőrizd a kvótádat kötegelt feladat előtt