> ## 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 — Codex

> Hubungkan Flowstep ke OpenAI Codex menggunakan transport HTTP Streamable MCP.

## Konfigurasi

Tambahkan server dengan Codex CLI:

```bash theme={"system"}
codex mcp add flowstep --url https://api.flowstep.ai/mcp
```

Atau edit file konfigurasi secara langsung. Gunakan file global untuk mengaktifkannya di mana saja, atau file proyek (hanya proyek terpercaya) untuk menjaganya tetap terbatas.

<Tabs>
  <Tab title="Global (~/.codex/config.toml)">
    ```toml theme={"system"}
    [mcp_servers.flowstep]
    url = "https://api.flowstep.ai/mcp"
    ```
  </Tab>

  <Tab title="Project (.codex/config.toml)">
    ```toml theme={"system"}
    [mcp_servers.flowstep]
    url = "https://api.flowstep.ai/mcp"
    ```
  </Tab>
</Tabs>

Codex memilih transport HTTP Streamable secara otomatis ketika `url` diatur — tidak ada bidang transport yang diperlukan.

## Autentikasi

Jalankan:

```bash theme={"system"}
codex mcp login flowstep
```

Codex membuka browser Anda ke `https://api.flowstep.ai/oauth/authorize`. Masuk dengan kredensial Flowstep Anda (email/password atau Google SSO). Codex menangkap callback dan menyimpan token.

<Note>
  Anda memerlukan akun Flowstep sebelum menghubungkan. Buat satu di [app.flowstep.ai](https://app.flowstep.ai).
</Note>

## Verifikasi koneksi

```bash theme={"system"}
codex mcp list
```

Server harus muncul dengan status OAuth-nya. Di dalam sesi Codex, ketik `/mcp` untuk melihat server yang terhubung, kemudian tanya:

```
List my Flowstep files
```

Jika panggilan tools berhasil, koneksi berfungsi.

## Contoh penggunaan

```
Create a Flowstep file called "Checkout flow", generate a mobile payment screen
with a card form and an order summary, then show me the rendered image.
```

Codex akan memanggil `create-new-design` → `get-screen-image` dan menampilkan hasilnya.