MCP misollari

1. Ekranni yarating va ko‘ring

Eng keng tarqalgan ish oqimi: ekranni yarating (shu qadamda faylni ham yaratgan holda), so‘ng natijani ko‘ring.

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

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

fileId ni chiqarib tashlasangiz, yangi fayl avtomatik yaratiladi. Ekranlarni mavjud faylga qo‘shish uchun uning fileId ini uzating. AI yordamchingizga prompt:

Flowstep dizayni yarating: dasturchilar vositasi uchun mobil kirish ekrani, email/password maydonlari va Google SSO tugmasi bilan, qorong‘i mavzuda. So‘ng rasmni ko‘rsating.

2. React komponentini vizualizatsiya qiling

.jsx yoki .tsx faylni biriktirma sifatida yuklang va Flowstep’dan mos dizayn yaratishni so‘rang. Flowstep manba kodini o‘qiydi va ekran yaratadi — ilovani ishga tushirish shart emas.

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

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

64,000 belgidan uzun manba fayllar uchun, buning o‘rniga mimeType va fileName bilan upload-attachment dan foydalaning va qaytarilgan uploadCommand ni ishga tushiring. Qarang: upload-attachment. AI yordamchingizga prompt:

src/components/settings/ApiKeys.tsx faylini o‘qing, uni biriktirma sifatida yuklang va komponent tuzilishiga mos Flowstep ekranini yarating. Renderlangan rasmni ko‘rsating.

3. Ekranni takomillashtiring

Mavjud ekranni erkin ko‘rsatmalar bilan joyida o‘zgartiring — va shu chaqiruvda unga mos yangi ekran qo‘shing.

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

2. ai-design-screens  { "fileId": "FILE_ID",
                        "message": "Edit this sign-in screen: switch it to dark mode and add a
                                    'Remember me' checkbox below the password field. Then add a
                                    matching forgot-password screen.",
                        "elementIds": ["SCREEN_ID"] }
                      → { "status": "generated", "fileId": "FILE_ID",
                          "screenIds": ["SCREEN_ID", "NEW_SCREEN_ID"], ... }

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

screenIds chaqiruv qurgan yoki o‘zgartirgan har bir ekranni ro‘yxatlaydi, shuning uchun har biri uchun get-screen-image ni bir marta chaqiring. Faqat mavjud ekranni tahrirlash uchun xabarning oxirgi jumlasini qoldiring. Ekranning faqat bir qismini o‘zgartirish uchun avval "includeIds": true bilan get-screen-jsx ni chaqiring va o‘zgartirmoqchi bo‘lgan elementning data-id ini elementIds da uzating. Butun ekran uchun bir bosishli tayyor sozlama kerak bo‘lsa, buning o‘rniga ai-edit-screen-variant ni chaqiring — masalan, "operationVariant": "light_theme" yoki "different_layout". AI yordamchingizga prompt:

“Login flow” Flowstep faylimda kirish ekranini qorong‘i rejimga o‘tkazing, parol maydoni ostiga “Remember me” belgisini qo‘shing va unga mos parolni unutish ekranini qo‘shing. Natijalarni ko‘rsating.

4. Ekranni to‘liq oqimga kengaytiring

Mavjud dizaynga keyingi ekranlarni qo‘shing.

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]

Chekka holat ekranlarini qo‘shish uchun 2-qadamni operationVariant: "error_state" yoki "empty_state" bilan takrorlang, yoki boshqa platformalar uchun "web_version" yoki "tablet_version" ni ishlating.

operationVariant ai-generate-screen-variant uchun majburiy, va vosita aniq bitta screenId qabul qiladi. Mavjud ekranning variant bo‘lmagan ekranini qo‘shish uchun fileId bilan ai-design-screens dan foydalaning.

5. Ekranni kod bazangizga bering, so‘ng o‘zgarishlarni qaytaring

Ekranni JSX sifatida o‘qing, undan kod yarating va tahrirlangan JSX ni kanvasga qaytaring — buning uchun xabarlardan foydalanmasdan.

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]

Qoldirilgan maydonlar (name, fidelity, screenType, colorTheme, fragments) joriy qiymatlarini saqlaydi. Asl nusxani saqlab, uning yoniga o‘z versiyangizni qo‘shish uchun replace-screen-jsx o‘rniga screenType va jsx bilan add-screen-jsx ni chaqiring. Ekranda o‘z rasmingizni ko‘rsatish uchun uni upload-attachment bilan yuklang va qaytgan assetUrl ni JSX ingizdagi img src ga qo‘ying. Qarang: JSX ichidagi rasmlar.

6. Paketli ishdan oldin limitingizni tekshiring

Bir nechta generatsiyani boshlashdan oldin qolgan imkoniyatingizni tekshiring. get-plan-details ni chaqirish bepul.

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

Agar remaining.messages.daily past bo‘lsa, paketli ishni 00:00 UTC dan keyin rejalashtiring — o‘shanda u qayta tiklanadi.

Boshlash

Flowstep’dan foydalanish

Jamoalar va tashkilotlar

Eksport va integratsiyalar

MCP serveri

Hisob-kitob va tariflar

Xavfsizlik va maxfiylik

1. Ekranni yarating va ko‘ring

2. React komponentini vizualizatsiya qiling

3. Ekranni takomillashtiring

4. Ekranni to‘liq oqimga kengaytiring

5. Ekranni kod bazangizga bering, so‘ng o‘zgarishlarni qaytaring

6. Paketli ishdan oldin limitingizni tekshiring

​1. Ekranni yarating va ko‘ring

​2. React komponentini vizualizatsiya qiling

​3. Ekranni takomillashtiring

​4. Ekranni to‘liq oqimga kengaytiring

​5. Ekranni kod bazangizga bering, so‘ng o‘zgarishlarni qaytaring

​6. Paketli ishdan oldin limitingizni tekshiring

1. Ekranni yarating va ko‘ring

2. React komponentini vizualizatsiya qiling

3. Ekranni takomillashtiring

4. Ekranni to‘liq oqimga kengaytiring

5. Ekranni kod bazangizga bering, so‘ng o‘zgarishlarni qaytaring

6. Paketli ishdan oldin limitingizni tekshiring