Contoh MCP

1. Buat dan pratinjau layar

Alur kerja yang paling umum: buat layar (sekaligus membuat file pada langkah yang sama), lalu lihat hasilnya.

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]

Jika fileId dihilangkan, file baru dibuat secara otomatis. Berikan fileId yang sudah ada untuk menambahkan layar ke file tersebut. Prompt untuk asisten AI Anda:

Generate a Flowstep design: a mobile sign-in screen for a developer tool with email/password and a Google SSO button in dark theme, then show me the image.

2. Visualisasikan komponen React

Unggah file .jsx atau .tsx sebagai lampiran dan minta Flowstep membuat desain yang sesuai. Flowstep membaca sumber kode dan menghasilkan layar, tanpa perlu menjalankan aplikasinya.

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]

Untuk file sumber yang lebih dari 64.000 karakter, gunakan upload-attachment dengan mimeType dan fileName sebagai gantinya, lalu jalankan uploadCommand yang dikembalikan. Lihat upload-attachment. Prompt untuk asisten AI Anda:

Baca src/components/settings/ApiKeys.tsx, unggah sebagai lampiran, dan buat layar Flowstep yang sesuai dengan tata letak komponen. Tampilkan gambar hasil render-nya.

3. Iterasi pada layar

Ubah layar yang sudah ada secara langsung dengan instruksi bebas, dan dalam pemanggilan yang sama tambahkan layar baru yang selaras dengannya.

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 mencantumkan setiap layar yang dibuat atau diubah oleh pemanggilan, jadi panggil get-screen-image sekali untuk masing-masing. Hilangkan kalimat terakhir dari pesan jika Anda hanya ingin mengedit layar yang sudah ada. Untuk mengubah sebagian layar, panggil get-screen-jsx dengan "includeIds": true terlebih dahulu, lalu berikan data-id elemen yang ingin diubah di elementIds. Untuk preset satu klik pada seluruh layar, panggil ai-edit-screen-variant sebagai gantinya, misalnya "operationVariant": "light_theme" atau "different_layout". Prompt untuk asisten AI Anda:

In my “Login flow” Flowstep file, switch the sign-in screen to dark mode, add a “Remember me” checkbox below the password field, and add a matching forgot-password screen. Show me the results.

4. Perluas layar menjadi alur lengkap

Tambahkan layar lanjutan ke desain yang sudah ada.

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]

Ulangi langkah 2 dengan operationVariant: "error_state" atau "empty_state" untuk menambahkan layar kasus khusus, atau "web_version" / "tablet_version" untuk platform lain.

operationVariant wajib untuk ai-generate-screen-variant, dan alat ini hanya menerima tepat satu screenId. Untuk menambahkan layar yang bukan varian dari layar yang sudah ada, gunakan ai-design-screens dengan fileId.

5. Serahkan layar ke basis kode Anda, lalu tulis kembali perubahannya

Baca layar sebagai JSX, bangun dari situ, dan kirim JSX yang sudah Anda edit kembali ke kanvas, tanpa menggunakan pesan.

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]

Kolom yang dihilangkan (name, fidelity, screenType, colorTheme, fragments) mempertahankan nilai saat ini. Untuk menyimpan layar asli dan menambahkan versi Anda di sampingnya, panggil add-screen-jsx dengan screenType dan jsx alih-alih replace-screen-jsx. Untuk menampilkan gambar Anda sendiri di layar, unggah dengan upload-attachment lalu masukkan assetUrl yang dikembalikan ke img src di JSX Anda. Lihat Gambar di JSX.

6. Periksa kuota Anda sebelum tugas batch

Periksa sisa kapasitas sebelum memulai beberapa generasi. get-plan-details gratis dipanggil.

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

Jika remaining.messages.daily rendah, jadwalkan batch setelah 00:00 UTC saat kuotanya direset.

Memulai

Menggunakan Flowstep

Tim & Organisasi

Ekspor & Integrasi

Server MCP

Penagihan & Paket

Keamanan & Privasi

1. Buat dan pratinjau layar

2. Visualisasikan komponen React

3. Iterasi pada layar

4. Perluas layar menjadi alur lengkap

5. Serahkan layar ke basis kode Anda, lalu tulis kembali perubahannya

6. Periksa kuota Anda sebelum tugas batch

​1. Buat dan pratinjau layar

​2. Visualisasikan komponen React

​3. Iterasi pada layar

​4. Perluas layar menjadi alur lengkap

​5. Serahkan layar ke basis kode Anda, lalu tulis kembali perubahannya

​6. Periksa kuota Anda sebelum tugas batch

1. Buat dan pratinjau layar

2. Visualisasikan komponen React

3. Iterasi pada layar

4. Perluas layar menjadi alur lengkap

5. Serahkan layar ke basis kode Anda, lalu tulis kembali perubahannya

6. Periksa kuota Anda sebelum tugas batch