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

> 透過 Streamable HTTP MCP 傳輸將 Flowstep 連接至 OpenAI Codex。

## 設定

使用 Codex CLI 新增伺服器：

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

或直接編輯配置檔案。使用全域檔案在所有地方啟用它，或使用專案檔案（僅限受信任的專案）將其範圍保持在本機。

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

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

設定 `url` 時，Codex 會自動選擇 Streamable HTTP 傳輸 — 不需要傳輸欄位。

## 驗證身分

執行：

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

Codex 會開啟您的瀏覽器至 `https://api.flowstep.ai/oauth/authorize`。使用您的 Flowstep 認證（電子郵件/密碼或 Google SSO）登入。Codex 會擷取回調並儲存權杖。

<Note>
  連接前，您需要一個 Flowstep 帳戶。請在 [app.flowstep.ai](https://app.flowstep.ai) 建立帳戶。
</Note>

## 驗證連接

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

伺服器應會出現及其 OAuth 狀態。在 Codex 工作階段內，輸入 `/mcp` 以查看連接的伺服器，然後提問：

```
List my Flowstep files
```

如果工具呼叫成功，連接即可運作。

## 使用範例

```
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 將呼叫 `create-new-design` → `get-screen-image` 並顯示結果。