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

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

Langflow はドラッグ＆ドロップでエージェントやフローを作れます。LangBot はメッセージごとに Langflow API でフローを実行します。

必要なもの

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

ネットワーク

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

1. Langflow を準備する

1. Langflow でフローを作成します（Simple Agent テンプレートから始めると簡単です）。
2. Settings で API キーを作成します。
3. Share → API access のサンプルコードから Flow ID を取得します。

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

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

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

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

4. 紐付けてテストする

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

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

トラブルシューティング

• 接続が拒否される場合、http://localhost:7860 が使えるのは Langflow と LangBot が同じホスト・同じネットワーク名前空間にあるときだけです。
• ウィジェットが読み込まれない場合は、埋め込みコードが localhost のままか、LangBot のアドレスが HTTPS ではありません。
• WebUI の モニタリング に、すべてのメッセージ、パイプラインの実行、エラーが記録されます。

よくある質問

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

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

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

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

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

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

関連ガイド

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