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 —— 生成屏幕

后续步骤