# Dify を Web サイトのチャットウィジェット に接続する

Source: https://langbot.app/docs/ja/recipes/dify/web-page

LangBot で Dify アプリを Web サイトのチャットウィジェット のボットとして動かす手順：Dify の設定、ボットの認証情報、ネットワーク、テスト、トラブルシューティング。

このレシピではお使いの Dify アプリを Web サイトのチャットウィジェット のボットにつなぎます。LangBot が Web サイトのチャットウィジェット のメッセージを受け取り、パイプラインで処理して返信するので、プラットフォーム連携のコードは不要です。

Dify ではチャットアシスタント、Chatflow、エージェント、ワークフローを作れます。LangBot は公開したアプリを Service API 経由で呼び出すため、プロンプト、ツール、ナレッジは Dify 側で管理できます。

## 必要なもの

- 稼働中の LangBot：[LangBot Cloud](https://space.langbot.app/cloud)（サーバー不要）、または Docker や `uvx langbot` による[セルフホスト](https://langbot.app/docs/ja/deploy/langbot/docker.md)。
- LangBot からネットワーク経由で到達できる Dify のアカウントまたはインスタンス。
- 外部サービスの認証情報は不要です。任意で、不正利用対策の Cloudflare Turnstile のサイトキーとシークレットキー。

## ネットワーク

訪問者のブラウザーが LangBot に直接接続するため、LangBot は公開 HTTPS アドレスで到達できる必要があります。LangBot Cloud には用意されています。

## 1. Dify を準備する

1. Dify でチャットアシスタント（Chatflow を含む）、エージェント、ワークフローのいずれかを作成して **公開** します。
2. アプリの **API アクセス** ページで API キーを作成します。
3. ワークフローアプリの場合は、回答を `summary` というキーで出力します。

## 2. パイプラインを作成する

LangBot WebUI の **パイプライン** でパイプラインを作成（または既定のものを編集）し、**AI** を次のように設定します。ランナーが一覧にない場合は、**プラグイン** または [LangBot Space マーケット](https://space.langbot.app/market) から公式ランナープラグインをインストールします。

| 項目       | 設定値                                                                  |
| -------- | -------------------------------------------------------------------- |
| ランナー     | **Dify**（公式 Dify Agent ランナープラグイン）                                    |
| Base URL | Dify Cloud は `https://api.dify.ai/v1`、セルフホストは自分の Dify アドレスの末尾に `/v1` |
| API Key  | アプリの API アクセスページで作成したキー                                              |

## 3. Web サイトのチャットウィジェット のボットを作成する

1. **Web ページボット** アダプターでボットを作成し、パイプラインを紐付けます。
2. 埋め込みコードをサイトに貼り、`localhost:5300` を LangBot の公開アドレスに置き換えます。

## 4. 紐付けてテストする

ボットを開いて作成したパイプラインを選び、保存してボットが有効になっていることを確認します。

ウィジェットを埋め込んだページを開き、会話を始めます。

## トラブルシューティング

- 同じホストの Docker でセルフホスト版 Dify を動かす場合は、両方を共通の Docker ネットワークに参加させ、`localhost` ではなくコンテナのアドレス（例：`http://dify-nginx/v1`）を使います。
- Chatflow アプリが返すのは回答（Answer）ノードの出力だけです。
- ウィジェットが読み込まれない場合は、埋め込みコードが `localhost` のままか、LangBot のアドレスが HTTPS ではありません。
- WebUI の **モニタリング** に、すべてのメッセージ、パイプラインの実行、エラーが記録されます。

## よくある質問

### Web サイトのチャットウィジェット には公開 IP のあるサーバーが必要ですか？

必要です。または LangBot Cloud を使えます。訪問者のブラウザーが LangBot に直接接続するため、LangBot は公開 HTTPS アドレスで到達できる必要があります。LangBot Cloud には用意されています。

### Web サイトのチャットウィジェット のボットはストリーミング返信に対応していますか？

対応状況は[プラットフォーム機能一覧](https://langbot.app/docs/ja/insight/platform-features.md)で確認してください。AI 側の生成が終わってから返信が送られます。

### 同じ Dify の設定を他のプラットフォームでも使えますか？

はい。1 つのパイプラインを複数のボットに紐付けられるので、同じ設定で複数のプラットフォームに同時に応答できます。

## 関連ガイド

- [Web サイトのチャットウィジェット の詳しい設定ガイド](https://langbot.app/docs/ja/usage/platforms/webpage.md)
- [Dify ランナーの詳しいガイド](https://langbot.app/docs/ja/usage/pipelines/dify.md)
- Web サイトのチャットウィジェット で使える他の AI：[n8n](https://langbot.app/docs/ja/recipes/n8n/web-page.md) · [Coze](https://langbot.app/docs/ja/recipes/coze/web-page.md) · [Langflow](https://langbot.app/docs/ja/recipes/langflow/web-page.md) · [DeepSeek](https://langbot.app/docs/ja/recipes/deepseek/web-page.md) · [OpenAI (ChatGPT models)](https://langbot.app/docs/ja/recipes/openai/web-page.md)
- Dify を他のプラットフォームで使う：[Telegram](https://langbot.app/docs/ja/recipes/dify/telegram.md) · [Discord](https://langbot.app/docs/ja/recipes/dify/discord.md) · [Slack](https://langbot.app/docs/ja/recipes/dify/slack.md) · [Lark（Feishu）](https://langbot.app/docs/ja/recipes/dify/lark.md) · [DingTalk](https://langbot.app/docs/ja/recipes/dify/dingtalk.md) · [WeCom（社内アプリ）](https://langbot.app/docs/ja/recipes/dify/wecom.md)