> ## 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.

# Przykłady MCP

> Kompleksowe przepływy pracy dla typowych zadań Flowstep MCP.

## 1. Generowanie i podgląd ekranu

Najczęstszy przepływ pracy: generowanie ekranu (tworzenie pliku w tym samym kroku), a następnie wyświetlanie wyniku.

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

Pominięcie `fileId` automatycznie tworzy nowy plik. Aby dodać ekrany do istniejącego pliku, użyj istniejącego `fileId`.

**Monit dla Twojego asystenta AI:**

> Wygeneruj projekt Flowstep: ekran logowania mobilnego dla narzędzia programisty z polami email/hasło i przyciskiem Google SSO w ciemnym motywie, a następnie pokaż mi obraz.

***

## 2. Wizualizacja komponentu React

Prześlij plik `.jsx` lub `.tsx` jako załącznik i poproś Flowstep o wygenerowanie pasującego projektu. Flowstep czyta źródło i tworzy ekran — nie ma potrzeby uruchamiania aplikacji.

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

**Monit dla Twojego asystenta AI:**

> Przeczytaj `src/components/settings/ApiKeys.tsx`, prześlij go jako załącznik i wygeneruj ekran Flowstep odpowiadający układowi komponentu. Pokaż mi wyrenderowany obraz.

***

## 3. Iterowanie nad ekranem wygenerowanym przez MCP

`edit-design` i `regenerate-design` wymagają kontekstu projektu, który jest obecny tylko na ekranach wygenerowanych z tablicą `designs`. W przypadku ekranów wygenerowanych bez niej obejściem jest renderowanie ekranu jako załącznika i wywoływanie `create-new-design` z obrazem.

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

W przypadku ekranów, które mają kontekst projektu, bezpośrednio wywołaj `edit-design` ze zmianą w `message` i ekranem w `targets`.

***

## 4. Rozszerzenie ekranu do pełnego przepływu

Dodaj ekrany następujące do istniejącego projektu.

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

Powtórz krok 2 z `operationVariant: "error_state"` lub `"empty_state"` aby dodać ekrany przypadków brzegowych.

<Note>
  `operationVariant` jest wymaganym parametrem dla `expand-design`. Ekran bazowy musi zostać wygenerowany z tablicą `designs` (kontekst projektu) — w przypadku ekranów bez niej użyj obejścia z załącznikami z Przykładu 3.
</Note>

***

## 5. Kontrola limitu przed zadaniem wsadowym

Sprawdź pozostałą zdolność przed rozpoczęciem wielu generacji.

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

Jeśli `daily` jest niski, zaplanuj zadanie wsadowe na po 00:00 UTC, kiedy się resetuje.