> ## 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 — Claude Code

> Streamable HTTP MCP 트랜스포트를 사용하여 Flowstep을 Claude Code(CLI)에 연결합니다.

## 구성

Claude Code 설정에 서버를 추가합니다. 전역 설정 파일을 사용하여 모든 곳에서 활성화하거나 프로젝트별로 추가합니다.

<Tabs>
  <Tab title="전역 (~/.claude/settings.json)">
    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep-production": {
          "type": "http",
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```
  </Tab>

  <Tab title="프로젝트 (.claude/settings.json)">
    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep-production": {
          "type": "http",
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```
  </Tab>
</Tabs>

또는 CLI를 사용합니다:

```bash theme={"system"}
claude mcp add --transport http flowstep-production https://api.flowstep.ai/mcp
```

## 인증

Claude Code는 처음으로 Flowstep 도구를 호출할 때 OAuth 2.1 PKCE 흐름을 자동으로 처리합니다. 브라우저가 `https://api.flowstep.ai/oauth/authorize`로 열립니다. Flowstep 자격증명으로 로그인하면 CLI가 콜백을 캡처합니다.

<Note>
  인증하기 전에 Flowstep 계정이 필요합니다. [app.flowstep.ai](https://app.flowstep.ai)에서 계정을 만듭니다.
</Note>

## 연결 확인

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

서버가 연결된 것으로 표시되어야 합니다. 그 다음 Claude Code 세션에서:

```
내 Flowstep 파일 나열
```

## 사용 예시

```
"Settings page"라는 Flowstep 파일을 만들고, API 키, 알림 및 팀 멤버 섹션이 있는 개발자 도구용 데스크톱 설정 화면을 생성합니다. 완료되면 렌더링된 이미지를 보여줍니다.
```