MCP 快速入門 - Flowstep

先決條件

一個 Flowstep 帳戶 (app.flowstep.ai)

Cursor
Claude Code

需要 Cursor v0.43+

步驟 1 — 新增伺服器

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

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

儲存後重新啟動 Cursor。

步驟 2 — 身份驗證

開啟 Cursor MCP 面板（Settings → MCP）並按一下 Flowstep 旁的 Connect。Cursor 會開啟瀏覽器進行 Flowstep OAuth 登入。使用你的 Flowstep 認證登入（電子郵件/密碼或 Google）。瀏覽器重新導向回來，Cursor 會自動儲存令牌。

你需要先有 Flowstep 帳戶才能進行身份驗證。如果還沒有帳戶，請先在 app.flowstep.ai 註冊。

步驟 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。你會在聊天中內聯看到呈現的設計。

需要 Claude Code CLI

步驟 1 — 新增伺服器

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

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

Claude Code HTTP 伺服器需要 "type": "http" 欄位。Cursor 不需要它。

步驟 2 — 身份驗證

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

你需要先有 Flowstep 帳戶才能進行身份驗證。如果還沒有帳戶，請先在 app.flowstep.ai 註冊。

步驟 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。你會在聊天中內聯看到呈現的設計。

後續步驟

工具參考 — 全部 19 個工具的完整輸入/輸出文件
範例 — 多步驟工作流程
其他客戶端 — Windsurf、Claude Desktop、claude.ai

​先決條件

​步驟 1 — 新增伺服器

​步驟 2 — 身份驗證

​步驟 3 — 執行工具呼叫

​步驟 4 — 產生畫面

​步驟 1 — 新增伺服器

​步驟 2 — 身份驗證

​步驟 3 — 執行工具呼叫

​步驟 4 — 產生畫面

​後續步驟

先決條件

步驟 1 — 新增伺服器

步驟 2 — 身份驗證

步驟 3 — 執行工具呼叫

步驟 4 — 產生畫面

步驟 1 — 新增伺服器

步驟 2 — 身份驗證

步驟 3 — 執行工具呼叫

步驟 4 — 產生畫面

後續步驟