MCP Misolları

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]

fileIdni o’tkazib yuborish yangi faylni avtomatik ravishda yaratadi. Ekranlari shu faylga qo’shish uchun mavjud fileIdni 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.

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.

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.

Boshlash

Flowstep’dan foydalanish

Jamoalar va tashkilotlar

Eksport va integratsiyalar

MCP serveri

Hisob-kitob va tariflar

Xavfsizlik va maxfiylik

1. Ekran yaratish va ko’rish

2. React komponentini vizualizatsiya qilish

3. MCP orqali yaratilgan ekranni takomillashtirish

4. Ekranni to’liq oqimga kengaytirish

5. Batch ish oldidan kvotani tekshirish

​1. Ekran yaratish va ko’rish

​2. React komponentini vizualizatsiya qilish

​3. MCP orqali yaratilgan ekranni takomillashtirish

​4. Ekranni to’liq oqimga kengaytirish

​5. Batch ish oldidan kvotani tekshirish

1. Ekran yaratish va ko’rish

2. React komponentini vizualizatsiya qilish

3. MCP orqali yaratilgan ekranni takomillashtirish

4. Ekranni to’liq oqimga kengaytirish

5. Batch ish oldidan kvotani tekshirish