> ## 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 單一登入）。頁面會自動重新導向回 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 工具，並內嵌顯示已呈現的影像。