Claude で Web サイトのチャットウィジェット の AI ボットを作る
LangBot で Claude を使った Web サイトのチャットウィジェット の AI ボットを動かす手順：モデル設定、ボットの認証情報、ネットワーク、テスト、トラブルシューティング。
このレシピでは Claude のモデルを Web サイトのチャットウィジェット のボットにつなぎます。LangBot が Web サイトのチャットウィジェット のメッセージを受け取り、パイプラインで処理して返信するので、プラットフォーム連携のコードは不要です。
LangBot の内蔵エージェントで Anthropic の Claude モデルを使います。MCP サーバー、Skills、コードサンドボックスとのツール連携も可能です。
必要なもの
- 稼働中の LangBot：LangBot Cloud（サーバー不要）、または Docker や
uvx langbotによるセルフホスト。 - LangBot から呼び出せる Claude のアカウントまたはサーバー。
- 外部サービスの認証情報は不要です。任意で、不正利用対策の Cloudflare Turnstile のサイトキーとシークレットキー。
ネットワーク
訪問者のブラウザーが LangBot に直接接続するため、LangBot は公開 HTTPS アドレスで到達できる必要があります。LangBot Cloud には用意されています。
1. Claude のモデルを追加する
- Anthropic のコンソールで API キーを作成します。
- LangBot の モデル で LLM モデルを追加し、プロバイダーに Anthropic を指定して、API キーとモデル ID を入力します。
- モデルが関数呼び出しに対応していれば ツール使用 を有効にします。MCP ツール、Skills、サンドボックスに必要です。
- ゲートウェイを使わない限り、リクエスト URL はプロバイダー既定のままにします。モデル ID は Anthropic のドキュメントにある現行の Claude モデルを使います。
2. パイプラインを作成する
LangBot WebUI の パイプライン でパイプラインを作成（または既定のものを編集）し、AI を次のように設定します。
| 項目 | 設定値 |
|---|---|
| ランナー | Local Agent（内蔵エージェント） |
| モデル | 追加したモデル。予備モデルも指定できます。 |
| プロンプト | ボットの役割、口調、してはいけないこと。 |
| ナレッジベース | 任意。ナレッジベースを付けると資料に基づいて回答します。 |
3. Web サイトのチャットウィジェット のボットを作成する
- Web ページボット アダプターでボットを作成し、パイプラインを紐付けます。
- 埋め込みコードをサイトに貼り、
localhost:5300を LangBot の公開アドレスに置き換えます。
4. 紐付けてテストする
ボットを開いて作成したパイプラインを選び、保存してボットが有効になっていることを確認します。
ウィジェットを埋め込んだページを開き、会話を始めます。
トラブルシューティング
- エージェントがツールを呼ばない場合は、モデルの ツール使用 を有効にします。
- ウィジェットが読み込まれない場合は、埋め込みコードが
localhostのままか、LangBot のアドレスが HTTPS ではありません。 - WebUI の モニタリング に、すべてのメッセージ、パイプラインの実行、エラーが記録されます。
よくある質問
Web サイトのチャットウィジェット には公開 IP のあるサーバーが必要ですか？
必要です。または LangBot Cloud を使えます。訪問者のブラウザーが LangBot に直接接続するため、LangBot は公開 HTTPS アドレスで到達できる必要があります。LangBot Cloud には用意されています。
Web サイトのチャットウィジェット のボットはストリーミング返信に対応していますか？
対応状況はプラットフォーム機能一覧で確認してください。AI 側の生成が終わってから返信が送られます。
同じ Claude の設定を他のプラットフォームでも使えますか？
はい。1 つのパイプラインを複数のボットに紐付けられるので、同じ設定で複数のプラットフォームに同時に応答できます。
関連ガイド
- Web サイトのチャットウィジェット の詳しい設定ガイド
- モデルの設定
- Web サイトのチャットウィジェット で使える他の AI：Dify · n8n · Coze · Langflow · DeepSeek
- Claude を他のプラットフォームで使う：Telegram · Discord · Slack · Lark（Feishu） · DingTalk · WeCom（社内アプリ）