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