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

# Flowstep MCP — claude.ai

> Hubungkan Flowstep ke claude.ai menggunakan konektor MCP khusus.

Claude.ai mendukung konektor MCP khusus melalui panel Integrasi.

## Tambahkan konektor

<Steps>
  <Step title="Buka Integrasi">
    Buka **claude.ai → Settings → Integrations**.
  </Step>

  <Step title="Tambahkan konektor khusus">
    Klik **Add More** (atau **Custom Connector**), lalu masukkan:

    ```
    https://api.flowstep.ai/mcp
    ```
  </Step>

  <Step title="Autentikasi">
    Claude.ai mengalihkan peramban Anda ke `https://api.flowstep.ai/oauth/authorize`. Masuk dengan akun Flowstep Anda (email/kata sandi atau Google SSO). Halaman akan mengalihkan kembali ke claude.ai secara otomatis.
  </Step>

  <Step title="Aktifkan konektor">
    Kembali ke Integrasi, konfirmasi konektor Flowstep ditampilkan sebagai terhubung. Nyalakan untuk percakapan di mana Anda ingin menggunakannya.
  </Step>
</Steps>

<Note>
  Anda memerlukan akun Flowstep yang ada untuk melakukan autentikasi. Jika Anda belum memilikinya, buat di [app.flowstep.ai](https://app.flowstep.ai) terlebih dahulu, lalu kembali ke sini untuk menyelesaikan pengaturan konektor.
</Note>

## Verifikasi koneksi

Dalam percakapan claude.ai dengan konektor Flowstep diaktifkan:

```
List my Flowstep files
```

## Penggunaan

Setelah terhubung, jelaskan apa yang Anda inginkan dalam bahasa alami:

```
Create a Flowstep file called "Checkout flow" and generate a three-step checkout screen
for an e-commerce app: cart review, address entry, and payment. Show me each screen.
```

Claude akan memanggil alat Flowstep secara berurutan dan menampilkan gambar yang dirender secara inline.