> ## Documentation Index > Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt > Use this file to discover all available pages before exploring further. # Referensi Alat MCP > Skema input, bentuk output, dan contoh untuk semua 20 alat MCP Flowstep. Semua alat mengembalikan array `content` dari blok konten MCP. Alat teks mengembalikan `{ type: "text", text: "" }`. Alat gambar mengembalikan `{ type: "image", data: "", mimeType: "image/png" }`. Saat gagal, `isError: true` diatur dan blok teks berisi pesan kesalahan. *** ## Alat File ### `list-files` Daftar file Flowstep untuk pengguna saat ini. **Input** | Parameter | Type | Default | Deskripsi | | ----------------- | ----------------- | ------- | ------------------------------------- | | `orderByCreation` | `boolean` | `true` | Urutkan berdasarkan tanggal pembuatan | | `limit` | `integer` (1–100) | `20` | Jumlah file yang akan dikembalikan | | `offset` | `integer` (≥0) | `0` | Offset paginasi | **Output** — Array JSON dari objek file. ```json theme={"system"} [ { "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", "owner": true, "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0" } ] ``` *** ### `get-file` Dapatkan file tunggal berdasarkan ID. Konten file sengaja dihilangkan — gunakan `get-screen` atau `get-screen-image` untuk memeriksa layar, dan `get-design-guidelines` untuk mengambil panduan terlampir. **Input** | Parameter | Type | Deskripsi | | --------- | ------ | --------- | | `id` | `uuid` | ID File | **Output** — Objek file JSON. ```json theme={"system"} { "file": { "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "name": "Dashboard redesign", "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d", "created_at": "2026-04-30T15:02:13.120152+00:00", "updated_at": "2026-04-30T15:02:13.120152+00:00", "access_level": "private", "owner": true, "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0" }, "user_access_level": "write" } ``` *** ### `create-file` Buat file Flowstep baru. **Input** | Parameter | Type | Deskripsi | | --------- | ---------------- | --------- | | `title` | `string` (min 1) | Nama file | **Output** — Objek file JSON dengan `id` file baru. ```json theme={"system"} { "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "name": "Dashboard redesign", "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d", "created_at": "2026-04-30T15:02:13.120152+00:00", "updated_at": "2026-04-30T15:02:13.120152+00:00", "access_level": "private", "user_access_level": "write", "owner": true, "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0" } ``` Gunakan `id` yang dikembalikan sebagai `fileId` dalam panggilan alat berikutnya. *** ### `update-file` Ubah nama file. **Input** | Parameter | Type | Deskripsi | | --------- | ---------------- | --------- | | `id` | `uuid` | ID File | | `name` | `string` (min 1) | Nama baru | **Output** — Objek file yang diperbarui dalam bentuk yang sama seperti `get-file`. ```json theme={"system"} { "file": { "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "name": "Dashboard redesign (v2)", "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d", "created_at": "2026-04-30T15:02:13.120152+00:00", "updated_at": "2026-04-30T15:02:13.120152+00:00", "access_level": "private", "owner": true, "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0" }, "user_access_level": "write" } ``` *** ### `delete-file` Hapus file secara permanen. Nama yang Anda berikan diverifikasi terhadap nama file yang sebenarnya sebelum penghapusan — jika tidak cocok, penghapusan akan dibatalkan. Ini mencegah penghapusan file yang salah secara tidak disengaja. **Input** | Parameter | Type | Deskripsi | | --------- | -------- | ------------------------------------------------------------------------ | | `id` | `uuid` | ID File | | `name` | `string` | Nama file saat ini — harus cocok persis atau penghapusan akan dibatalkan | **Output** — `"File deleted successfully"` Ini tidak dapat diubah. Semua layar di file dihapus. *** ## Alat Layar ### `list-screens` Daftar semua layar yang dihasilkan untuk file. Gunakan nilai `screenId` yang dikembalikan untuk mereferensikan layar dalam `get-screen`, `get-screen-image`, `upload-attachment`, dan sebagai `targets` dalam `edit-design`, `regenerate-design`, atau `expand-design`. **Input** | Parameter | Type | Deskripsi | | --------- | ------ | --------- | | `fileId` | `uuid` | ID File | **Output** — Array JSON dari ringkasan layar. ```json theme={"system"} [ { "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe", "name": "Mobile login screen", "fidelity": "ui", "prompt": "Generate a simple mobile login screen with email and password fields and a sign in button", "createdAt": "2026-04-30T15:02:37.444139+00:00" } ] ``` `name` adalah nama layar yang ditugaskan pengguna, atau `null` jika tidak diberi nama. *** ### `get-screen` Dapatkan kode JSX untuk layar yang memungkinkan Anda mengedit atau menggunakan kode di luar Flowstep. Gunakan `get-screen-image` untuk pratinjau visual sebagai gantinya. **Input** | Parameter | Type | Deskripsi | | ---------- | ------ | --------------------------------------------------------------------------------------------------------------- | | `fileId` | `uuid` | ID File | | `screenId` | `uuid` | `screenId` yang dikembalikan oleh `list-screens` atau dari array `screenIds` yang dikembalikan oleh alat desain | **Output** — Layar sebagai kode (JSX). Perhatikan komentar baris pertama yang diperlukan saat menggunakan alat `add-screen`. ```json theme={"system"}
World Clock
Search cities...
...
; ``` *** ### `add-screen` Menambahkan layar baru ke file Flowstep dari string JSX mentah. **Input** | Parameter | Type | Deskripsi | | ------------ | -------- | ---------------------------------------------------------------------------- | | `fileId` | `uuid` | ID File | | `jsxContent` | `string` | JSX untuk ditambahkan ke file sebagai layar | | `screenType` | `string` | Diperlukan jika jenis layar tidak didefinisikan sebagai komentar di awal JSX | **Note** - Komentar serupa dengan yang di bawah ini HARUS ada sebagai baris pertama JSX karena digunakan untuk menambahkan layar dengan benar. `screenType`, `name`, dan `screenId` semuanya opsional — `screenId` digunakan (secara internal) jika ada (misalnya saat meneruskan JSX yang disalin dari output `get-screen`) tetapi tidak wajib. Nama layar diambil dari field `name` pada komentar (ditampilkan sebagai "Copy of \"), atau "Untitled" jika tidak ada. `` **Output** — ID layar yang baru ditambahkan. ```json theme={"system"} { "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf" } ``` *** ### `get-screen-image` Render layar ke PNG dan kembalikan sebagai gambar inline. Memerlukan klien yang mendukung blok konten gambar. **Input** | Parameter | Type | Deskripsi | | ---------- | ------ | --------------------------------------------------------------------------------------------------------------- | | `fileId` | `uuid` | ID File | | `screenId` | `uuid` | `screenId` yang dikembalikan oleh `list-screens` atau dari array `screenIds` yang dikembalikan oleh alat desain | **Output** — Blok konten gambar MCP (`image/png`). *** ## Alat AI `regenerate-design`, `expand-design`, dan `edit-design` memerlukan konteks desain yang hanya ada pada layar yang awalnya dihasilkan dengan array `designs`. Layar yang dihasilkan tanpa konteks desain akan mengembalikan kesalahan. Solusi: gunakan `upload-attachment` untuk merender layar sebagai gambar, kemudian panggil `create-new-design` dengan gambar dalam `attachments` dan pesan yang menjelaskan perubahan yang diinginkan. ### `create-new-design` Hasilkan satu atau lebih desain layar dari prompt teks. Lewatkan `fileId` untuk membuat file baru secara otomatis. Blok sampai generasi selesai atau timeout (180 detik). **Input** | Parameter | Type | Default | Deskripsi | | ------------- | --------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `fileId` | `uuid` | — | File target — lewatkan untuk membuat file baru secara otomatis | | `message` | `string` | — | Prompt yang menjelaskan layar yang akan dihasilkan | | `attachments` | `AttachmentRequestData[]` (max 5) | `[]` | Lampiran yang telah diunggah sebelumnya — gambar, PDF, atau file kode. Selalu unggah melalui `upload-attachment` terlebih dahulu; jangan inline konten file dalam pesan | | `designs` | `DesignRequestData[]` | `[]` | Referensi desain | **Output** — `{ fileId, screenIds }`. Berikan setiap `screenId` ke `get-screen-image` untuk melihat hasil. ```json theme={"system"} { "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "screenIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"] } ``` *** ### `regenerate-design` Buat ulang layar yang ada dari awal atau dengan variasi gaya. Memerlukan setidaknya satu `screenId` dalam `targets`. Blok sampai generasi selesai atau timeout (180 detik). **Input** | Parameter | Type | Default | Deskripsi | | ------------------ | ----------------------------------------------------------- | ------- | ----------------------------------------------- | | `fileId` | `uuid` | — | File target | | `message` | `string` | — | Teks prompt | | `targets` | `uuid[]` (min 1) | — | screenIds layar yang akan dihasilkan ulang | | `operationVariant` | `"different_layout" \| "different_style" \| "from_scratch"` | — | Variasi gaya opsional | | `designs` | `DesignRequestData[]` | `[]` | Referensi desain (diselesaikan secara otomatis) | **Output** — `{ fileId, screenIds }`. Berikan setiap `screenId` ke `get-screen-image` untuk melihat hasil. *** ### `expand-design` Tambahkan layar lanjutan ke desain yang ada. Memerlukan setidaknya satu `screenId` dalam `targets` dan `operationVariant` yang wajib. Blok sampai generasi selesai atau timeout (180 detik). **Input** | Parameter | Type | Default | Deskripsi | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------- | | `fileId` | `uuid` | — | File target | | `message` | `string` | — | Teks prompt | | `targets` | `uuid[]` (min 1) | — | screenIds layar yang akan diperluas | | `operationVariant` | `"next_screen" \| "error_state" \| "empty_state" \| "web_version" \| "mobile_version" \| "tablet_version" \| "mobile_ios_version" \| "mobile_android_version"` | — | **Diperlukan** — jenis layar lanjutan yang akan dihasilkan | | `designs` | `DesignRequestData[]` | `[]` | Referensi desain (diselesaikan secara otomatis) | **Output** — `{ fileId, screenIds }`. Berikan setiap `screenId` ke `get-screen-image` untuk melihat hasil. *** ### `edit-design` Ubah layar yang ada melalui prompt. Memerlukan setidaknya satu `screenId` dalam `targets`. Blok sampai generasi selesai atau timeout (180 detik). **Input** | Parameter | Type | Default | Deskripsi | | ------------------ | ------------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------- | | `fileId` | `uuid` | — | File target | | `message` | `string` | — | Instruksi yang menjelaskan edit yang akan diterapkan | | `targets` | `uuid[]` (min 1) | — | screenIds layar yang akan diedit | | `operationVariant` | `"dark_theme" \| "light_theme" \| "make_pretty"` | — | Jalan pintas gaya opsional | | `attachments` | `AttachmentRequestData[]` (max 5) | `[]` | Lampiran yang telah diunggah sebelumnya. Selalu unggah melalui `upload-attachment` terlebih dahulu | | `designs` | `DesignRequestData[]` | `[]` | Referensi desain (diselesaikan secara otomatis) | **Output** — `{ fileId, screenIds }`. Berikan setiap `screenId` ke `get-screen-image` untuk melihat hasil. *** ### `upload-attachment` Unggah file untuk digunakan sebagai lampiran dalam `create-new-design` atau `edit-design`. Mengembalikan `{ id, path, type, mimeType }` — berikan objek ini langsung ke dalam array `attachments`. Dua mode: **Mode 1 — Layar berdasarkan ID** Berikan `screenId` dan `fileId`. Server mengambil status layar dari database dan merender sebagai gambar. | Parameter | Type | Deskripsi | | ---------- | ------ | ----------------------------------- | | `fileId` | `uuid` | File yang berisi layar (diperlukan) | | `screenId` | `uuid` | Layar untuk dirender | **Mode 2 — File eksternal** Berikan konten file secara langsung. File biner harus dienkode base64; file teks (termasuk kode sumber) dilewatkan sebagai string UTF-8 biasa. | Parameter | Type | Deskripsi | | ---------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | | `fileData` | `string` | Konten file — base64 untuk biner, string UTF-8 untuk teks | | `fileName` | `string` | Nama file asli | | `mimeType` | `"image/jpeg" \| "image/png" \| "image/webp" \| "application/pdf" \| "text/plain" \| "text/javascript"` | Jenis MIME. Gunakan `text/javascript` untuk file `.jsx`, `.tsx`, `.js`, `.ts` | Ukuran file maks: **3 MB**. Untuk gambar besar, lebih sukai `image/jpeg` daripada `image/png`. **Output** ```json theme={"system"} { "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890", "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890", "type": "image", "mimeType": "image/jpeg" } ``` `type` adalah `"image"` untuk unggahan gambar/PDF dan `"document"` untuk file teks/kode. *** ## Alat Obrolan ### `get-chat-history` Dapatkan riwayat pesan obrolan untuk file. **Input** | Parameter | Type | Deskripsi | | --------- | ------ | --------- | | `fileId` | `uuid` | ID File | **Output** — Objek JSON dengan array `messages`. Setiap pesan memiliki `type` (`"request"` atau `"response"`), `author` (`"human"` atau `"ai"`), dan `content_type` (`"text"`, `"summary"`, atau `"followup"`). ```json theme={"system"} { "messages": [ { "id": "453f593d-2380-425b-ba29-127db08d6a8e", "chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b", "type": "request", "status": "success", "content": "Generate a simple mobile login screen with email and password fields", "author": "human", "content_type": "text", "sequence": 1, "request_message_id": null, "targets": [], "attachments": [] }, { "id": "d860186b-82d5-4bd1-8e8e-8ba5377a14bf", "chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b", "type": "response", "status": "success", "content": "Generated a mobile login screen with email and password input fields, sign in button, remember me checkbox, forgot password link, social login options (Apple/Google), and 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" }], "attachments": [] } ] } ``` *** ## Alat Desain ### `get-design-guidelines` Dapatkan panduan desain yang disimpan untuk file. **Input** | Parameter | Type | Default | Deskripsi | | ------------ | -------- | -------- | ----------------- | | `resourceId` | `uuid` | — | ID File | | `linkedTo` | `"file"` | `"file"` | Jenis sumber daya | **Output** ```json theme={"system"} { "guidelines": "## Colors\n\nPrimary: #6366F1\nBackground: #FFFFFF\n\n## Typography\n\nFont: Inter", "linkedTo": "file" } ``` `guidelines` adalah `null` jika tidak ada panduan yang telah ditetapkan. *** ### `update-design-guidelines` Tetapkan atau ganti panduan desain untuk file. Panduan dilewatkan sebagai string teks biasa dalam format `design.md` Google — jangan lewatkan objek atau JSON. Server melakukan validasi lembut dan dapat mengembalikan bagian `Warnings:` dalam respons yang mencantumkan masalah (kunci tidak diketahui, warna non-heksadesimal) yang diterima tetapi dapat diabaikan oleh AI. Tampilkan ini kepada pengguna. **Input** | Parameter | Type | Default | Deskripsi | | ------------------ | ---------------- | -------- | -------------------------------------------------------------------------- | | `resourceId` | `uuid` | — | ID File | | `designGuidelines` | `string` (min 1) | — | Konten teks mentah panduan. Harus berupa string biasa — bukan JSON-encoded | | `linkedTo` | `"file"` | `"file"` | Jenis sumber daya | **Aturan Validasi** * Frontmatter harus dibuka dan ditutup dengan benar * Baris Frontmatter harus berupa YAML gaya blok yang valid * Isi Markdown tidak boleh mengandung judul bagian `##` yang duplikat **Output** — `"Design guidelines updated successfully"`, secara opsional diikuti oleh bagian `Warnings:`. *** ### `delete-design-guidelines` Hapus panduan desain untuk file. **Input** | Parameter | Type | Default | Deskripsi | | ------------ | -------- | -------- | ----------------- | | `resourceId` | `uuid` | — | ID File | | `linkedTo` | `"file"` | `"file"` | Jenis sumber daya | **Output** — `"Design guidelines deleted successfully"` *** ## Alat Figma ### `import-figma` Impor kerangka Figma ke file Flowstep sebagai elemen yang dapat diedit di kanvasnya. Mengimpor ulang kerangka yang sama akan memperbarui tempatnya. Organisasi file harus memiliki Figma yang terhubung di pengaturan Flowstep. **Input** | Parameter | Type | Deskripsi | | ---------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `figmaUrl` | `string` | Tautan ke kerangka Figma tertentu. Di Figma, klik kanan kerangka dan pilih **Copy link to selection**. Tautan ke halaman mengimpor semua kerangka tingkat atas di halaman itu (terbatas pada 20 kerangka melalui MCP). | | `fileId` | `uuid` | File Flowstep untuk mengimpor kerangka ke dalamnya | **Output** — `{ fileId, screenId }`. `screenId` adalah id elemen layar yang diimpor — berikan ke `get-screen-image` untuk melihat hasilnya. Saat URL halaman mengimpor beberapa kerangka, `screenId` adalah `null` dan `frameCount` dikembalikan sebagai gantinya. ```json theme={"system"} { "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe" } ``` *** ## Alat Penagihan ### `get-plan-details` Dapatkan paket pengguna saat ini, status langganan, dan kuota yang tersisa. Tidak memerlukan input. **Output** ```json theme={"system"} { "plan": { "name": "Starter", "code": "starter", "type": "paid" }, "subscription": { "isPaid": true, "isTrial": false, "startDate": "2025-01-01T00:00:00Z", "endDate": null, "trialDaysRemaining": null }, "limits": { "messages": { "daily": { "max": 50, "warn": 40 }, "monthly": { "max": 500, "warn": 400 }, "unlimited": false } }, "usage": { "messages": { "daily": 12, "monthly": 87 } }, "remaining": { "messages": { "daily": 38, "monthly": 413 } } } ``` Batas bervariasi menurut paket. Panggil alat ini sebelum batch generasi untuk memeriksa kuota yang tersedia.