> ## 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 Misolları

> Flowstep MCP bilan ishlash uchun oxirdan oxiriga iş oqimlari.

## 1. Ekran yaratish va ko'rish

Eng ko'p uchraydigan iş oqimi: ekran yaratish (bir qadamda fayl yaratish), keyin natijani ko'rish.

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

`fileId`ni o'tkazib yuborish yangi faylni avtomatik ravishda yaratadi. Ekranlari shu faylga qo'shish uchun mavjud `fileId`ni o'tkazib yuboring.

**AI yordamchisiga so'rov:**

> Flowstep dizayni yarating: mobil sign-in ekrani (e-pochtani/parolni kiritish maydonlari va Google SSO tugmasi bilan) qora rangga bo'yalgan dasturchini uchun asbob, keyin menga rasmni ko'rsating.

***

## 2. React komponentini vizualizatsiya qilish

`.jsx` yoki `.tsx` faylni ilova sifatida yuklang va Flowstep undan mos keladigan dizayn yaratishini so'rang. Flowstep manba kodini o'qiydi va ekran hosil qiladi — ilovani ishga tushirish shart emas.

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

**AI yordamchisiga so'rov:**

> `src/components/settings/ApiKeys.tsx` ni o'qing, uni ilova sifatida yuklang va komponent maketiga mos keladigan Flowstep ekranini yarating. Menga rendered rasmni ko'rsating.

***

## 3. MCP orqali yaratilgan ekranni takomillashtirish

`edit-design` va `regenerate-design` faqat `designs` massivi bilan yaratilgan ekranlarda mavjud bo'lgan dizayn kontekstini talab qiladi. Bunday massivi siz yaratilmagan ekranlar uchun workaround quyidagicha: ekranni ilova sifatida rendered qilib, `create-new-design` ni rasm bilan chaqiring.

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

Dizayn kontekstiga ega ekranlar uchun `edit-design` ni bevosita chaqiring: `message` da o'zgartirishlarni, `targets` da ekranni belgilang.

***

## 4. Ekranni to'liq oqimga kengaytirish

Mavjud dizayniga keyingi ekranlarni qo'shish.

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

Chet holatlari ekranlarini qo'shish uchun 2-qadamni `operationVariant: "error_state"` yoki `"empty_state"` bilan takrorlang.

<Note>
  `operationVariant` - `expand-design` uchun majburiy parametr. Asosiy ekran ham `designs` massivi (dizayn konteksti) bilan yaratilgan bo'lishi kerak — agar unda bo'lmasa, 3-misoldan ilova workaround dan foydalaning.
</Note>

***

## 5. Batch ish oldidan kvotani tekshirish

Bir nechta yaratishlarni boshlashdan oldin qolgan sig'imni tekshiring.

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

Agar `daily` qiymati kam bo'lsa, batch ishlashni 00:00 UTC dan keyin, u qayta o'rnatilganda jadvallang.