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
Output — Array JSON dari objek file.
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
Output — Objek file JSON.
create-file
Buat file Flowstep baru.
Input
Output — Objek file JSON dengan
id file baru.
id yang dikembalikan sebagai fileId dalam panggilan alat berikutnya.
update-file
Ubah nama file.
Input
Output — Objek file yang diperbarui dalam bentuk yang sama seperti
get-file.
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
Output —
"File deleted successfully"
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
Output — Array JSON dari ringkasan layar.
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
Output — Layar sebagai kode (JSX). Perhatikan komentar baris pertama yang diperlukan saat menggunakan alat
add-screen.
add-screen
Menambahkan layar baru ke file Flowstep dari string JSX mentah.
Input
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.
<!-- screenType: "iphone-x-vertical" width: "375" height: "812" name: "Change to a light theme" colorTheme: "blue" -->
Output — ID layar yang baru ditambahkan.
get-screen-image
Render layar ke PNG dan kembalikan sebagai gambar inline. Memerlukan klien yang mendukung blok konten gambar.
Input
Output — Blok konten gambar MCP (
image/png).
Alat AI
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
Output —
{ fileId, screenIds }. Berikan setiap screenId ke get-screen-image untuk melihat hasil.
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
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
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
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.
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.
Ukuran file maks: 3 MB. Untuk gambar besar, lebih sukai
image/jpeg daripada image/png.
Output
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
Output — Objek JSON dengan array
messages. Setiap pesan memiliki type ("request" atau "response"), author ("human" atau "ai"), dan content_type ("text", "summary", atau "followup").
Alat Desain
get-design-guidelines
Dapatkan panduan desain yang disimpan untuk file.
Input
Output
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
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
"Design guidelines updated successfully", secara opsional diikuti oleh bagian Warnings:.
delete-design-guidelines
Hapus panduan desain untuk file.
Input
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
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.