Zenn
Hogetic LabPublicationへの投稿
💬

Teams を RAG システムの UI として利用する方法 - Teams Toolkit 編 -

古川 人士
2024/10/03に公開
frontend
Teams
LLM
RAG
tech

1. はじめに

株式会社 Hogetic Lab のエンジニア、古川です。
私は Collectro というデータ収集・分析プラットフォームのプロダクトマネージャ（PdM）として、企画・仕様検討を主に担当しています。

前回は、Teams を RAG システムの UI として利用する方法の1つとして、送信 Webhook を使う方法を紹介しました。

送信 Webhook は簡単に使える反面、本格的なチャットボットを作ろうとすると制約が多く、実現が難しいことがあります。

そこで今回は、Teams Toolkit を利用して、より本格的なチャットボットを作る方法を紹介します。

前提条件

  • Microsoft 365 または Teams の一般法人向けのサブスクリプションを契約していること。（家庭向けプランのサブスクリプションや無料アカウントでは使用できません）
  • 適切な権限を持つユーザーでログインしていること。（組織によっては権限が制限されている場合があります。その場合は管理者にお問い合わせください）
  • Microsoft Azure のアカウントがあり、支払方法が設定されていること。

※ 以前は、Microsoft 365 開発者プログラム に登録すると誰でも無料のTeams開発者テナントを作成できましたが、2024年1月に条件が変わり、特定の条件を満たす必要があります。そのため、完全に無料で開発することはできません。

2. 開発環境の準備

Teams Toolkit は、Teams アプリを開発するための統合開発環境を提供します。
今回は、以下の開発環境と言語を使用します。事前にインストールしてください。

  • 開発環境：Visual Studio Code(以下、VSCode)
    • 拡張機能：Teams Toolkit
  • 実行環境：Node.js 18.x または 20.x
  • 開発言語：Typescript
  • ブラウザ：Edge または Chrome

詳細は公式ページ Teams アプリを作成するための前提条件 を参照してください。

3. ボット開発のステップ

最初に、テンプレートからオウム返しするチャットボット（以下、ボット）を作成し、ローカル環境での実行、Azure へのデプロイを行い、Teams アプリの一通りの開発・デプロイのステップを確認します。

3.1. ボットの作成

テンプレートからオウム返しするボットを作成します。

  1. VSCode の拡張機能 Teams Toolkit で「新しいアプリの作成」を選択
    Teams Toolkit（初回画面）
    Teams Toolkit（初回画面）
  2. 「ボット」を選択
    ボットの選択
    ボットの選択
  3. 「基本ボット」を選択 →「Typescript」 を選択
  4. プロジェクトを作成するフォルダを選択、または作成 → プロジェクト名を入力
  5. 指定したフォルダにプロジェクトが作成され、VSCode が開く
    テンプレートプロジェクト
    テンプレートプロジェクト
  6. VSCode の拡張機能 Teams Toolkit を開き、「ACCOUNTS」で Azure と MS365 にログインする
    Teams Toolkit（ログイン）
    Teams Toolkit（ログイン）

3.2. ローカル環境でのボットの実行

作成したテンプレートのボットを使い、動作確認を行います。

  1. VSCode の拡張機能 Teams Toolkit内の Environment で local を選択した時に表示されるデバッグボタンを押す（または、「実行とデバッグ」から実行する）
    実行とデバッグ
    実行とデバッグ
  2. 「Debug in Teams(Edge)」または「Debug in Teams(Chrome)」を選択
  3. ブラウザが起動し、Teams にログインすると、アプリインストール画面が表示されるので「追加」を選択
  4. ボットが実行され、チャット画面が表示される
  5. メッセージを送ると、Echo: とついてオウム返しのメッセージが返る
    オウム返しボットの実行
    オウム返しボットの実行

これにより、ボットの開発環境が整いました。コードを変更して保存すると、すぐにボットの動作に反映されます。
また、ブレークポイントを設定してデバッグすることができます。

3.3. Azure へボットをデプロイする

ローカル開発のために Teams に登録したボットは、他のユーザーが使用することができません。
Teams 内のメンバーで使用するためには Azure 上に配置し、組織内で公開する必要があります。
LIFE CYCLE の準備・配置・公開
LIFE CYCLEから準備、配置、公開する

まずは、Azure上にリソースを準備（プロビジョニング）します。

  1. VSCode の拡張機能 Teams Toolkit 内の LIFE CYCLE で「準備」を選択
  2. New resource group を選択（または、既存のリソースグループを選択）
  3. リージョンを選択

設定すると、Azureのコストがかかる旨の確認のダイヤログが表示されます。「準備」を選択して続行します。
警告ダイヤログ
警告ダイヤログ

準備が完了すると Azure のリソースグループにボットの動作に必要な以下のリソースが作成されます。

  • Azure ボット
  • App Service プラン
  • App Service

続けて、ボットをデプロイします。

  • VSCode の拡張機能 Teams Toolkit 内の LIFE CYCLE で「配置」を選択

デプロイが完了すると、Azure のリソースグループにボットが作成されます。

動作確認しましょう。
Azure ボットに移動し、設定 > Webチャットでテスト を開くと、ボットのテスト画面が表示されます。
これにより、Azure 上でボットをテストすることができます。
Azure ボットでのテスト
Azure ボットでのテスト

3.4. Teams アプリに追加する

組織で使用するために、Teams アプリを登録します。

  • VSCode の拡張機能 Teams Toolkit 内の LIFE CYCLE で「公開」を選択

Teams の管理者権限のある方に、アプリをインストールしてもらいましょう。

  • Microsoft Teams 管理センターで Teams のアプリ > アプリを管理 を開く
  • アプリ名で検索し、保留状態になっているアプリを publish する。

Teams アプリの管理者でのインストール
Teams アプリのインストール

4. ボットから ChatGPT に連携する

これでボットを Teams に追加する一通りのステップが完了しました。
本命の LLM との接続として ChatGPT を例に進めます。

4.1. ローカル開発

OpenAI が提供している Text generation の API を利用します。
（なお、openai パッケージを利用して実装した場合、ローカル開発はできますが Azure では動作しませんでした。そのため、ここでは直接 API を呼び出す方法を取ります。）

import { TeamsActivityHandler, TurnContext } from "botbuilder";

export class TeamsBot extends TeamsActivityHandler {
  constructor() {
    super();
    this.onMessage(async (context, next) => {
      console.log("Running with Message Activity.");
      const removedMentionText = TurnContext.removeRecipientMention(context.activity);
      const txt = removedMentionText.toLowerCase().replace(/\n|\r/g, "").trim();

      // ChatGPT API を呼び出す
      const response = await fetch("https://api.openai.com/v1/chat/completions", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${process.env.OPENAI_API_KEY}`
        },
        body: JSON.stringify({
          model: "gpt-4o-mini",
          messages: [{"role": "system", "content": "あなたは有能なアシスタントです"},
      {"role": "user", "content": txt}],
        }),
      });

      // ChatGPT の返答をボットから送信
      const data = await response.json();
      await context.sendActivity(`${data.choices[0].message.content}`);

      // By calling next() you ensure that the next BotHandler is run.
      await next();
    });
  }
}

APIキーは .localConfigs ファイルに記載してください。

BOT_ID={自動で設定されます}
BOT_PASSWORD={自動で設定されます}
OPENAI_API_KEY={自分の API キー}

3.2. ローカル環境でのボットの実行 に従い、ボットを実行すると、ボットが ChatGPT に問い合わせを行い、その結果を返答します。

ChatGPT との連携
Teams から ChatGPT と連携したボット

4.2. Azure へのデプロイ

デプロイ、公開の手順は 3.3. Azure へボットをデプロイする 、3.4. Teams アプリに追加する と同様です。環境変数は Azure リソースの App Service で設定します。

環境変数の設定(Azure)
環境変数の設定(Azure)

5. 注意・考慮すべきポイント

ここでは、Teams Toolkit を利用した開発における注意点を紹介します。
※ 会話履歴やリトライ条件、応答が遅い時の UX などの考慮ポイントは、他のチャットツールと同様ですので 過去の記事 を参照ください。

  • ローカル開発では動作しても Azure 上では動作しないことがあります。（未調査ですが、パッケージに制限がある可能性がありそうです。）
  • ローカル開発では、ボットの動作に必要な環境変数は .localConfigs に記載してください。.env.xxx は Teams Toolkit でデプロイ時に Azure のクレデンシャルを保存するだけであり、ここに記載しても使用されません。
  • テンプレートで作成されるデフォルトの環境は dev です。本番環境など複数の設定を行う場合は別の環境を定義してください。
  • Teams アプリの情報は、appPackage/manifest.json で設定してください。

6. まとめ

今回は、前回に引き続き Microsoft Teams を RAG システムの検索・問い合わせの UI として利用するための方法について紹介しました。

Teams Toolkit を使用することで、ボット開発からデプロイまでの一連の流れを効率的に行うことができます。また、Azure との連携も比較的スムーズに行えるため、本格的なチャットボットの開発に適しています。

ただし、Microsoft の製品群は機能が豊富で、開発ツールも多岐にわたるため、ここで紹介した方法はあくまで一例に過ぎません。Teams アプリでのチャットボット開発に興味がある方は、この記事を入口として、さらに深く探究していただければ幸いです。

※ データ分析や AI 活用に関するご相談は、以下よりお気軽にお問い合わせください。
お問い合わせフォーム

過去の記事

Hogetic Lab
Hogetic LabPublication

株式会社 Hogetic Lab のテックブログです

Discussion