Referensi alat MCP

Saat berhasil, setiap alat kecuali get-screen-image mengembalikan hasilnya dua kali: sebagai structuredContent (divalidasi terhadap skema output alat yang dipublikasikan) dan sebagai objek yang sama yang diserialisasi ke dalam blok teks, { type: "text", text: "<json-string>" }, untuk klien yang tidak membaca structured content. get-screen-image hanya mengembalikan blok gambar MCP: { type: "image", data: "<base64>", mimeType: "image/png" }. Saat gagal, isError: true diatur dan blok teks berisi pesan error singkat. Error yang bisa Anda tindak lanjuti, seperti nama yang tidak cocok saat menghapus, tautan Figma yang tidak valid, panduan desain yang tidak valid, masalah lampiran, atau batas waktu generasi, menjelaskan apa yang perlu diperbaiki. Kegagalan lain mengembalikan pesan umum seperti Failed to list files.

Harga: ketiga alat desain AI, yaitu ai-design-screens, ai-generate-screen-variant, dan ai-edit-screen-variant, menggunakan kuota pesan yang sama dengan aplikasi Flowstep. Semua alat lainnya gratis. Lihat Batas penggunaan.

Setiap alat juga menerbitkan anotasi MCP agar klien Anda tahu apa yang dilakukannya. delete-file, delete-screen, delete-design-guidelines, replace-screen-jsx, ai-design-screens, dan ai-edit-screen-variant ditandai sebagai destruktif karena menghapus atau menimpa konten yang sudah ada.

Alat file

`list-files`

Cantumkan metadata file Flowstep Anda. Panggil ini terlebih dahulu untuk memeriksa apakah file yang relevan sudah ada. Alat ini tidak mengembalikan konten layar. Gunakan get-screen-image atau get-screen-jsx untuk itu. Input

Parameter	Tipe	Default	Keterangan
`orderByCreation`	`boolean`	`true`	Urutkan dari yang terbaru berdasarkan `created_at` (`true`) atau berdasarkan `updated_at` (`false`). Gunakan `false` untuk menemukan file yang baru saja diedit
`limit`	`integer` (1–100)	`20`	Jumlah file maksimum yang dikembalikan. Halaman yang penuh berarti mungkin masih ada file lain
`offset`	`integer` (≥0)	`0`	Jumlah file yang dilewati. Halaman berikutnya adalah `offset + limit`

Output — { files }.

{
  "files": [
    {
      "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
      "name": "Dashboard redesign",
      "created_at": "2026-04-30T15:02:13.120152+00:00",
      "updated_at": "2026-04-30T15:02:13.120152+00:00",
      "organisation_id": "0b7f3c9e-2d4a-4f1b-9a5e-6c8d7e1f2a3b",
      "shared_with_me": false,
      "owner": true,
      "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
    }
  ]
}

owner — true jika Anda membuat file tersebut.
shared_with_me — true jika file dibagikan langsung kepada Anda, bukan hanya melalui organisasi Anda.
url — membuka file di editor Flowstep.

`get-file`

Dapatkan metadata untuk satu file. Konten file sengaja tidak disertakan. Gunakan get-screen-image atau get-screen-jsx untuk memeriksa layar, dan get-design-guidelines untuk mengambil panduan desain yang terlampir. Jika Anda memiliki undangan tertunda ke file tersebut, memanggil get-file akan menerimanya. Input

Parameter	Tipe	Keterangan
`id`	`uuid`	ID file

Output — { file, user_access_level }.

{
  "file": {
    "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
    "name": "Dashboard redesign",
    "created_at": "2026-04-30T15:02:13.120152+00:00",
    "updated_at": "2026-04-30T15:02:13.120152+00:00",
    "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
    "access_level": "private",
    "visibility": "private",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  },
  "user_access_level": "write"
}

access_level — private, read, atau write.
visibility — private, member, atau public.
user_access_level — akses Anda ke file: read atau write.

`create-file`

Buat file Flowstep kosong tanpa layar. Untuk membuat file dan menghasilkan layar sekaligus, panggil ai-design-screens tanpa fileId. Gunakan create-file untuk alur kerja berbasis kode, dilanjutkan dengan add-screen-jsx. Input

Parameter	Tipe	Keterangan
`name`	`string` (min 1)	Nama tampilan file baru

Output — { file, user_access_level }, dengan bentuk yang sama seperti get-file. owner selalu true dan user_access_level selalu write. Gunakan file.id yang dikembalikan sebagai fileId pada pemanggilan alat berikutnya.

`update-file`

Ganti nama file. Input

Parameter	Tipe	Keterangan
`id`	`uuid`	ID file
`name`	`string` (min 1)	Nama tampilan baru

Output — { file, user_access_level }, dengan bentuk yang sama seperti get-file.

`delete-file`

Hapus file secara permanen. name yang Anda berikan dicocokkan dengan nama tampilan file saat ini sebelum penghapusan. Jika tidak cocok, penghapusan dibatalkan. Ini mencegah penghapusan file yang salah secara tidak sengaja. Agen diinstruksikan untuk meminta konfirmasi dari Anda terlebih dahulu. Input

Parameter	Tipe	Keterangan
`id`	`uuid`	ID file
`name`	`string`	Nama tampilan file saat ini. Harus cocok, atau penghapusan dibatalkan

Output — { "deleted": true }

Tindakan ini tidak dapat dibatalkan. Semua layar di dalam file akan dihapus.

Alat layar

`list-screens`

Cantumkan layar dalam file, sesuai urutan di kanvas. Panggil ini setelah list-files untuk melihat isi file. Gunakan nilai screenId yang dikembalikan dengan alat layar lainnya dan alat desain AI. Input

Parameter	Tipe	Keterangan
`fileId`	`uuid`	ID file

Output — { screens }.

{
  "screens": [
    {
      "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
      "name": "Mobile login screen",
      "prompt": "Generate a simple mobile login screen with email and password fields and a sign in button",
      "fidelity": "ui"
    }
  ]
}

prompt — prompt generasi terakhir untuk layar, atau string kosong jika layar tidak pernah dibuat dengan AI (misalnya layar yang ditambahkan dengan add-screen-jsx).
fidelity — lofi, hifi, atau ui.

`get-screen-image`

Render layar menjadi PNG dan kembalikan sebagai gambar inline. Memerlukan klien yang mendukung blok konten gambar. Panggil sekali untuk setiap screenId yang dikembalikan oleh alat desain AI, add-screen-jsx, replace-screen-jsx, atau import-figma. Input

Parameter	Tipe	Keterangan
`fileId`	`uuid`	ID file
`screenId`	`uuid`	`screenId` dari `list-screens` atau dari array `screenIds` yang dikembalikan oleh alat desain

Output — blok konten gambar MCP (image/png). data adalah base64 standar dari byte PNG, bukan data URI. Alat ini tidak memiliki structuredContent.

`get-screen-jsx`

Dapatkan layar sebagai JSX beserta metadatanya, sehingga Anda bisa membangun dari situ di basis kode Anda, atau mengeditnya dan menulisnya kembali dengan replace-screen-jsx. Gunakan get-screen-image untuk pratinjau visual. Input

Parameter	Tipe	Default	Keterangan
`fileId`	`uuid`	—	ID file
`screenId`	`uuid`	—	`screenId` dari `list-screens` atau dari array `screenIds` yang dikembalikan oleh alat desain
`includeIds`	`boolean`	`false`	Sertakan atribut `data-id` pada elemen di `jsx`. Gunakan ini saat Anda memerlukan id elemen untuk diteruskan sebagai `elementIds` ke `ai-design-screens`, baik untuk mengedit di tempat maupun sebagai referensi visual

Output — { fileId, screenId, name, prompt, fidelity, screenType, colorTheme, jsx, fragments }.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0",
  "name": "World clock",
  "prompt": "A world clock screen with a city search and alert button",
  "fidelity": "ui",
  "screenType": "iphone-x-vertical",
  "colorTheme": "blue",
  "jsx": "<div className=\"bg-white text-zinc-950 w-full h-fit\">\n  <div className=\"flex p-6 flex-col gap-6\">\n    …\n  </div>\n</div>",
  "fragments": []
}

jsx — hanya markup. Atribut data-id disertakan hanya jika includeIds bernilai true.
prompt — prompt generasi terakhir, atau string kosong jika layar tidak pernah dibuat dengan AI.
fragments — chrome bersama yang tersimpan di layar, seperti nav bar, header, atau logo, sebagai objek { purpose, markup }. Kosong jika tidak ada. Teruskan kembali ke replace-screen-jsx untuk mempertahankan atau memperbarui fragmen tersebut.

Lihat Nilai kolom layar untuk nilai fidelity, screenType, dan colorTheme.

`add-screen-jsx`

Tambahkan layar baru ke file dari JSX yang Anda tulis. Ini adalah jalur berbasis kode dan gratis. Gunakan ai-design-screens jika Anda ingin AI Flowstep yang mendesain layarnya. add-screen-jsx selalu membuat layar baru. Untuk menimpa layar yang sudah ada, gunakan replace-screen-jsx. Untuk menampilkan gambar yang sudah Anda unggah, lihat Gambar di JSX. Jika layar baru didasarkan pada layar yang sudah ada, mulailah dari get-screen-jsx (tanpa includeIds) untuk name, fidelity, screenType, colorTheme, dan jsx, lalu ubah apa pun yang seharusnya berbeda. Input

Parameter	Tipe	Default	Keterangan
`fileId`	`uuid`	—	ID file
`name`	`string` (1–100 karakter)	—	Nama tampilan opsional. Hilangkan untuk memberi nama layar secara otomatis `Screen N`
`fidelity`	`string`	`"ui"`	Fidelity layar
`screenType`	`string`	—	Wajib. Perangkat atau viewport tempat layar didesain
`colorTheme`	`string`	`"default"`	Tema warna
`jsx`	`string`	—	Hanya markup JSX. Atribut `data-id` apa pun diabaikan. Layar baru mendapatkan id elemen baru

Output — { fileId, screenId }. Panggil get-screen-image dengan screenId untuk melihat hasilnya.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf"
}

`replace-screen-jsx`

Timpa layar yang sudah ada dengan JSX yang Anda tulis. Layar mempertahankan screenId dan posisinya di kanvas. Elemen bersarang mendapatkan id baru. Ini adalah jalur berbasis kode dan gratis. Gunakan ai-design-screens atau ai-edit-screen-variant untuk perubahan AI, dan add-screen-jsx untuk membuat layar baru. Mulailah dari get-screen-jsx (tanpa includeIds), lalu ubah apa pun yang seharusnya berbeda. Untuk menampilkan gambar yang sudah Anda unggah, lihat Gambar di JSX. Input

Parameter	Tipe	Keterangan
`fileId`	`uuid`	ID file
`screenId`	`uuid`	Layar yang akan ditimpa
`jsx`	`string`	Hanya markup JSX. Atribut `data-id` apa pun diabaikan
`name`	`string` (1–100 karakter)	Opsional. Hilangkan untuk mempertahankan nama saat ini
`fidelity`	`string`	Opsional. Hilangkan untuk mempertahankan fidelity saat ini
`screenType`	`string`	Opsional. Hilangkan untuk mempertahankan tipe layar saat ini
`colorTheme`	`string`	Opsional. Hilangkan untuk mempertahankan tema warna saat ini
`fragments`	`{ purpose, markup }[]`	Opsional. Chrome bersama dari `get-screen-jsx`. Hilangkan untuk mempertahankan fragmen saat ini, atau kirim `[]` untuk menghapusnya

Output — { fileId, screenId }. Panggil get-screen-image dengan screenId untuk melihat hasilnya.

Ini mengganti konten layar di tempat.

`rename-screen`

Ganti nama label kanvas layar, yaitu nama yang ditampilkan oleh list-screens dan di editor. Ini hanya mengubah label, bukan tata letak, ukuran, atau kontennya. Untuk itu, gunakan ai-design-screens. Input

Parameter	Tipe	Keterangan
`fileId`	`uuid`	ID file
`screenId`	`uuid`	`screenId` yang dikembalikan oleh `list-screens`
`name`	`string` (1–100 karakter)	Nama layar baru. Spasi di awal dan akhir dihapus

Output — { screenId, name }.

{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe", "name": "Checkout — empty cart" }

`delete-screen`

Hapus layar secara permanen dari file. name yang Anda berikan dicocokkan dengan nama tampilan layar saat ini. Jika tidak cocok, penghapusan dibatalkan. Agen diinstruksikan untuk meminta konfirmasi dari Anda terlebih dahulu. Input

Parameter	Tipe	Keterangan
`fileId`	`uuid`	ID file
`screenId`	`uuid`	Layar yang akan dihapus
`name`	`string`	Nama tampilan layar saat ini. Harus cocok, atau penghapusan dibatalkan

Output — { "deleted": true }

Images in JSX

add-screen-jsx dan replace-screen-jsx menerima gambar di src pada img, atau sebagai latar belakang di className dengan bg-[url(...)]. Tulis teks alt, dan sesuaikan ukuran setiap gambar dengan tujuannya. Untuk menempatkan gambar Anda sendiri:

Unggah dengan upload-attachment dalam Mode A (mimeType + fileName), lalu jalankan uploadCommand yang dikembalikan.
Jika type respons adalah "image", tempel assetUrl persis seperti yang dikembalikan ke img src atau bg-[url(assetUrl)].

Biarkan semua URL gambar lain persis seperti yang dikembalikan get-screen-jsx. Jangan letakkan path, signedUrl, atau uploadCommand di src.

<img src="ASSET_URL" alt="Team photo" className="w-full h-48 object-cover rounded-lg" />

Screen field values

get-screen-jsx mengembalikan, dan add-screen-jsx serta replace-screen-jsx menerima, nilai-nilai berikut:

Field	Nilai
`fidelity`	`lofi`, `hifi`, `ui`
`screenType`	`web`, `desktop`, `desktop-large`, `desktop-medium`, `desktop-small`, `tablet`, `ipad-tablet-horizontal`, `ipad-tablet-vertical`, `android-tablet-horizontal`, `android-tablet-vertical`, `mobile_ios`, `mobile_android`, `iphone-vertical`, `iphone-horizontal`, `iphone-x-vertical`, `iphone-x-horizontal`, `android-vertical`, `android-horizontal`, `android-small-vertical`, `android-small-horizontal`
`colorTheme`	`default`, `defaultDark`, `blue`, `blueDark`, `ice`, `iceDark`, `grayscale`, `grayscaleDark`, `green`, `greenDark`, `orange`, `orangeDark`, `red`, `redDark`, `rose`, `roseDark`, `violet`, `violetDark`, `yellow`, `yellowDark`

Alat panduan desain

Panduan desain adalah teks DESIGN.md yang disimpan pada file. Jika diatur, panduan tersebut disertakan dalam setiap generasi AI untuk file itu. Lihat Panduan Desain.

`get-design-guidelines`

Dapatkan panduan desain yang terlampir pada file. Input

Parameter	Tipe	Keterangan
`fileId`	`uuid`	ID file

Output — { guidelines }.

{
  "guidelines": "## Colors\n\nPrimary: #6366F1\nBackground: #FFFFFF\n\n## Typography\n\nFont: Inter"
}

guidelines bernilai null jika belum ada panduan yang diatur.

`update-design-guidelines`

Atur atau ganti panduan desain untuk file. Berikan panduan sebagai string biasa dalam format DESIGN.md dari Google, bukan objek atau JSON. Jika Anda membacanya dari sebuah file, berikan teks file tersebut. Input

Parameter	Tipe	Keterangan
`fileId`	`uuid`	ID file
`designGuidelines`	`string` (min 1)	Teks mentah panduan. Harus berupa string biasa, bukan JSON yang di-encode

Aturan validasi

Frontmatter harus dibuka dan ditutup dengan benar
Baris frontmatter harus berupa YAML gaya blok yang valid
Badan Markdown tidak boleh berisi heading bagian ## yang duplikat

Jika validasi gagal, pemanggilan mengembalikan error yang diawali dengan Invalid design guidelines:. Output — { updated, warnings? }.

{ "updated": true, "warnings": ["…"] }

warnings berisi masalah validasi lunak (kunci yang tidak dikenal, warna non-hex) yang diterima tetapi mungkin diabaikan oleh AI. Field ini dihilangkan jika tidak ada. Sampaikan peringatan ini kepada pengguna.

`delete-design-guidelines`

Hapus panduan desain untuk file. Menghapus panduan yang tidak ada tidak memberikan efek apa pun. Input

Parameter	Tipe	Keterangan
`fileId`	`uuid`	ID file

Output — { "deleted": true }

Alat chat

`get-chat-history`

Dapatkan percakapan desain yang terkait dengan file, yaitu chat Flowstep untuk file tersebut, bukan percakapan klien MCP Anda. Gunakan untuk melanjutkan pekerjaan sebelumnya pada file. Input

Parameter	Tipe	Keterangan
`fileId`	`uuid`	ID file

Output — { messages }. messages kosong jika Anda tidak memiliki percakapan desain pada file. Setiap pesan memiliki type ("request" atau "response"), author ("human" atau "ai"), dan content_type. Pesan respons menggunakan "text", "summary", atau "followup".

{
  "messages": [
    {
      "id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "type": "request",
      "status": "success",
      "content": "Generate a simple mobile login screen with email and password fields",
      "author": "human",
      "content_type": "text",
      "sequence": 1,
      "targets": [],
      "attachments": []
    },
    {
      "id": "d860186b-82d5-4bd1-8e8e-8ba5377a14bf",
      "type": "response",
      "status": "success",
      "content": "Generated a mobile login screen with email and password input fields, a sign in button, and a sign up link.",
      "author": "ai",
      "content_type": "summary",
      "sequence": 7,
      "request_message_id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "targets": [{ "target_id": "3f9e6eb6-5525-4383-9375-67e0bd762dbe" }]
    }
  ]
}

Alat lampiran

`upload-attachment`

Unggah file referensi untuk digunakan sebagai lampiran di ai-design-screens, atau gambar untuk ditempatkan di JSX Anda sendiri dengan add-screen-jsx atau replace-screen-jsx. ai-generate-screen-variant dan ai-edit-screen-variant tidak menerima lampiran. Byte file tidak pernah melewati model, dan server tidak pernah mengambil URL atas nama Anda. Untuk merujuk ke halaman web, sertakan URL-nya di message pada ai-design-screens. Ada dua mode. Gunakan salah satu saja, dan jangan dikombinasikan. Mode A: file dan gambar (mimeType + fileName) Alur tiga langkah yang wajib untuk gambar, PDF, atau file teks yang lebih besar:

Panggil upload-attachment hanya dengan mimeType dan fileName (misalnya image/png dan dog.png). Respons-nya adalah unggahan yang disiapkan, bukan file yang sudah disimpan:

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "assetUrl": "https://…",
  "type": "image",
  "mimeType": "image/png",
  "signedUrl": "https://…",
  "uploadCommand": "curl -sS -f -X PUT '…' -H 'Content-Type: image/png' -H 'x-metadata: …' --data-binary @LOCAL_FILE_PATH",
  "nextStep": "…"
}

Ganti LOCAL_FILE_PATH di uploadCommand dengan path absolut ke file Anda, lalu jalankan perintah persis itu di shell Anda. Perintah harus keluar dengan kode 0. Token di signedUrl hanya mengotorisasi unggahan tunggal ini. Melewati langkah ini membuat penyimpanan kosong, dan alat desain gagal pada pemeriksaan awalnya.
Teruskan hanya { id, path, type } ke array attachments di ai-design-screens, bukan signedUrl, uploadCommand, atau nextStep. Untuk menempatkan gambar di JSX Anda sendiri, masukkan assetUrl ke img src atau bg-[url(...)] pada JSX yang Anda teruskan ke add-screen-jsx atau replace-screen-jsx. Lihat Gambar di JSX.

Untuk melampirkan file jarak jauh, unduh terlebih dahulu ke path lokal dengan tangan Anda sendiri (misalnya dengan curl), lalu ikuti tiga langkah yang sama. Jangan pernah memberikan URL ke upload-attachment.

Parameter	Tipe	Keterangan
`mimeType`	enum	Tipe MIME file. Salah satu dari `image/jpeg`, `image/png`, `image/webp`, `application/pdf`, `text/markdown`, `text/plain`, `text/javascript`. Gunakan `text/javascript` untuk file `.jsx`, `.tsx`, `.js`, `.ts`
`fileName`	`string` (min 1)	Nama file asli beserta ekstensinya, misalnya `cat.png` atau `design.md`

Mode B: teks pendek (text + mimeType) Unggah teks yang sudah ada dalam konteks, tanpa perlu perintah shell. Respons-nya siap digunakan secara langsung:

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "assetUrl": "https://…",
  "type": "document",
  "mimeType": "text/plain"
}

Parameter	Tipe	Keterangan
`text`	`string` (maks 64.000 karakter)	Konten teks mentah. Hanya untuk file teks, jangan gunakan untuk gambar atau PDF. Lebih dari 64.000 karakter? Gunakan Mode A
`mimeType`	enum	Salah satu dari `text/markdown`, `text/plain`, `text/javascript`

Teruskan { id, path, type } yang dihasilkan ke array attachments di ai-design-screens. Ukuran file maksimum adalah 3 MB di kedua mode, dan PDF dibatasi hingga 100 halaman. Output — { id, path, assetUrl, type, mimeType, signedUrl?, uploadCommand?, nextStep? }.

type — "image" untuk file gambar dan "document" untuk PDF dan file teks.
assetUrl — URL file yang diunggah, dikembalikan di kedua mode. Gunakan di JSX untuk add-screen-jsx atau replace-screen-jsx hanya jika type adalah "image", dan hanya setelah uploadCommand Mode A dijalankan.
signedUrl, uploadCommand, nextStep — hanya diatur di Mode A. Jangan teruskan ke alat desain.

Alat Figma

`import-figma`

Impor frame Figma ke file Flowstep sebagai elemen yang bisa diedit di kanvasnya. Setiap impor menambahkan layar baru. Mengimpor frame yang sama dua kali akan menghasilkan dua layar, jadi hapus yang lama dengan delete-screen jika Anda ingin menggantinya. Organisasi pemilik file harus sudah menghubungkan Figma di pengaturan Flowstep. Input

Parameter	Tipe	Keterangan
`fileId`	`uuid`	File Flowstep tujuan untuk impor frame. Ini bukan file key Figma di `figmaUrl`
`figmaUrl`	`string`	Tautan ke frame Figma tertentu, dengan `node-id`. Di Figma, klik kanan frame lalu pilih Copy/Paste as → Copy link to selection. Tautan ke halaman akan mengimpor semua frame tingkat atas di halaman tersebut (dibatasi 20 frame melalui MCP)

Output — { fileId, screenId, frameCount? }. screenId adalah layar yang diimpor, berikan ke get-screen-image untuk melihat hasilnya. Ketika URL halaman mengimpor beberapa frame, screenId bernilai null dan frameCount dikembalikan sebagai gantinya. Panggil list-screens, lalu get-screen-image untuk setiap layar baru.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe"
}

Alat paket dan penagihan

`get-plan-details`

Dapatkan paket Flowstep organisasi Anda, status langganan, penggunaan, dan kuota yang tersisa. Tidak memerlukan input. Organisasi ditentukan dari pengguna yang sedang masuk. Gunakan untuk memeriksa kuota Anda sebelum memanggil alat desain AI. Output — { plan, subscription, limits, usage, remaining }.

Field	Keterangan
`plan`	`{ name, code, type }`. `type` bernilai `"free"` atau `"paid"`
`subscription`	`{ isPaid, isTrial, startDate, endDate, trialDaysRemaining }`
`limits`	Batas per fitur, dikelompokkan berdasarkan fitur (misalnya `messages`). Setiap fitur memiliki objek `daily` dan `monthly` opsional dengan nilai `max` dan `warn`, serta flag `unlimited`
`usage`	Penggunaan per fitur sejauh ini, sebagai `{ daily, monthly }`
`remaining`	Kuota per fitur yang tersisa, sebagai `{ daily, monthly }`. Dihilangkan untuk fitur tanpa batas

Batas bervariasi menurut paket. Lihat Harga dan Batas penggunaan.

AI design tools

Ketiga alat ini mendesain dari deskripsi atau preset. Mereka tidak pernah menerima atau menggunakan ulang JSX. Setiap pemanggilan menggunakan kuota pesan yang sama dengan aplikasi Flowstep, dan menunggu sampai generasi selesai atau habis waktu (180 detik).

Alat	Gunakan untuk
`ai-design-screens`	Membuat layar baru, mengubah layar yang sudah ada di tempat, atau keduanya, dari deskripsi bebas
`ai-generate-screen-variant`	Menambahkan langkah berikutnya, kondisi error atau kosong, atau varian platform dari satu layar yang sudah ada
`ai-edit-screen-variant`	Menerapkan preset edit atau desain ulang ke satu layar utuh yang sudah ada

Ketiganya mengembalikan { status, fileId, screenIds, designGuidelinesUpdated }. Panggil get-screen-image sekali untuk setiap screenId untuk melihat hasilnya.

designGuidelinesUpdated — ringkasan singkat perubahan ketika panduan DESIGN.md pada file diperbarui secara otomatis selama giliran ini; jika tidak, bernilai null.

`ai-design-screens`

Buat satu atau beberapa layar baru, ubah layar yang sudah ada di tempat, atau keduanya dalam satu pemanggilan, dari deskripsi teks. Ini mencakup alur baru, tema, salinan, tata letak, atau perubahan terkoordinasi di beberapa layar. Ini adalah agen desain yang sama dengan chat di editor Flowstep: ia memutuskan dari message dan elementIds Anda apa yang harus dibuat dan apa yang harus diubah. Hilangkan fileId untuk memulai file baru. Berikan fileId untuk bekerja di file yang sudah ada. Jika permintaan dapat berlaku untuk file yang sudah Anda miliki, agen Anda sebaiknya memeriksa list-files dan list-screens terlebih dahulu. Untuk langkah berikutnya, kondisi error atau kosong, atau varian platform dari satu layar, gunakan ai-generate-screen-variant. Untuk preset edit atau desain ulang satu layar, gunakan ai-edit-screen-variant. Jika Anda sudah memiliki JSX, gunakan add-screen-jsx atau replace-screen-jsx sebagai gantinya. Input

Parameter	Tipe	Default	Keterangan
`fileId`	`uuid`	—	File tujuan. Hilangkan untuk membuat file baru. Wajib jika `elementIds` diatur
`message`	`string`	—	Deskripsi layar yang akan dibuat dan/atau perubahan yang akan dilakukan. Saat Anda menyertakan `elementIds`, sebutkan apakah elemen tersebut akan diedit atau dijadikan referensi. Sertakan URL halaman web yang ingin Flowstep rujuk di sini
`elementIds`	`uuid[]`	`[]`	`screenId` opsional dari `list-screens` dan/atau `data-id` elemen dari `get-screen-jsx` (dengan `includeIds`), seperti seleksi di editor. Elemen tersebut dapat diedit di tempat atau dijadikan referensi visual untuk layar baru. `screenId` menargetkan seluruh layar
`attachments`	`{ id, path, type }[]` (maks 5)	`[]`	File dari `upload-attachment`: gambar, PDF, atau file kode dan teks. Jangan sisipkan isi file di dalam pesan

Contoh: edit satu layar dan tambahkan layar lain dalam satu pemanggilan:

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "message": "Switch this sign-in screen to dark mode, then add a matching forgot-password screen.",
  "elementIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"]
}

Output — { status, fileId, screenIds, designGuidelinesUpdated, reply? }.

{
  "status": "generated",
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenIds": [
    "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
    "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0"
  ],
  "designGuidelinesUpdated": null
}

status — "generated" ketika layar dibuat atau diubah. "chat" ketika Flowstep membalas tanpa membuat apa pun, dalam hal ini reply berisi jawabannya dan screenIds kosong. Jika permintaan Anda ambigu, agen Anda sebaiknya meminta Anda memperjelas lalu memanggil alat lagi.
screenIds — setiap layar yang dibuat atau diubah selama pemanggilan, termasuk layar yang diedit di tempat. Jika pemanggilan habis waktu setelah beberapa layar dibuat, alat mengembalikan layar tersebut alih-alih error.

Layar yang Anda minta untuk diedit akan ditimpa di tempat.

`ai-generate-screen-variant`

Tambahkan layar baru yang diturunkan dari tepat satu layar yang sudah ada: langkah berikutnya dalam alur, kondisi error atau kosong, atau versi untuk platform lain. Layar asli tidak berubah. Untuk menambahkan layar yang bukan varian dari layar yang sudah ada (misalnya layar pengaturan), gunakan ai-design-screens dengan fileId. Input

Parameter	Tipe	Keterangan
`fileId`	`uuid`	File tujuan
`screenId`	`uuid`	Layar yang sudah ada sebagai sumber
`operationVariant`	enum	Wajib. Bagaimana layar baru berhubungan dengan layar yang sudah ada

`operationVariant`	Menambahkan
`next_screen`	Layar berikutnya dalam alur pengguna
`error_state`	Kondisi error dari layar
`empty_state`	Kondisi kosong dari layar
`web_version`	Versi web
`mobile_version`	Versi mobile
`tablet_version`	Versi tablet
`mobile_ios_version`	Versi iOS
`mobile_android_version`	Versi Android

Output — { status, fileId, screenIds, designGuidelinesUpdated }. status selalu "generated".

`ai-edit-screen-variant`

Ubah tepat satu layar yang sudah ada di tempat menggunakan preset: beri tema atau poles layar, coba tata letak atau gaya visual yang berbeda, atau desain ulang dari awal. Untuk layar baru, instruksi bebas, atau edit presisi pada elemen individual, gunakan ai-design-screens. Input

Parameter	Tipe	Keterangan
`fileId`	`uuid`	File tujuan
`screenId`	`uuid`	Layar yang sudah ada untuk diubah
`operationVariant`	enum	Wajib. Preset edit atau desain ulang yang akan diterapkan

`operationVariant`	Jenis	Efek
`dark_theme`	Edit	Ubah layar ke tema gelap
`light_theme`	Edit	Ubah layar ke tema terang
`make_pretty`	Edit	Poles desain visual layar
`different_layout`	Desain ulang	Coba tata letak yang berbeda
`different_style`	Desain ulang	Coba gaya visual yang berbeda
`from_scratch`	Desain ulang	Desain ulang layar dari awal

Output — { status, fileId, screenIds, designGuidelinesUpdated }. status selalu "generated".

Ini menimpa konten layar di tempat.

Alat yang diganti namanya

Nama alat berubah pada September dan Oktober 2026. Jika Anda memiliki prompt, skrip, atau instruksi agen yang masih memakai nama lama, perbaruilah:

Nama lama	Nama baru
`get-screen`	`get-screen-jsx`
`add-screen`	`add-screen-jsx`
`replace-screen`	`replace-screen-jsx`
`ai-generate-screens`	`ai-design-screens`
`ai-edit-screens`	`ai-design-screens`
`create-new-design`	`ai-design-screens`
`edit-design` (instruksi bebas)	`ai-design-screens`
`edit-design` (dengan preset `operationVariant`)	`ai-edit-screen-variant`
`regenerate-design`	`ai-edit-screen-variant`
`expand-design`	`ai-generate-screen-variant`

Input juga berubah: alat desain AI menerima elementIds (atau screenId tunggal untuk alat varian) sebagai pengganti targets, add-screen-jsx menerima jsx dan field metadata eksplisit sebagai pengganti jsxContent dengan komentar metadata, create-file menerima name sebagai pengganti title, dan alat panduan desain menerima fileId sebagai pengganti resourceId dan linkedTo.

​Alat file

​list-files

​get-file

​create-file

​update-file

​delete-file

​Alat layar

​list-screens

​get-screen-image

​get-screen-jsx

​add-screen-jsx

​replace-screen-jsx

​rename-screen

​delete-screen

​Images in JSX

​Screen field values

​Alat panduan desain

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Alat chat

​get-chat-history

​Alat lampiran

​upload-attachment

​Alat Figma

​import-figma

​Alat paket dan penagihan

​get-plan-details

​AI design tools

​ai-design-screens

​ai-generate-screen-variant

​ai-edit-screen-variant

​Alat yang diganti namanya

Alat file

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Alat layar

`list-screens`

`get-screen-image`

`get-screen-jsx`

`add-screen-jsx`

`replace-screen-jsx`

`rename-screen`

`delete-screen`

Images in JSX

Screen field values

Alat panduan desain

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Alat chat

`get-chat-history`

Alat lampiran

`upload-attachment`

Alat Figma

`import-figma`

Alat paket dan penagihan

`get-plan-details`

AI design tools

`ai-design-screens`

`ai-generate-screen-variant`

`ai-edit-screen-variant`

Alat yang diganti namanya