> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# MCP Példák

> Teljes körű munkafolyamatok gyakori Flowstep MCP feladatokhoz.

## 1. Képernyő generálása és megtekintése

A leggyakoribb munkafolyamat: egy képernyő generálása (az azonos lépésben a fájl létrehozása), majd az eredmény megtekintése.

```
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]
```

A `fileId` elhagyása automatikusan új fájlt hoz létre. Adj meg egy meglévő `fileId`-t, ha képernyőket szeretnél hozzáadni az adott fájlhoz.

**Prompt az AI asszisztensedhez:**

> Hozz létre egy Flowstep design-t: egy mobil bejelentkezési képernyőt egy fejlesztői eszközhez e-mail/jelszó és Google SSO gombbal sötét témában, majd mutasd meg az képet.

***

## 2. React komponens megjelenítése

Tölts fel egy `.jsx` vagy `.tsx` fájlt mellékletként, és kérd meg a Flowstep-et, hogy hozzon létre egy megfelelő design-t. A Flowstep beolvassa a forrást és egy képernyőt készít – nincs szükség az alkalmazás futtatására.

```
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 az AI asszisztensedhez:**

> Olvasd be a `src/components/settings/ApiKeys.tsx` fájlt, töltsd fel mellékletként, és hozz létre egy Flowstep képernyőt, amely megfelel a komponens elrendezésének. Mutasd meg az renderelt képet.

***

## 3. MCP-ből generált képernyő iterálása

Az `edit-design` és `regenerate-design` tervezési kontextust igényelnek, amely csak a `designs` tömbvel generált képernyőkön érhető el. A `designs` tömb nélkül generált képernyőkhöz a megoldás a képernyő mellékletként való renderelése és a `create-new-design` meghívása a képpel.

```
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]
```

A tervezési kontextussal rendelkező képernyőkhöz közvetlenül hívd meg az `edit-design`-t, a módosítással az `message` paraméterben és a képernyővel a `targets` paraméterben.

***

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

Adj hozzá követő képernyőket egy meglévő design-hoz.

```
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]
```

Ismételd meg a 2. lépést az `operationVariant: "error_state"` vagy `"empty_state"` paraméterrel az edge-case képernyők hozzáadásához.

<Note>
  Az `operationVariant` az `expand-design` szükséges paramétere. Az alapképernyőt is a `designs` tömbvel kell generálni (tervezési kontextus) – az ilyen nélkül generált képernyőkhöz használd a 3. Példa melléklet-megoldását.
</Note>

***

## 5. Kvóta ellenőrzése egy kötegfeladat előtt

Ellenőrizd a megmaradt kapacitást több generálás megkezdése előtt.

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

Ha a `daily` érték alacsony, ütemezd a kötegfeladatot az 00:00 UTC után, amikor visszaáll.