> ## 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 を Codex に接続します。

## 設定

Codex CLI を使用してサーバーを追加してください：

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

または、設定ファイルを直接編集してください。グローバルファイルを使用すればすべてのプロジェクト全体で有効にでき、プロジェクトファイル（信頼できるプロジェクトのみ）を使用すればスコープを限定できます。

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

`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` を順番に呼び出して、結果を表示します。