LangBot Docs
OpenAI (ChatGPT models)

OpenAI (ChatGPT models) で Web サイトのチャットウィジェット の AI ボットを作る

LangBot で OpenAI (ChatGPT models) を使った Web サイトのチャットウィジェット の AI ボットを動かす手順：モデル設定、ボットの認証情報、ネットワーク、テスト、トラブルシューティング。

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

LangBot の内蔵エージェントで OpenAI の GPT モデルを使います。ナレッジベース、MCP ツール、Skills、コードサンドボックスも追加できます。

必要なもの

  • 稼働中の LangBot：LangBot Cloud（サーバー不要）、または Docker や uvx langbot によるセルフホスト。
  • LangBot から呼び出せる OpenAI (ChatGPT models) のアカウントまたはサーバー。
  • 外部サービスの認証情報は不要です。任意で、不正利用対策の Cloudflare Turnstile のサイトキーとシークレットキー。

ネットワーク

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

1. OpenAI (ChatGPT models) のモデルを追加する

  1. OpenAI のコンソールで API キーを作成します。
  2. LangBot の モデル で LLM モデルを追加し、プロバイダーに OpenAI、リクエスト URL に https://api.openai.com/v1 を指定して、API キーとモデル ID を入力します。
  3. モデルが関数呼び出しに対応していれば ツール使用 を有効にします。MCP ツール、Skills、サンドボックスに必要です。
  4. モデル ID は OpenAI のモデル一覧にある現行のものを使います。OpenAI 互換のエンドポイントも同じ手順で、それぞれのリクエスト URL を指定します。

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

LangBot WebUI の パイプライン でパイプラインを作成（または既定のものを編集）し、AI を次のように設定します。

項目設定値
ランナーLocal Agent（内蔵エージェント）
モデル追加したモデル。予備モデルも指定できます。
プロンプトボットの役割、口調、してはいけないこと。
ナレッジベース任意。ナレッジベースを付けると資料に基づいて回答します。

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

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

4. 紐付けてテストする

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

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

トラブルシューティング

  • ネットワークや地域のエラーは、LangBot からリクエスト URL に到達できないことが原因です。制限のある環境では到達可能な互換ゲートウェイを使います。
  • ウィジェットが読み込まれない場合は、埋め込みコードが localhost のままか、LangBot のアドレスが HTTPS ではありません。
  • WebUI の モニタリング に、すべてのメッセージ、パイプラインの実行、エラーが記録されます。

よくある質問

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

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

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

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

同じ OpenAI (ChatGPT models) の設定を他のプラットフォームでも使えますか？

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

関連ガイド

OpenAI (ChatGPT models) で Mattermost の AI ボットを作る

LangBot で OpenAI (ChatGPT models) を使った Mattermost の AI ボットを動かす手順：モデル設定、ボットの認証情報、ネットワーク、テスト、トラブルシューティング。

Claude で Telegram の AI ボットを作る

LangBot で Claude を使った Telegram の AI ボットを動かす手順：モデル設定、ボットの認証情報、ネットワーク、テスト、トラブルシューティング。

On this page

必要なものネットワーク1. OpenAI (ChatGPT models) のモデルを追加する2. パイプラインを作成する3. Web サイトのチャットウィジェット のボットを作成する4. 紐付けてテストするトラブルシューティングよくある質問Web サイトのチャットウィジェット には公開 IP のあるサーバーが必要ですか？Web サイトのチャットウィジェット のボットはストリーミング返信に対応していますか？同じ OpenAI (ChatGPT models) の設定を他のプラットフォームでも使えますか？関連ガイド