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"
    }
  }
}

Claude Code 的 HTTP 服务器必须包含 "type": "http" 字段。Cursor 不需要该字段。

第 2 步 — 进行身份验证

在 Claude Code 聊天中运行任意 Flowstep 工具。首次使用时，Claude Code 会在浏览器中打开 Flowstep 登录页面。使用您的 Flowstep 凭据登录（邮箱/密码或 Google），然后在授权页面上点击 Allow。浏览器会跳转回 Claude Code，令牌会自动存储。在 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 步 — 生成屏幕

后续步骤