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

​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 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 Penagihan

`get-plan-details`