MCP 快速入門

前置條件

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。你會在聊天中看到內聯的渲染設計。

後續步驟

工具參考 — 全部 20 個工具的完整輸入/輸出文件
範例 — 多步工作流程
其他用戶端 — Windsurf、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 — 生成畫面

後續步驟