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

> 使用 Streamable HTTP MCP 傳輸協議將 Flowstep 連接至 Cursor。

## 設定

將伺服器新增至您的 MCP 設定。Cursor 在兩個位置尋找此檔案 — 使用全域檔案在所有專案中啟用，或使用專案檔案將其範圍限制在該專案。

<Tabs>
  <Tab title="全域 (~/.cursor/mcp.json)">
    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```
  </Tab>

  <Tab title="專案 (.cursor/mcp.json)">
    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```
  </Tab>
</Tabs>

儲存檔案後重新啟動 Cursor。

## 驗證

開啟 **Settings → MCP** 並點擊 Flowstep 旁的 **Connect**。Cursor 會開啟您的瀏覽器至 `https://api.flowstep.ai/oauth/authorize`。使用您的 Flowstep 認證（電子郵件/密碼或 Google 單一登入）登入。Cursor 會自動擷取回調並儲存令牌。

<Note>
  連接前您需要有 Flowstep 帳戶。可在 [app.flowstep.ai](https://app.flowstep.ai) 建立。
</Note>

## 驗證連接

在 Cursor 聊天中，輸入：

```
List my Flowstep files
```

如果工具呼叫成功，連接即可運作。

## 使用範例

```
Create a Flowstep file called "Onboarding", generate a mobile sign-up screen
with name, email, and password fields, then show me the image.
```

Cursor 會依序呼叫 `create-file` → `ai-prompt` → `get-screen-image`。