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

> Gunakan Flowstep sebagai server MCP untuk membuat, memeriksa, dan mengelola desain UI langsung dari Cursor, Claude Code, atau klien apa pun yang kompatibel dengan MCP.

Flowstep mengekspos alat desainnya melalui [Model Context Protocol](https://modelcontextprotocol.io/), memungkinkan asisten AI Anda membuat dan mengiterasi layar UI tanpa meninggalkan editor Anda.

Server dihosting di `https://api.flowstep.ai/mcp` (transportasi Streamable HTTP). Tidak ada proses lokal yang perlu dijalankan.

## Apa yang dapat Anda lakukan

Server mengekspos 20 alat di tujuh kategori:

| Kategori         | Alat                                                                                          |
| ---------------- | --------------------------------------------------------------------------------------------- |
| **File**         | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **Layar**        | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **Pembuatan AI** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` |
| **Chat**         | `get-chat-history`                                                                            |
| **Desain**       | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines`               |
| **Figma**        | `import-figma`                                                                                |
| **Penagihan**    | `get-plan-details`                                                                            |

## Kasus penggunaan umum

**Buat layar dari prompt** — panggil `create-new-design` dengan deskripsi. Flowstep membuat file dan layar dalam satu langkah. Panggil `get-screen-image` dengan `screenIds` yang dikembalikan untuk melihat hasilnya inline.

**Visualisasikan komponen React** — unggah file `.jsx` atau `.tsx` Anda melalui `upload-attachment` (gunakan `mimeType: text/javascript`), lalu teruskan attachment yang dikembalikan ke `create-new-design` dengan pesan yang menggambarkan komponen. Flowstep membaca sumber dan menghasilkan layar desain yang sesuai.

**Iterasikan pada desain** — panggil `edit-design` dengan target `screenId` dan instruksi untuk memodifikasinya, atau `regenerate-design` untuk membuat ulang layar dari awal.

**Pertahankan panduan desain** — panggil `get-design-guidelines` untuk mengambil aturan gaya Anda saat ini (warna, tipografi, spasi, nada), kemudian gunakan `update-design-guidelines` untuk menjaganya tetap sinkron seiring dengan desain Anda berkembang. Melewatkan panduan yang konsisten ke `create-new-design` atau `edit-design` memastikan setiap layar yang dihasilkan tetap on-brand. Gunakan `delete-design-guidelines` untuk menyetel ulang semuanya.

**Impor dari Figma** — panggil `import-figma` dengan tautan kerangka Figma dan `fileId` untuk membawa kerangka ke file Flowstep sebagai elemen yang dapat diedit. Organisasi file harus terhubung dengan Figma terlebih dahulu.

**Audit kuota** — panggil `get-plan-details` untuk melihat penggunaan harian dan bulanan yang tersisa sebelum memulai batch pembuatan.

## Titik Akhir

```
https://api.flowstep.ai/mcp
```

Transportasi: Streamable HTTP. Model sesi: stateless (setiap permintaan independen, tidak ada ID sesi).

## Langkah Berikutnya

<CardGroup cols={2}>
  <Card title="Mulai Cepat" icon="bolt" href="/id/mcp/quickstart">
    Panggilan alat pertama dalam waktu kurang dari 5 menit dengan Cursor.
  </Card>

  <Card title="Autentikasi" icon="lock" href="/id/mcp/authentication">
    Cara kerja OAuth 2.1 PKCE dan cara token dikeluarkan.
  </Card>

  <Card title="Alat" icon="wrench" href="/id/mcp/tools">
    Referensi input/output lengkap untuk semua 20 alat.
  </Card>

  <Card title="Contoh" icon="code" href="/id/mcp/examples">
    Alur kerja lengkap untuk tugas umum.
  </Card>
</CardGroup>