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

# MCP 快速入門

> 將 Flowstep 連接到你的 AI 編輯器並執行首次工具呼叫。

## 前置條件

* Flowstep 帳戶 ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **需要 Cursor v0.43+**

    ## 步驟 1 — 新增伺服器

    建立或編輯 `~/.cursor/mcp.json`（全域）或專案根目錄中的 `.cursor/mcp.json`：

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

    儲存後重新啟動 Cursor。

    ## 步驟 2 — 身份驗證

    開啟 Cursor MCP 面板（Settings → MCP）並點擊 Flowstep 旁的 **Connect**。Cursor 在瀏覽器中打開 Flowstep OAuth 登入。使用你的 Flowstep 證書登入（電郵/密碼或 Google）。瀏覽器重新導向回來，Cursor 自動儲存令牌。

    <Note>
      在驗證前，你需要一個 Flowstep 帳戶。如果還沒有，請先在 [app.flowstep.ai](https://app.flowstep.ai) 註冊。
    </Note>

    ## 步驟 3 — 執行工具呼叫

    在 Cursor 聊天中，提問：

    > "List my Flowstep files"

    Cursor 呼叫 `list-files` 並傳回你的檔案列表。如果回應為空，請先建立檔案：

    > "Create a new Flowstep file called 'Dashboard'"

    ## 步驟 4 — 生成畫面

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    Cursor 呼叫 `create-new-design`（一步中建立檔案和生成畫面），然後呼叫 `get-screen-image`。你會在聊天中看到內聯的渲染設計。
  </Tab>

  <Tab title="Claude Code">
    **需要 Claude Code CLI**

    ## 步驟 1 — 新增伺服器

    在專案根目錄中建立 `.mcp.json`（專案範圍）或 `~/.claude/mcp.json`（全域）：

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "type": "http",
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    <Note>
      Claude Code HTTP 伺服器需要 `"type": "http"` 欄位。Cursor 不需要它。
    </Note>

    ## 步驟 2 — 身份驗證

    從 Claude Code 聊天執行任何 Flowstep 工具。首次使用時，Claude Code 在瀏覽器中打開 Flowstep OAuth 登入。使用你的 Flowstep 證書登入（電郵/密碼或 Google）。瀏覽器重新導向回來，令牌自動儲存。

    <Note>
      在驗證前，你需要一個 Flowstep 帳戶。如果還沒有，請先在 [app.flowstep.ai](https://app.flowstep.ai) 註冊。
    </Note>

    ## 步驟 3 — 執行工具呼叫

    在 Claude Code 聊天中，提問：

    > "List my Flowstep files"

    Claude Code 呼叫 `list-files` 並傳回你的檔案列表。如果回應為空，請先建立檔案：

    > "Create a new Flowstep file called 'Dashboard'"

    ## 步驟 4 — 生成畫面

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    Claude Code 呼叫 `create-new-design`（一步中建立檔案和生成畫面），然後呼叫 `get-screen-image`。你會在聊天中看到內聯的渲染設計。
  </Tab>
</Tabs>

## 後續步驟

* [工具參考](/zh-Hant/mcp/tools) — 全部 20 個工具的完整輸入/輸出文件
* [範例](/zh-Hant/mcp/examples) — 多步工作流程
* [其他用戶端](/zh-Hant/mcp/clients/claude-code) — Windsurf、Claude Desktop、claude.ai