Příklady MCP

1. Vygenerujte a zobrazte náhled obrazovky

Nejběžnější pracovní postup: vygenerujte obrazovku (soubor se v tomto kroku vytvoří) a poté zobrazte výsledek.

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]

Vynechání fileId automaticky vytvoří nový soubor. Pokud chcete obrazovky přidat do existujícího souboru, předejte jeho fileId. Prompt pro váš AI asistent:

Vygenerujte návrh ve Flowstepu: mobilní přihlašovací obrazovku pro vývojářský nástroj s poli pro e-mail a heslo a tlačítkem Google SSO v tmavém motivu. Potom mi ukažte obrázek.

2. Vizualizujte komponentu React

Nahrajte soubor .jsx nebo .tsx jako přílohu a požádejte Flowstep o vygenerování odpovídajícího návrhu. Flowstep přečte zdrojový kód a vytvoří obrazovku. Aplikaci nemusíte spouštět.

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]

U zdrojových souborů delších než 64 000 znaků místo toho použijte upload-attachment s mimeType a fileName a spusťte vrácený uploadCommand. Viz upload-attachment. Prompt pro váš AI asistent:

Přečtěte si src/components/settings/ApiKeys.tsx, nahrajte jej jako přílohu a vygenerujte obrazovku Flowstep, která odpovídá rozvržení komponenty. Ukažte mi vykreslený obrázek.

3. Iterujte nad obrazovkou

Změňte existující obrazovku na místě pomocí volných instrukcí a ve stejném volání přidejte novou obrazovku, která na ni navazuje.

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 obsahuje každou obrazovku, kterou volání vytvořilo nebo změnilo, takže zavolejte get-screen-image pro každou z nich. Chcete-li pouze upravit existující obrazovku, vynechte poslední větu zprávy. Chcete-li změnit jen část obrazovky, nejdřív zavolejte get-screen-jsx s "includeIds": true a v elementIds předejte data-id prvku, který chcete změnit. Pro jednoklikovou předvolbu celé obrazovky zavolejte místo toho ai-edit-screen-variant, například s "operationVariant": "light_theme" nebo "different_layout". Prompt pro váš AI asistent:

V souboru „Login flow“ ve Flowstepu přepněte přihlašovací obrazovku do tmavého motivu, pod pole pro heslo přidejte zaškrtávací políčko „Remember me“ a přidejte odpovídající obrazovku pro zapomenuté heslo. Ukažte mi výsledky.

4. Rozšiřte obrazovku na celý tok

Přidejte navazující obrazovky k existujícímu návrhu.

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]

Opakujte krok 2 s operationVariant: "error_state" nebo "empty_state", chcete-li přidat obrazovky okrajových případů. Pro jiné platformy použijte "web_version" nebo "tablet_version".

operationVariant je u ai-generate-screen-variant povinný a nástroj přijímá přesně jedno screenId. Chcete-li přidat obrazovku, která není variantou existující obrazovky, použijte ai-design-screens s fileId.

5. Předejte obrazovku do kódu a zapište změny zpět

Přečtěte si obrazovku jako JSX, postavte na ní a upravený JSX zapište zpět na plátno. Nepoužijete přitom žádné zprávy.

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]

Vynechaná pole (name, fidelity, screenType, colorTheme, fragments) si zachovají aktuální hodnoty. Chcete-li původní obrazovku zachovat a vedle ní přidat svou verzi, zavolejte add-screen-jsx s screenType a jsx místo replace-screen-jsx. Chcete-li na obrazovku umístit vlastní obrázek, nahrajte jej pomocí upload-attachment a vložte vrácený assetUrl do img src ve svém JSX. Viz Obrázky v JSX.

6. Před dávkovou úlohou zkontrolujte svůj limit

Před spuštěním více generací zkontrolujte zbývající kapacitu. get-plan-details je zdarma.

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

Pokud je remaining.messages.daily nízko, naplánujte dávku na dobu po 00:00 UTC, kdy se limit resetuje.

Začínáme

Používání Flowstep

Týmy a organizace

Export a integrace

MCP server

Fakturace a tarify

Zabezpečení a soukromí

1. Vygenerujte a zobrazte náhled obrazovky

2. Vizualizujte komponentu React

3. Iterujte nad obrazovkou

4. Rozšiřte obrazovku na celý tok

5. Předejte obrazovku do kódu a zapište změny zpět

6. Před dávkovou úlohou zkontrolujte svůj limit

​1. Vygenerujte a zobrazte náhled obrazovky

​2. Vizualizujte komponentu React

​3. Iterujte nad obrazovkou

​4. Rozšiřte obrazovku na celý tok

​5. Předejte obrazovku do kódu a zapište změny zpět

​6. Před dávkovou úlohou zkontrolujte svůj limit

1. Vygenerujte a zobrazte náhled obrazovky

2. Vizualizujte komponentu React

3. Iterujte nad obrazovkou

4. Rozšiřte obrazovku na celý tok

5. Předejte obrazovku do kódu a zapište změny zpět

6. Před dávkovou úlohou zkontrolujte svůj limit