MCP 快速入門

前置條件

一個 Flowstep 帳號（app.flowstep.ai）

使用 claude.ai 或 Claude Desktop 中的 Claude？Flowstep 已列於 Claude 的連接器目錄中，你可以從 claude.ai/directory/flowstep 一鍵新增。請參閱 claude.ai。

Cursor
Claude Code

需要 Cursor v0.43+

步驟 1 — 新增伺服器

點擊 Add Flowstep to Cursor，即可一鍵安裝；或建立或編輯 ~/.cursor/mcp.json（全域）或專案根目錄中的 .cursor/mcp.json：

{
  "mcpServers": {
    "flowstep": {
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}

儲存後請重新啟動 Cursor。

步驟 2 — 驗證身分

開啟 Cursor 的 MCP 面板（Settings → MCP），然後點擊 Flowstep 旁的 Connect。Cursor 會在瀏覽器中開啟 Flowstep 登入頁面。請使用你的 Flowstep 憑證登入（電子郵件/密碼或 Google），接著在授權畫面點擊 Allow。瀏覽器會重新導向回來，Cursor 會自動儲存權杖。

驗證身分前你需要一個 Flowstep 帳號。若尚未擁有帳號，請先在 app.flowstep.ai 註冊。

步驟 3 — 執行工具呼叫

在 Cursor 對話中詢問：

「列出我的 Flowstep 檔案」

Cursor 會呼叫 list-files 並回傳你的檔案清單。若回應為空，請先建立檔案：

「建立一個名為 ‘Dashboard’ 的新 Flowstep 檔案」

步驟 4 — 產生畫面

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

Cursor 會呼叫 ai-design-screens（它會在一個步驟中建立新檔案並產生畫面），接著呼叫 get-screen-image。你會在對話中直接看到渲染後的設計。

需要 Claude Code CLI

步驟 1 — 新增伺服器

在你的專案中執行以下指令：

claude mcp add --transport http flowstep https://api.flowstep.ai/mcp

若要與團隊共用伺服器，請改將它加入專案根目錄的 .mcp.json：

{
  "mcpServers": {
    "flowstep": {
      "type": "http",
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}

"type": "http" 欄位是 Claude Code HTTP 伺服器所必需的。Cursor 則不需要此欄位。

步驟 2 — 驗證身分

在 Claude Code 對話中執行任一 Flowstep 工具。第一次使用時，Claude Code 會在瀏覽器中開啟 Flowstep 登入頁面。請使用你的 Flowstep 憑證登入（電子郵件/密碼或 Google），接著在授權畫面點擊 Allow。瀏覽器會重新導向回來，權杖會自動儲存。在 Claude Code 中輸入 /mcp，即可確認 Flowstep 是否已連接。

驗證身分前你需要一個 Flowstep 帳號。若尚未擁有帳號，請先在 app.flowstep.ai 註冊。

步驟 3 — 執行工具呼叫

在 Claude Code 對話中詢問：

「列出我的 Flowstep 檔案」

Claude Code 會呼叫 list-files 並回傳你的檔案清單。若回應為空，請先建立檔案：

「建立一個名為 ‘Dashboard’ 的新 Flowstep 檔案」

步驟 4 — 產生畫面

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

Claude Code 會呼叫 ai-design-screens（它會在一個步驟中建立新檔案並產生畫面），接著呼叫 get-screen-image。你會在對話中直接看到渲染後的設計。

ai-design-screens 及其他 AI 設計工具會使用你的 Flowstep 訊息額度。列出、讀取與渲染畫面皆免費。請參閱使用限制。

後續步驟

工具參考：全部 22 個工具的完整輸入／輸出文件
範例：多步驟工作流程
其他用戶端：Windsurf、Codex、Claude Desktop、claude.ai

快速開始

使用 Flowstep

團隊與組織

匯出與整合

MCP 伺服器

計費與方案

安全與隱私

前置條件

步驟 1 — 新增伺服器

步驟 2 — 驗證身分

步驟 3 — 執行工具呼叫

步驟 4 — 產生畫面

步驟 1 — 新增伺服器

步驟 2 — 驗證身分

步驟 3 — 執行工具呼叫

步驟 4 — 產生畫面

後續步驟

​前置條件

​步驟 1 — 新增伺服器

​步驟 2 — 驗證身分

​步驟 3 — 執行工具呼叫

​步驟 4 — 產生畫面

​步驟 1 — 新增伺服器

​步驟 2 — 驗證身分

​步驟 3 — 執行工具呼叫

​步驟 4 — 產生畫面

​後續步驟

前置條件

步驟 1 — 新增伺服器

步驟 2 — 驗證身分

步驟 3 — 執行工具呼叫

步驟 4 — 產生畫面

步驟 1 — 新增伺服器

步驟 2 — 驗證身分

步驟 3 — 執行工具呼叫

步驟 4 — 產生畫面

後續步驟