Referensi Alat MCP

Semua alat mengembalikan array content dari blok konten MCP. Alat teks mengembalikan { type: "text", text: "<json-string>" }. Alat gambar mengembalikan { type: "image", data: "<base64>", 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.

[
  {
    "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.

{
  "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.

{
  "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.

{
  "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.

[
  {
    "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.

<!-- screenType: "iphone-x-vertical" width: "375" height: "812" name: "Change to a light theme" colorTheme: "blue" screenId: "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0" -->
<div className="bg-white text-zinc-950 w-full h-fit">
  <div className="flex p-6 flex-col gap-6">
    <div className="flex pt-4 justify-between items-center">
      <ArrowLeft className="size-5 text-[#71717b]" />
      <span className="font-semibold text-zinc-950 text-lg leading-7">
        World Clock
      </span>
      <Plus className="size-5 text-[#2b7fff]" />
    </div>
    <div className="rounded-xl bg-zinc-100 flex p-2 items-center gap-2">
      <Search className="size-4 text-[#71717b] ml-2" />
      <span className="text-[#71717b] text-sm leading-5">Search cities...</span>
    </div>
...
    <div className="flex pt-2 pb-4 justify-center items-center gap-4">
      <Button variant="outline" className="rounded-full px-6 gap-2">
        <Clock className="size-4" />
        <span>Compare</span>
      </Button>
      <Button className="rounded-full bg-[#2b7fff] text-blue-50 px-6 gap-2">
        <Bell className="size-4" />
        <span>Set Alert</span>
      </Button>
    </div>
  </div>
</div>;

`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 <name>”), atau “Untitled” jika tidak ada.  Output — ID layar yang baru ditambahkan.

{ "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.

{
  "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

{
  "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").

{
  "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

{
  "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.

{
  "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

{
  "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.

Memulai

Menggunakan Flowstep

Tim & Organisasi

Ekspor & Integrasi

Server MCP

Penagihan & Paket

Keamanan & Privasi

Referensi Alat MCP

Alat File

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Alat Layar

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

Alat AI

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Alat Obrolan

`get-chat-history`

Alat Desain

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Alat Figma

`import-figma`

Alat Penagihan

`get-plan-details`

​Alat File

​list-files

​get-file

​create-file

​update-file

​delete-file

​Alat Layar

​list-screens

​get-screen

​add-screen

​get-screen-image

​Alat AI

​create-new-design

​regenerate-design

​expand-design

​edit-design

​upload-attachment

​Alat Obrolan

​get-chat-history

​Alat Desain

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Alat Figma

​import-figma

​Alat Penagihan

​get-plan-details

Alat File

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Alat Layar

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

Alat AI

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Alat Obrolan

`get-chat-history`

Alat Desain

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Alat Figma

`import-figma`

Alat Penagihan

`get-plan-details`