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 (Settings → 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:

“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

Create a new Flowstep file called "Login flow", then generate a mobile login screen
for a SaaS app with email/password fields and a Google sign-in button.
After it finishes, show me the image.

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:

“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

Create a new Flowstep file called "Login flow", then generate a mobile login screen
for a SaaS app with email/password fields and a Google sign-in button.
After it finishes, show me the image.

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 20 alat
Contoh — alur kerja multi-langkah
Klien lain — Windsurf, Claude Desktop, claude.ai

Memulai

Menggunakan Flowstep

Tim & Organisasi

Ekspor & Integrasi

Server MCP

Penagihan & Paket

Keamanan & Privasi

Memulai Cepat MCP

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

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