Memulai Cepat MCP

Persyaratan

Akun Flowstep (app.flowstep.ai)

Cursor
Claude Code

Memerlukan Cursor v0.43+

Langkah 1 — Tambahkan server

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 Cursor MCP (Pengaturan → MCP) dan klik Connect di sebelah Flowstep. Cursor membuka browser Anda ke login OAuth Flowstep. Masuk dengan kredensial Flowstep Anda (email/sandi atau Google). Browser mengarahkan kembali dan Cursor menyimpan token secara otomatis.

Anda memerlukan akun Flowstep sebelum mengautentikasi. Jika Anda tidak memilikinya, daftar di app.flowstep.ai terlebih dahulu.

Langkah 3 — Jalankan panggilan alat

Dalam obrolan Cursor, tanyakan:

“Daftar file Flowstep saya”

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

“Buat file Flowstep baru yang disebut ‘Dashboard‘“

Langkah 4 — Buat layar

Buat file Flowstep baru yang disebut "Login flow", kemudian buat layar login mobile untuk aplikasi SaaS dengan bidang email/sandi dan tombol sign-in Google. Setelah selesai, tampilkan gambarnya kepada saya.

Cursor memanggil create-new-design (yang membuat file dan menghasilkan layar dalam satu langkah), kemudian get-screen-image. Anda akan melihat desain yang dirender inline dalam obrolan.

Memerlukan CLI Claude Code

Langkah 1 — Tambahkan server

Buat .mcp.json di root proyek Anda (lingkup proyek) atau ~/.claude/mcp.json (global):

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

Bidang "type": "http" diperlukan untuk server HTTP Claude Code. Cursor tidak membutuhkannya.

Langkah 2 — Autentikasi

Jalankan alat Flowstep apa pun dari obrolan Claude Code. Pada penggunaan pertama, Claude Code membuka browser Anda ke login OAuth Flowstep. Masuk dengan kredensial Flowstep Anda (email/sandi atau Google). Browser mengarahkan kembali dan token disimpan secara otomatis.

Anda memerlukan akun Flowstep sebelum mengautentikasi. Jika Anda tidak memilikinya, daftar di app.flowstep.ai terlebih dahulu.

Langkah 3 — Jalankan panggilan alat

Dalam obrolan Claude Code, tanyakan:

“Daftar file Flowstep saya”

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

“Buat file Flowstep baru yang disebut ‘Dashboard‘“

Langkah 4 — Buat layar

Buat file Flowstep baru yang disebut "Login flow", kemudian buat layar login mobile untuk aplikasi SaaS dengan bidang email/sandi dan tombol sign-in Google. Setelah selesai, tampilkan gambarnya kepada saya.

Claude Code memanggil create-new-design (yang membuat file dan menghasilkan layar dalam satu langkah), kemudian get-screen-image. Anda akan melihat desain yang dirender inline dalam obrolan.

Langkah selanjutnya

Referensi alat — dokumentasi input/output lengkap untuk semua 19 alat
Contoh — alur kerja multi-langkah
Klien lain — Windsurf, Claude Desktop, claude.ai

​Persyaratan

​Langkah 1 — Tambahkan server

​Langkah 2 — Autentikasi

​Langkah 3 — Jalankan panggilan alat

​Langkah 4 — Buat layar

​Langkah 1 — Tambahkan server

​Langkah 2 — Autentikasi

​Langkah 3 — Jalankan panggilan alat

​Langkah 4 — Buat layar

​Langkah selanjutnya

Persyaratan

Langkah 1 — Tambahkan server

Langkah 2 — Autentikasi

Langkah 3 — Jalankan panggilan alat

Langkah 4 — Buat layar

Langkah 1 — Tambahkan server

Langkah 2 — Autentikasi

Langkah 3 — Jalankan panggilan alat

Langkah 4 — Buat layar

Langkah selanjutnya