> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Memulai Cepat MCP

> Hubungkan Flowstep ke editor AI Anda dan jalankan panggilan alat pertama Anda.

## Persyaratan

* Akun Flowstep ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **Memerlukan Cursor v0.43+**

    ## Langkah 1 — Tambahkan server

    Buat atau edit `~/.cursor/mcp.json` (global) atau `.cursor/mcp.json` di root proyek Anda:

    ```json theme={"system"}
    {
      "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.

    <Note>
      Anda memerlukan akun Flowstep sebelum mengautentikasi. Jika Anda tidak memilikinya, daftar di [app.flowstep.ai](https://app.flowstep.ai) terlebih dahulu.
    </Note>

    ## 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.
  </Tab>

  <Tab title="Claude Code">
    **Memerlukan CLI Claude Code**

    ## Langkah 1 — Tambahkan server

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

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "type": "http",
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    <Note>
      Bidang `"type": "http"` diperlukan untuk server HTTP Claude Code. Cursor tidak membutuhkannya.
    </Note>

    ## 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.

    <Note>
      Anda memerlukan akun Flowstep sebelum mengautentikasi. Jika Anda tidak memilikinya, daftar di [app.flowstep.ai](https://app.flowstep.ai) terlebih dahulu.
    </Note>

    ## 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.
  </Tab>
</Tabs>

## Langkah selanjutnya

* [Referensi alat](/id/mcp/tools) — dokumentasi input/output lengkap untuk semua 20 alat
* [Contoh](/id/mcp/examples) — alur kerja multi-langkah
* [Klien lain](/id/mcp/clients/claude-code) — Windsurf, Claude Desktop, claude.ai