microsoft/BotFramework-WebChat

A highly-customizable web-based client for Azure Bot Services.

Bot Framework Web Chat とは?

Bot Framework Web Chat は、すぐに使える、高度にカスタマイズ可能なウェブ UI であり、Microsoft Bot Framework のボットを任意のウェブサイトに埋め込むことを可能にします。この UI は Bot Framework の Direct Line(および Direct Line Speech)チャネルの上に構築されており、UI の処理、アクティビティのレンダリング、ファイルアップロード、音声、アダプティブカード、その他の会話機能を処理します。開発者はボットのロジックに集中できます。


だれが使うべきか?

  • ウェブサイトにチャットウィンドウを追加したいが、UI をゼロから構築したくない ウェブ開発者
  • Azure Bot Service 上のボット作成者で、セキュアで埋め込み可能なフロントエンドが必要な人。
  • チャットのテーマ(Fluent UI テーマを含む)をカスタマイズしたい、または React コンポーネントで UI の一部を置き換えたい プロダクトチーム

コア機能(README に記載)

機能 意味
Direct Line 統合 ボットのシークレットから生成されたトークンを使って、UI とボットを接続します。
Direct Line Speech Azure Speech Services を使用した組み込み音声認識/音声合成。
ライブストリーミング応答 ボットが応答を生成する途中で部分的な返信をストリーミングできます。
Adaptive Cards v1.6 リッチなカード UI をレンダリング。adaptiveCardsParserMaxVersion でバージョンを制限可能。
テーマパック スタイルカスタマイズのセットを NPM パッケージとして公開可能。実験的な Fluent UI テーマパックは Copilot 風の外観を模倣。
Markdown 内の HTML Markdown に安全な HTML を含められる。styleOptions.markdownRenderHTML で無効化可能。
アクセシビリティ ビジュアルフォーカスインジケータ、ARIA サポート、専用のアクセシビリティガイド。
カスタマイズ CDN バンドル(シンプルな CSS/JS)または React パッケージ(完全なコンポーネント再構成、カスタムレンダラー、Redux DevTools)で実現。
ブラウザサポート モダンブラウザ(Chrome、Edge、Firefox の最新2バージョン)。v4.16 以降、IE 11 のサポートは終了。
セキュリティ Content-Security-Policy の推奨。ボットシークレットを公開するのではなく、トークンベースの認証を推奨。

すぐに始める方法(README からの簡潔なステップ)

  1. Azure Bot Service でボットを作成
  2. Azure ポータルから Web Chat シークレットを取得し、Direct Line トークンに交換する。
  3. スクリプトを追加(または NPM パッケージをインストール)。
  4. WebChat.renderWebChat({ directLine: WebChat.createDirectLine({ token }) }, element) を呼び出す(または React の <ReactWebChat> コンポーネントを使用)。
  5. オプションで、色、サイズ、CSS、または React API を使ってコンポーネントを置き換える。

詳細情報の入手先

  • CHANGELOG.md – バージョンごとの詳細な変更履歴。
  • docs/ – API リファレンス、移行ガイド、アクセシビリティ、ローカライズ、テレメトリ、音声ドキュメント。
  • samples/ – CDN バンドル、React ホスト、ES5 バンドル、カスタムテーマパック用の準備済みサンプル。
  • NPM – パッケージ botframework-webchat(フル機能バンドル)と botframework-webchat-fluent-theme(Fluent UI テーマ用)。

TL;DR

Bot Framework Web Chat は Microsoft がメンテナンスしている、プロダクションレベルの Azure Bot Framework ボット用ウェブクライアントです。出荷時から UI、音声、アダプティブカード、テーマ、React レベルでの深いカスタマイズを提供し、セキュアなトークンベース認証とモダンブラウザの使用を推奨しています。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト