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

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

n8n がワークフローを実行し、LangBot がチャットプラットフォーム、セッション、配信を担当します。メッセージごとに Webhook でワークフローを呼び出します。

必要なもの

• 稼働中の LangBot：LangBot Cloud（サーバー不要）、または Docker や uvx langbot によるセルフホスト。
• LangBot からネットワーク経由で到達できる n8n のアカウントまたはインスタンス。
• 外部サービスの認証情報は不要です。任意で、不正利用対策の Cloudflare Turnstile のサイトキーとシークレットキー。

ネットワーク

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

1. n8n を準備する

1. ワークフローを Webhook または On chat message トリガーで開始します。ストリーミング返信には Response Mode を Streaming にします。
2. AI Agent ノード（ストリーミング）か Respond to Webhook ノードで応答し、応答キー名を LangBot の出力キー名と一致させます。
3. Active でワークフローを有効にし、本番用 Webhook URL をコピーします。

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

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

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

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

4. 紐付けてテストする

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

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

トラブルシューティング

• 返信が空の場合は、Respond to Webhook のキー名が LangBot の出力キー名と一致しているか確認します。
• テスト URL はエディターが待ち受けている間しか使えません。有効化したワークフローの本番 URL を使います。
• ウィジェットが読み込まれない場合は、埋め込みコードが localhost のままか、LangBot のアドレスが HTTPS ではありません。
• WebUI の モニタリング に、すべてのメッセージ、パイプラインの実行、エラーが記録されます。

よくある質問

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

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

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

対応状況はプラットフォーム機能一覧で確認してください。AI 側の生成が終わってから返信が送られます。

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

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

関連ガイド

• Web サイトのチャットウィジェット の詳しい設定ガイド
• n8n ランナーの詳しいガイド
• Web サイトのチャットウィジェット で使える他の AI：Dify · Coze · Langflow · DeepSeek · OpenAI (ChatGPT models)
• n8n を他のプラットフォームで使う：Telegram · Discord · Slack · Lark（Feishu） · DingTalk · WeCom（社内アプリ）