> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# MCP 快速开始

> 将 Flowstep 连接到你的 AI 编辑器并运行你的第一个工具调用。

## 前提条件

* 一个 Flowstep 账户（[app.flowstep.ai](https://app.flowstep.ai)）

<Tabs>
  <Tab title="Cursor">
    **需要 Cursor v0.43+**

    ## 步骤 1 —— 添加服务器

    创建或编辑 `~/.cursor/mcp.json`（全局）或项目根目录中的 `.cursor/mcp.json`：

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    保存后重启 Cursor。

    ## 步骤 2 —— 身份验证

    打开 Cursor MCP 面板（Settings → MCP）并点击 Flowstep 旁的 **Connect**。Cursor 将打开你的浏览器进入 Flowstep OAuth 登录。使用你的 Flowstep 凭证（电子邮件/密码或 Google）登录。浏览器重定向回去，Cursor 自动存储令牌。

    <Note>
      你需要在身份验证之前有一个 Flowstep 账户。如果你没有，请先在 [app.flowstep.ai](https://app.flowstep.ai) 注册。
    </Note>

    ## 步骤 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`。你会在聊天中看到渲染的设计。
  </Tab>

  <Tab title="Claude Code">
    **需要 Claude Code CLI**

    ## 步骤 1 —— 添加服务器

    在项目根目录中创建 `.mcp.json`（项目作用域）或 `~/.claude/mcp.json`（全局）：

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "type": "http",
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    <Note>
      Claude Code HTTP 服务器需要 `"type": "http"` 字段。Cursor 不需要它。
    </Note>

    ## 步骤 2 —— 身份验证

    从 Claude Code 聊天中运行任何 Flowstep 工具。首次使用时，Claude Code 将打开你的浏览器进入 Flowstep OAuth 登录。使用你的 Flowstep 凭证（电子邮件/密码或 Google）登录。浏览器重定向回去，令牌自动存储。

    <Note>
      你需要在身份验证之前有一个 Flowstep 账户。如果你没有，请先在 [app.flowstep.ai](https://app.flowstep.ai) 注册。
    </Note>

    ## 步骤 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`。你会在聊天中看到渲染的设计。
  </Tab>
</Tabs>

## 后续步骤

* [工具参考](/zh/mcp/tools) —— 全部 20 个工具的完整输入/输出文档
* [示例](/zh/mcp/examples) —— 多步工作流
* [其他客户端](/zh/mcp/clients/claude-code) —— Windsurf、Claude Desktop、claude.ai