1. システムとオフィスの融合
  2. media
  3. Teams Open AI
  4. Teams AI ライブラリを使ってみた - メッセージ拡張機能編 -

QESブログ

Teams AI ライブラリを使ってみた - メッセージ拡張機能編 -

  • LINEで送る
  • このエントリーをはてなブックマークに追加

前回は、Teams AIライブラリの導入とサンプルの実行まで試してみました。今回は、メッセージ拡張機能に絡めた形のものを試してみようと思います。

メッセージ拡張機能とは

メッセージ拡張機能とは、Microsoft社の公式ページの説明では Microsoft Teamsクライアント内のボタンとフォームを使用して、Webサービスを連携できるものとあります。
ユーザーは、外部システムのメッセージ作成領域、コマンドボックスからまたはメッセージから直接、操作を検索したり、開始したりできますとあります。(説明文だけを見ても、なんだかよく分かりませんが、、、)
(注意)メッセージ拡張機能自体は、もともとTeamsにある拡張方法の一つです。Teams AIライブラリ特有の機能ではありません。

拡張できる場所は、この辺の機能みたいです(赤枠部分)。
TeamsAI-2-001.png
詳しくは、こちらを参照してください。

メッセージ拡張機能を使用したサンプルコードの実行

サンプルプロジェクトの取得

Teams AIライブラリを使用したサンプルコードは、GitHub(https://github.com/microsoft/teams-ai)に登録されていますので、そちらをベースとして使います。前回は、VS Codeから直接作成できるものを使用したため TypeScript版のコードでしたが、今回は C#版を使用します。
C#版のサンプルは、こちら(先ほどのGitHubのページの配下にある .NETサンプル)。
メッセージ拡張機能を使用したサンプルは、「samples」フォルダにある「04.ai.b.messageExtensions.gptME」になります。
※JavaScript版のサンプルは、/dotnet/部分を /js/ に読み替えた場所にあります。
(注意)本記事で使用したサンプルコードは、2023/10時点のものを使用しています。Teams AIライブラリ自体やサンプルコードは、まだ更新されておりますので、本記事の内容とサンプルコードの実装が変更になっている可能性があります。

サンプルプロジェクトの準備

今回は、Visual Studio 2022を使用します。Teams開発者ツールが必要となりますので、Visual Studio Installer から [Microsoft Teams開発者ツール] をインストールしておきます。
TeamsAI-2-002.png

サンプルプロジェクトの、GPT.sln を開き、初期設定を行います。

① OpenAI接続文字列の設定
appsettings.json / appsettings.Deployment.json に OpenAI の APIキーとエンドポイントを設定する箇所がありますので、自身の接続情報に更新します。
Azure AI Content Safety の APIキーとエンドポイントの設定もあるので、そちらも設定しておきます。

TeamsAI-2-012.png


また、サンプルソースは デプロイ名が [text-davinci-003] として記載してありますので同名のデプロイ名を作成するか、環境に合わせたデプロイ名に修正する必要があります。

② 開発用トンネルの作成
開発時のトンネリングツールです。ローカルで実行しているアプリと Teams を連携するために開発トンネルを作成します。

TeamsAI-2-003.png


③ Teamsアプリの依存関係の準備
ソリューションルート → 「Teams ツールキット(T)」 → 「Teams アプリの依存関係を準備する(P)」を選択します。

TeamsAI-2-004.png


接続先の Microsoft 365 アカウントを指定し、準備が完了するまで待ちます。

TeamsAI-2-005.png

サンプルプロジェクトの実行

 準備が完了したら、F5を押下しデバッグ実行を開始します。
ビルド&実行が成功すると、ブラウザで Teamsが起動し、アプリの追加画面が表示されます。
「追加」をクリックすることで、開発中のアプリが使用できるようになります。

TeamsAI-2-006.png

このサンプルは、メッセージ拡張機能の中の「操作コマンド」に該当するようです。
チャットまたはチームの画面に移動し、投稿時の 「+」をクリックすると「GPT ME-local」が追加されているので選択します。

TeamsAI-2-007.png
TeamsAI-2-008.png


その後、「GPT ME-local」のフォームが表示されるので、上のボックスに GPTのプロンプトに追加投入するメッセージを入力し、[Generate]ボタンをクリックします。ここでは、挨拶文を作成してもらうことにします。

TeamsAI-2-009.png

成功すると、下部領域にメッセージが生成されます。細かい指示をしていないため、微妙な挨拶文ですが生成されています。さらに追加情報を入力して、[Update]ボタンを押すと追加情報を考慮したメッセージを生成できます。

TeamsAI-2-010.png


生成されたメッセージは、アダプティブカードとして投稿できます。

TeamsAI-2-011.png

基本的な動作は確認できました。

プロンプトのベースは、プロジェクトの [Prompts/Generate] にある [skprompt.txt] にあります。
こちらに記載されている文章とユーザーが入力した内容が GPT のプロンプトとして入力されます。
生成される文章の基本的なルールを変更するには、こちらを編集します。

TeamsAI-2-013.png

 (このあたりまでの内容は、README にも記載されていますが、、、)

サンプルのカスタマイズ

サンプルの動きは、なんとなく分かりましたので、少しだけ手を加えてみることにします。
簡単にできそうなものとして、以下を対応してみます。
(1) メッセージの日本語化
(2) 生成されたメッセージの編集

修正したものが、こちらになります。

「GPT ME」の部分は、「メッセージ生成」に変更し、入力前に表示されるメッセージやボタンも日本語化しました。修正前同様、挨拶文を作ってもらうことにします。今回は、少し指示を具体的に入れてみます。
TeamsAI-2-014.png

生成できました。
GPTが勝手に生成する点は変わりませんが、生成メッセージを編集できるように修正しています。自動生成任せではなく、ある程度のメッセージが仕上がったら、細かいところは微調整して投稿できるようになりました。
TeamsAI-2-015.png

メッセージが投稿できました。細かいところですが、サンプルコード修正前の投稿文の下部に「by GPT」と記載されていたので、そちらも削除しています。

TeamsAI-2-016.png

今回は、ここまでとします。
実際のライブラリを使用している部分とか深追いしてみようかと思いましたが、ライブラリ自体もプレビュー版ということなので、機会があれば後ほど。

おわりに

QESでは、「AIチャットボット構築サービス」をはじめとして、各AIサービスを利用したシステム導入のお手伝いをしております。それ以外でも QESでは様々なアプリケーションの開発・導入を行っております。提供するサービス・ソリューションにつきましては こちら に掲載しております。

システム開発・構築でお困りの問題や弊社が提供するサービス・ソリューションにご興味を抱かれましたら、是非一度 お問い合わせ ください。
また、QESでは採用活動を強化しております。ブログを読んで弊社の業務内容に興味を持っていただけましたら、採用情報にもお目通しいただければ幸いです。

※このブログで参照されている、Microsoft、Azure、Azure OpenAI、Teams、その他のマイクロソフト製品およびサービスは、米国およびその他の国におけるマイクロソフトの商標または登録商標です。
※その他の会社名、製品名は各社の登録商標または商標です。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

お気軽にお問い合わせください。

ページのトップへ