MCP örnekleri

1. Bir ekran oluşturun ve önizleyin

En yaygın iş akışı: bir ekran oluşturun (dosyayı aynı adımda oluşturarak), ardından sonucu görüntüleyin.

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]

fileId değerini atlarsanız otomatik olarak yeni bir dosya oluşturulur. Bunun yerine mevcut bir fileId değeri verirseniz ekranlar o dosyaya eklenir. Yapay zekâ asistanınıza istem:

Bir Flowstep tasarımı oluştur: geliştirici aracı için koyu temalı, e-posta/parola alanları ve bir Google SSO düğmesi içeren mobil bir oturum açma ekranı. Ardından bana görseli göster.

2. React bileşenini görselleştirin

Bir .jsx veya .tsx dosyasını ek olarak yükleyin ve Flowstep’ten buna uygun bir tasarım oluşturmasını isteyin. Flowstep kaynak kodu okur ve bir ekran üretir; uygulamayı çalıştırmanız gerekmez.

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]

64.000 karakterden uzun kaynak dosyaları için bunun yerine mimeType ve fileName ile upload-attachment kullanın ve döndürülen uploadCommand komutunu çalıştırın. Bkz. upload-attachment. Yapay zekâ asistanınıza istem:

src/components/settings/ApiKeys.tsx dosyasını okuyun, ek olarak yükleyin ve bileşen düzenine uyan bir Flowstep ekranı oluşturun. Oluşturulan görseli bana gösterin.

3. Bir ekranda yineleme yapın

Mevcut bir ekranı serbest biçimli talimatlarla yerinde değiştirin.

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]

Ekranın yalnızca bir bölümünü değiştirmek için önce "includeIds": true ile get-screen-jsx çağırın ve değiştirmek istediğiniz öğenin data-id değerini elementIds içinde iletin. Tüm bir ekran için tek tıkla hazır ayar uygulamak istiyorsanız bunun yerine ai-edit-screen-variant çağırın — örneğin "operationVariant": "light_theme" veya "different_layout". Yapay zekâ asistanınıza istem:

“Login flow” Flowstep dosyamda oturum açma ekranını koyu moda geçirin ve parola alanının altına bir “Remember me” onay kutusu ekleyin. Sonucu bana gösterin.

4. Bir ekranı tam bir akışa genişletin

Mevcut bir tasarıma devam eden ekranlar ekleyin.

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]

Uç durum ekranları eklemek için 2. adımı operationVariant: "error_state" veya "empty_state" ile, diğer platformlar için ise "web_version" veya "tablet_version" ile tekrarlayın.

ai-generate-screen-variant için operationVariant zorunludur ve araç tam olarak bir screenId alır. Mevcut bir ekranın varyantı olmayan bir ekran eklemek için fileId ile ai-generate-screens kullanın.

5. Bir ekranı kod tabanınıza aktarın, ardından değişiklikleri geri yazın

Bir ekranı JSX olarak okuyun, bundan bir şey oluşturun ve düzenlediğiniz JSX’i tuvale geri gönderin — hepsi mesaj kullanmadan.

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]

Atlanan alanlar (name, fidelity, screenType, colorTheme, fragments) mevcut değerlerini korur. Orijinali saklamak ve sürümünüzü yanına eklemek için replace-screen-jsx yerine screenType ve jsx ile add-screen-jsx çağırın.

6. Toplu iş öncesinde mesaj kotanızı kontrol edin

Birden fazla oluşturma işlemi başlatmadan önce kalan kapasiteyi kontrol edin. get-plan-details çağırmak ücretsizdir.

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

remaining.messages.daily değeri düşükse, sıfırlandığı 00:00 UTC’den sonrası için toplu işi planlayın.

Başlarken

Flowstep Kullanımı

Ekipler ve Organizasyonlar

Dışa Aktarma ve Entegrasyonlar

MCP Sunucusu

Faturalandırma ve Planlar

Güvenlik ve Gizlilik

1. Bir ekran oluşturun ve önizleyin

2. React bileşenini görselleştirin

3. Bir ekranda yineleme yapın

4. Bir ekranı tam bir akışa genişletin

5. Bir ekranı kod tabanınıza aktarın, ardından değişiklikleri geri yazın

6. Toplu iş öncesinde mesaj kotanızı kontrol edin

​1. Bir ekran oluşturun ve önizleyin

​2. React bileşenini görselleştirin

​3. Bir ekranda yineleme yapın

​4. Bir ekranı tam bir akışa genişletin

​5. Bir ekranı kod tabanınıza aktarın, ardından değişiklikleri geri yazın

​6. Toplu iş öncesinde mesaj kotanızı kontrol edin

1. Bir ekran oluşturun ve önizleyin

2. React bileşenini görselleştirin

3. Bir ekranda yineleme yapın

4. Bir ekranı tam bir akışa genişletin

5. Bir ekranı kod tabanınıza aktarın, ardından değişiklikleri geri yazın

6. Toplu iş öncesinde mesaj kotanızı kontrol edin