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

> End-to-end workflows til almindelige Flowstep MCP-opgaver.

## 1. Generer og forhåndsvis en skærm

Det mest almindelige workflow: generer en skærm (opret filen samtidigt), og se derefter resultatet.

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

Hvis du udelader `fileId`, oprettes en ny fil automatisk. Angiv et eksisterende `fileId` for at tilføje skærme til den fil i stedet.

**Prompt til din AI-assistent:**

> Generer et Flowstep-design: en mobilindskaldstagsskærm for et udviklerværktøj med email/adgangskode og en Google SSO-knap i mørk tema, vis derefter billedet.

***

## 2. Visualiser en React-komponent

Upload en `.jsx` eller `.tsx`-fil som vedhæftet fil, og bed Flowstep om at generere et matchende design. Flowstep læser kilden og producerer en skærm – du behøver ikke at køre appen.

```
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 til din AI-assistent:**

> Læs `src/components/settings/ApiKeys.tsx`, upload det som vedhæftet fil, og generer en Flowstep-skærm, der matcher komponentlayoutet. Vis mig det gengivne billede.

***

## 3. Iterer på en MCP-genereret skærm

`edit-design` og `regenerate-design` kræver designkontekst, som kun er til stede på skærme genereret med et `designs`-array. For skærme genereret uden det, er løsningen at gengive skærmen som vedhæftet fil og kalde `create-new-design` med billedet.

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

For skærme, der har designkontekst, skal du kalde `edit-design` direkte med ændringen i `message` og skærmen i `targets`.

***

## 4. Udvid en skærm til et fuldt flow

Tilføj efterfølgende skærme til et eksisterende design.

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

Gentag trin 2 med `operationVariant: "error_state"` eller `"empty_state"` for at tilføje edge-case-skærme.

<Note>
  `operationVariant` er en påkrævet parameter for `expand-design`. Basiskærmen skal også være genereret med et `designs`-array (designkontekst) – for skærme uden det skal du bruge workaround'et for vedhæftede filer fra eksempel 3.
</Note>

***

## 5. Revider kvote før et batchjob

Tjek resterende kapacitet, før du starter flere genereringer.

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

Hvis `daily` er lav, skal du planlægge batchen efter 00:00 UTC, når det nulstilles.