Mulai cepat MCP

Prasyarat

Akun Flowstep (app.flowstep.ai)

Menggunakan Claude di claude.ai atau Claude Desktop? Flowstep adalah konektor yang terdaftar di direktori Claude. Tambahkan dalam satu klik dari claude.ai/directory/flowstep. Lihat claude.ai.

Cursor
Claude Code

Memerlukan Cursor v0.43+

Langkah 1 — Tambahkan server

Klik Add Flowstep to Cursor untuk memasangnya dalam satu klik, atau buat atau edit ~/.cursor/mcp.json (global) atau .cursor/mcp.json di root proyek Anda:

{
  "mcpServers": {
    "flowstep": {
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}

Mulai ulang Cursor setelah menyimpan.

Langkah 2 — Autentikasi

Buka panel MCP Cursor (Settings → MCP) lalu klik Connect di sebelah Flowstep. Cursor membuka browser Anda ke halaman masuk Flowstep. Masuk dengan kredensial Flowstep Anda (email/password atau Google), lalu klik Allow di layar persetujuan. Browser akan mengalihkan kembali dan Cursor menyimpan token secara otomatis.

Anda memerlukan akun Flowstep sebelum melakukan autentikasi. Jika belum punya, daftar di app.flowstep.ai terlebih dahulu.

Langkah 3 — Jalankan pemanggilan alat

Di chat Cursor, tanyakan:

“List my Flowstep files”

Cursor memanggil list-files dan mengembalikan daftar file Anda. Jika responsnya kosong, buat file terlebih dahulu:

“Create a new Flowstep file called ‘Dashboard‘“

Langkah 4 — Buat layar

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

Cursor memanggil ai-design-screens (yang membuat file baru dan menghasilkan layar sekaligus), lalu get-screen-image. Anda akan melihat desain hasil render langsung di chat.

Memerlukan CLI Claude Code

Langkah 1 — Tambahkan server

Jalankan perintah ini di proyek Anda:

claude mcp add --transport http flowstep https://api.flowstep.ai/mcp

Untuk membagikan server kepada tim Anda, tambahkan ke .mcp.json di root proyek Anda:

{
  "mcpServers": {
    "flowstep": {
      "type": "http",
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}

Kolom "type": "http" wajib ada untuk server HTTP Claude Code. Cursor tidak memerlukannya.

Langkah 2 — Autentikasi

Jalankan alat Flowstep apa pun dari chat Claude Code. Pada penggunaan pertama, Claude Code membuka browser Anda ke halaman masuk Flowstep. Masuk dengan kredensial Flowstep Anda (email/password atau Google), lalu klik Allow di layar persetujuan. Browser akan mengalihkan kembali dan token disimpan secara otomatis. Ketik /mcp di Claude Code untuk memeriksa apakah Flowstep sudah terhubung.

Anda memerlukan akun Flowstep sebelum melakukan autentikasi. Jika belum punya, daftar di app.flowstep.ai terlebih dahulu.

Langkah 3 — Jalankan pemanggilan alat

Di chat Claude Code, tanyakan:

“List my Flowstep files”

Claude Code memanggil list-files dan mengembalikan daftar file Anda. Jika responsnya kosong, buat file terlebih dahulu:

“Create a new Flowstep file called ‘Dashboard‘“

Langkah 4 — Buat layar

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

Claude Code memanggil ai-design-screens (yang membuat file baru dan menghasilkan layar sekaligus), lalu get-screen-image. Anda akan melihat desain hasil render langsung di chat.

ai-design-screens dan alat desain AI lainnya menggunakan kuota pesan Flowstep Anda. Mencantumkan, membaca, dan merender layar gratis. Lihat Batas penggunaan.

Langkah berikutnya

Referensi alat: referensi input/output lengkap untuk semua 22 alat
Contoh: alur kerja multi-langkah
Klien lainnya: Windsurf, Codex, Claude Desktop, claude.ai

Memulai

Menggunakan Flowstep

Tim & Organisasi

Ekspor & Integrasi

Server MCP

Penagihan & Paket

Keamanan & Privasi

Prasyarat

Langkah 1 — Tambahkan server

Langkah 2 — Autentikasi

Langkah 3 — Jalankan pemanggilan alat

Langkah 4 — Buat layar

Langkah 1 — Tambahkan server

Langkah 2 — Autentikasi

Langkah 3 — Jalankan pemanggilan alat

Langkah 4 — Buat layar

Langkah berikutnya

​Prasyarat

​Langkah 1 — Tambahkan server

​Langkah 2 — Autentikasi

​Langkah 3 — Jalankan pemanggilan alat

​Langkah 4 — Buat layar

​Langkah 1 — Tambahkan server

​Langkah 2 — Autentikasi

​Langkah 3 — Jalankan pemanggilan alat

​Langkah 4 — Buat layar

​Langkah berikutnya

Prasyarat

Langkah 1 — Tambahkan server

Langkah 2 — Autentikasi

Langkah 3 — Jalankan pemanggilan alat

Langkah 4 — Buat layar

Langkah 1 — Tambahkan server

Langkah 2 — Autentikasi

Langkah 3 — Jalankan pemanggilan alat

Langkah 4 — Buat layar

Langkah berikutnya