> ## 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`를 호출하고 결과를 표시합니다.