> ## 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 piemēri

> Pilnas darbplūsmas biežākiem Flowstep MCP uzdevumiem.

## 1. Ģenerējiet un priekšskatiet ekrānu

Visbiežāk izmantotā darbplūsma: ģenerējiet ekrānu (fails tiek izveidots tajā pašā solī) un pēc tam apskatiet rezultātu.

```
1. list-files           {}
                        → { "files": [ ... ] }          // check for an existing file first

2. ai-generate-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]
```

Ja izlaižat `fileId`, fails tiek izveidots automātiski. Norādiet esošu `fileId`, lai ekrānus pievienotu šim failam.

**Uzvedne jūsu AI asistentam:**

> Ģenerējiet Flowstep dizainu: mobilo pierakstīšanās ekrānu izstrādes rīkam ar e-pasta un paroles laukiem un Google SSO pogu tumšajā motīvā. Pēc tam parādiet man attēlu.

***

## 2. Vizualizējiet React komponenti

Augšupielādējiet `.jsx` vai `.tsx` failu kā pielikumu un lūdziet Flowstep ģenerēt atbilstošu dizainu. Flowstep nolasa pirmkodu un izveido ekrānu. Nav jāpalaiž lietotne.

```
1. upload-attachment    { "text": "<UTF-8 contents of ApiKeys.tsx>",
                          "mimeType": "text/javascript" }
                        → { "id": "ATT_ID", "path": "...", "type": "document",
                            "mimeType": "text/javascript" }

2. ai-generate-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]
```

Ja pirmkoda faili ir garāki par 64 000 rakstzīmēm, tā vietā izmantojiet `upload-attachment` ar `mimeType` un `fileName` un izpildiet atgriezto `uploadCommand`. Skatiet [`upload-attachment`](/lv/mcp/tools#upload-attachment).

**Uzvedne jūsu AI asistentam:**

> Izlasiet `src/components/settings/ApiKeys.tsx`, augšupielādējiet to kā pielikumu un ģenerējiet Flowstep ekrānu, kas atbilst komponentes izkārtojumam. Parādiet man renderēto attēlu.

***

## 3. Iterējiet pār ekrānu

Mainiet esošu ekrānu vietā, izmantojot brīvas formas norādījumus.

```
1. list-screens      { "fileId": "FILE_ID" }
                     → { "screens": [{ "screenId": "SCREEN_ID", "name": "Sign-in", ... }] }

2. ai-edit-screens   { "fileId": "FILE_ID",
                       "message": "Change the color scheme to dark mode and
                                   add a 'Remember me' checkbox below the password field.",
                       "elementIds": ["SCREEN_ID"] }
                     → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"], ... }

3. get-screen-image  { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                     → [inline PNG]
```

Lai mainītu tikai daļu no ekrāna, vispirms izsauciet `get-screen-jsx` ar `"includeIds": true` un nododiet `elementIds` lauka vērtībās elementa `data-id`, ko vēlaties mainīt.

Lai veselam ekrānam pielietotu vienu klikšķi priekšiestatījumu, tā vietā izsauciet `ai-edit-screen-variant`, piemēram, ar `"operationVariant": "light_theme"` vai `"different_layout"`.

**Uzvedne jūsu AI asistentam:**

> Manā Flowstep failā "Login flow" pārslēdziet pierakstīšanās ekrānu uz tumšo režīmu un pievienojiet izvēles rūtiņu "Remember me" zem paroles lauka. Parādiet man rezultātu.

***

## 4. Izvērsiet ekrānu līdz pilnai plūsmai

Pievienojiet turpmākos ekrānus esošam dizainam.

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

Atkārtojiet 2. soli ar `operationVariant: "error_state"` vai `"empty_state"`, lai pievienotu malas gadījumu ekrānus, vai ar `"web_version"` vai `"tablet_version"` citām platformām.

<Note>
  `operationVariant` ir obligāts `ai-generate-screen-variant` rīkam, un rīks pieņem tieši vienu `screenId`. Lai pievienotu ekrānu, kas nav esoša ekrāna variants, izmantojiet `ai-generate-screens` ar `fileId`.
</Note>

***

## 5. Nododiet ekrānu savai kodu bāzei un pēc tam rakstiet izmaiņas atpakaļ

Nolasiet ekrānu kā JSX, veidojiet no tā un nosūtiet rediģēto JSX atpakaļ audeklam, un tas viss notiek bez ziņojumu izmantošanas.

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

Izlaistie lauki (`name`, `fidelity`, `screenType`, `colorTheme`, `fragments`) saglabā savas pašreizējās vērtības. Lai saglabātu oriģinālu un blakus tam pievienotu savu versiju, izsauciet `add-screen-jsx` ar `screenType` un `jsx`, nevis `replace-screen-jsx`.

***

## 6. Pārbaudiet savu limitu pirms partijas uzdevuma

Pārbaudiet atlikušo jaudu, pirms sākat vairākas ģenerācijas. `get-plan-details` izsaukums ir bez maksas.

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

Ja `remaining.messages.daily` ir zems, ieplānojiet partiju pēc plkst. 00:00 UTC, kad tas tiek atiestatīts.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.