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

> Flowstep を claude.ai に接続し、カスタム MCP コネクタを使用します。

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 ツールを順序立てて呼び出し、レンダリングされた画像をインラインで表示します。