> ## 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.

# Flowstep MCP — claude.ai

> 使用自定义 MCP 连接器将 Flowstep 连接到 claude.ai。

claude.ai 通过「集成」面板支持自定义 MCP 连接器。

## 添加连接器

<Steps>
  <Step title="打开集成">
    转至 **claude.ai → Settings (设置) → Integrations (集成)**。
  </Step>

  <Step title="添加自定义连接器">
    点击 **Add More (添加更多)** (或 **Custom Connector (自定义连接器)**)，然后输入：

    ```
    https://api.flowstep.ai/mcp
    ```
  </Step>

  <Step title="身份验证">
    claude.ai 将您的浏览器重定向到 `https://api.flowstep.ai/oauth/authorize`。使用您的 Flowstep 账户（电子邮件/密码或 Google SSO）登录。该页面将自动重定向回 claude.ai。
  </Step>

  <Step title="启用连接器">
    返回「集成」面板，确认 Flowstep 连接器显示为已连接。在您想使用它的对话中将其打开。
  </Step>
</Steps>

<Note>
  您需要现有的 Flowstep 账户才能进行身份验证。如果您没有账户，请先在 [app.flowstep.ai](https://app.flowstep.ai) 创建，然后返回此处完成连接器设置。
</Note>

## 验证连接

在启用了 Flowstep 连接器的 claude.ai 对话中：

```
List my Flowstep files
```

## 使用方法

连接后，用自然语言描述您想要的内容：

```
Create a Flowstep file called "Checkout flow" and generate a three-step checkout screen
for an e-commerce app: cart review, address entry, and payment. Show me each screen.
```

Claude 将按顺序调用 Flowstep 工具，并内联显示渲染后的图像。