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

> Streamable HTTP MCP 전송을 사용하여 Flowstep을 Windsurf에 연결합니다.

## 구성

`~/.codeium/windsurf/mcp_config.json`을 편집합니다:

```json theme={"system"}
{
  "mcpServers": {
    "flowstep": {
      "serverUrl": "https://api.flowstep.ai/mcp"
    }
  }
}
```

저장한 후 Windsurf를 다시 시작합니다.

## 인증

처음 사용할 때 Windsurf가 브라우저를 Flowstep OAuth 로그인 페이지로 엽니다. Flowstep 자격 증명(이메일/비밀번호 또는 Google SSO)으로 로그인하면 Windsurf가 토큰을 저장합니다.

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

## 연결 확인

Windsurf에서 MCP 패널을 열고 Flowstep이 나열되어 있는지 확인합니다. Cascade 채팅에서:

```
List my Flowstep files
```

## 사용 예

```
Create a Flowstep file called "Empty states", then generate a mobile empty-state screen
for a task list app with an illustration placeholder and a call-to-action button.
Show me the rendered result.
```