Langsung ke konten utama
Flowstep adalah kanvas desain untuk perangkat lunak yang dibangun oleh agen. Server MCP Flowstep membuka kanvas tersebut melalui Model Context Protocol, sehingga agen yang sudah dipakai tim Anda dapat membuat layar, melihat hasil render-nya, dan membangun dari situ, tanpa meninggalkan editor atau terminal. Layar yang dibuat agen melalui MCP masuk ke file Flowstep yang sama dengan tempat tim Anda bekerja. Layar tersebut tetap bisa diedit di kanvas, dibagikan, dan siap diekspor atau disalin ke Figma. Server ini di-host di https://api.flowstep.ai/mcp (transport Streamable HTTP). Tidak ada proses lokal yang perlu dijalankan dan tidak ada kunci API yang perlu dikelola. Klien masuk dengan akun Flowstep Anda melalui OAuth.

​
Yang bisa Anda lakukan

Server ini menyediakan 22 alat dalam delapan kategori: Ketiga alat desain AI menggunakan kuota pesan yang sama dengan aplikasi Flowstep. Semua alat lainnya gratis. Lihat Batas penggunaan.

​
Kasus penggunaan umum

Buat layar dari prompt: panggil ai-design-screens dengan deskripsi. Jika fileId dihilangkan, Flowstep membuat file dan layarnya sekaligus. Panggil get-screen-image untuk setiap screenId yang dikembalikan agar hasilnya terlihat secara langsung. Visualisasikan komponen React: unggah sumber .jsx atau .tsx Anda dengan upload-attachment (mimeType: text/javascript), lalu berikan lampiran yang dikembalikan ke ai-design-screens dengan pesan yang menjelaskan layar. Flowstep membaca sumber dan membuat desain yang sesuai. Iterasi pada desain: panggil ai-design-screens dengan satu atau beberapa screenId (atau id elemen individual) di elementIds dan instruksi bebas untuk mengubahnya langsung di tempat. Panggilan yang sama juga dapat menambahkan layar baru, sehingga satu permintaan bisa mengedit satu layar sekaligus membangun layar berikutnya. Gunakan ai-edit-screen-variant untuk menerapkan preset, seperti tema gelap atau tata letak yang berbeda, pada satu layar utuh. Perluas alur: panggil ai-generate-screen-variant untuk menambahkan layar berikutnya, kondisi error atau kosong, atau versi web, tablet, atau mobile dari layar yang sudah ada. Bekerja dari kode terlebih dahulu: baca layar apa pun sebagai JSX dengan get-screen-jsx, lalu tulis JSX Anda sendiri kembali dengan add-screen-jsx (layar baru) atau replace-screen-jsx (menimpa layar yang sudah ada). Untuk menggunakan gambar Anda sendiri, unggah dengan upload-attachment dan masukkan assetUrl yang dikembalikan ke JSX Anda. Alat-alat ini gratis. Jaga output tetap sesuai brand: gunakan update-design-guidelines untuk menyimpan warna, tipografi, dan aturan komponen Anda pada file sebagai teks DESIGN.md. Generasi AI terhadap file tersebut akan mengikutinya. Baca kembali dengan get-design-guidelines, atau hapus dengan delete-design-guidelines. Impor dari Figma: panggil import-figma dengan tautan frame Figma dan fileId untuk membawa frame ke kanvas sebagai elemen yang bisa diedit. Organisasi pemilik file harus sudah menghubungkan Figma terlebih dahulu. Periksa kuota Anda: panggil get-plan-details untuk melihat paket, penggunaan, dan sisa pesan Anda sebelum menjalankan sekumpulan generasi.

​
Endpoint

Transport: Streamable HTTP. Model sesi: stateless (setiap permintaan berdiri sendiri, tanpa ID sesi). Server mendukung versi protokol MCP 2026-07-28, yang diiklankan di https://api.flowstep.ai/.well-known/mcp.json. Klien yang menggunakan protokol 2025-11-25 yang lebih lama terhubung ke endpoint yang sama.

​
Langkah berikutnya

Mulai cepat

Hubungkan klien dan jalankan pemanggilan alat pertama Anda.

Autentikasi

Cara kerja masuk dan persetujuan OAuth 2.1 PKCE.

Alat

Referensi lengkap input dan output untuk semua 22 alat.

Contoh

Alur kerja end-to-end untuk tugas yang umum.