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