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

> 커스텀 MCP 커넥터를 사용하여 Flowstep을 claude.ai에 연결합니다.

claude.ai는 Integrations 패널을 통해 커스텀 MCP 커넥터를 지원합니다.

## 커넥터 추가

<Steps>
  <Step title="Integrations 열기">
    **claude.ai → Settings → Integrations**로 이동합니다.
  </Step>

  <Step title="커스텀 커넥터 추가">
    **Add More** (또는 **Custom Connector**)를 클릭한 후 다음을 입력합니다:

    ```
    https://api.flowstep.ai/mcp
    ```
  </Step>

  <Step title="인증">
    claude.ai는 브라우저를 `https://api.flowstep.ai/oauth/authorize`로 리다이렉트합니다. Flowstep 계정(이메일/비밀번호 또는 Google SSO)으로 로그인합니다. 페이지는 자동으로 claude.ai로 다시 리다이렉트됩니다.
  </Step>

  <Step title="커넥터 활성화">
    Integrations로 돌아가서 Flowstep 커넥터가 연결됨으로 표시되는지 확인합니다. 사용하려는 대화에서 이를 켜집니다.
  </Step>
</Steps>

<Note>
  인증하려면 기존 Flowstep 계정이 필요합니다. 계정이 없으면 먼저 [app.flowstep.ai](https://app.flowstep.ai)에서 생성한 후 여기로 돌아와 커넥터 설정을 완료합니다.
</Note>

## 연결 확인

Flowstep 커넥터가 활성화된 claude.ai 대화에서:

```
List my Flowstep files
```

## 사용 방법

연결되면 원하는 내용을 자연어로 설명합니다:

```
Create a Flowstep file called "Checkout flow" and generate a three-step checkout screen
for an e-commerce app: cart review, address entry, and payment. Show me each screen.
```

Claude는 Flowstep 도구를 순서대로 호출하고 렌더링된 이미지를 인라인으로 표시합니다.