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

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

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

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

必要なもの

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

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

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

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

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

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