Zenn
Hogetic LabPublicationへの投稿
💬

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

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

1. はじめに

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

過去3回の記事では、収集したデータの活用例として、チャットツールの Slack と Google Chat を RAG システムの検索・問い合わせの UI として利用するための方法について説明しました。

今回は、ビジネスのコミュニケーションツールとしてよく利用されている Microsoft Teams（以下、Teams）を利用する方法について紹介します。

2. Teams アプリの設定方法

Teams では、Microsoft の他の製品と組み合わせたり、外部サービスと連携したりする様々な機能が提供されています。（Teams プラットフォームの機能を確認する 参照）

今回は、まず簡単にチャットボットを作成し、Teams で利用する方法について説明します。

前提条件

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

2.1 Teams アプリの設定

最も簡単な方法は、送信 Webhook を利用することです。この方法には様々な制約がありますが、お手軽なので最初に試すのに適しています。
基本的には、公式サイトの 送信 Webhook を作成する に従って設定すれば良いのですが、以下に手順を簡単にまとめます。

  1. Teams アプリを追加したいチームを選択し、「チームを管理」＞「アプリ」をクリックします。
    「チームを管理」から設定
    「チームを管理」から設定

  2. 「アプリをアップロード」の「Outgoing-Webhook(送信Webhook)を作成する」を選択し、以下の項目を入力します。（あとから変更可能です。）

    1. 名前：アプリの名前を入力します。
    2. コールバック URL：メッセージの通知先 URL を入力します。
    3. 説明：アプリの説明を入力します。
    4. プロフィール画像（オプション）：30KB未満のPNGファイルを設定します。
      「アプリをアップロード」から設定
      「アプリをアップロード」から設定
      送信 Webhook の設定画面
      送信 Webhook の設定画面

  3. 作成ボタンをクリックすると、「セキュリティ トークン」が表示されます。送信 Webhook のリクエストのバリデーションチェックのために使用するため、安全な場所に保管してください。また、トークンは後から確認できないので紛失しないように注意してください。

2.2 連携サーバーの準備

Teams と連携するサーバーを構築する必要があります。このサーバーは、Teams からのリクエストを受け取り、適切なレスポンスを返すためのものです。アプリのコールバック URL に設定した URL に対してリクエストを受け取ることができるサーバーを用意する必要があります。
Azure、AWS、Google Cloud などのクラウドサービスを利用するのが一般的ですが、ローカル環境でも構築することができます。

Teamsなどのチャットツールからの通知をローカル環境に転送するには、ngrok などのツールを利用すると便利です。
なお、ウィルス対策ソフトがインストールされている場合は、ウィルスと判定することがありますのでご注意ください。

2.3 動作確認

アプリを作成したチームのチャンネルで、アプリ名をメンションしてメッセージを送信しましょう。すると、連携サーバーにリクエストが送信され、レスポンスが返ってくるはずです。
チャットアプリの応答例
チャットアプリの応答例（連携サーバーではChatGPTを使用）

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

送信 Webhook を利用する場合、以下のような制約がありますのでご注意ください。

  • プライベートチャンネルでは利用できません。（設定はできますが応答はありません。）
  • 送信 Webhook のアプリでは、Teams の API は使用できません。そのため、過去の会話履歴を取得することはできません。（連携サーバーが受け取るリクエストにはチャンネル ID 等の情報は含まれているため、工夫することで可能かもしれませんが、認証を考えると Teams アプリを作成した方が良いでしょう。）
  • メッセージの応答は5秒以内に返さなければなりません。（動作確認では、6秒の待ち時間を入れた時は回答がありましたが、8秒にした時はエラーになりました。）
    タイムアウト時の応答
    タイムアウト時の応答

4. まとめ

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

送信 Webhook を利用することで、簡単に Teams と連携するチャットボットを作成することができます。
ただし、送信 Webhook にはいくつかの制約があるため、ある程度本格的なチャットボットを作成する場合は、Teams アプリを作成する必要があります。
その作成方法については、次回の記事で紹介しようと思います。

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

おまけ

Node.js で実装した ChatGPT を使った連携サーバーのサンプルコードを掲載します。（Node.js のインストール方法や ChatGPT のAPI キーの取得方法は割愛します。）

  • app.js
import express from 'express';
import axios from 'axios';
import dotenv from 'dotenv';

dotenv.config();

const app = express();
app.use(express.json());

const OPENAI_API_KEY = process.env.OPENAI_API_KEY;
const OPENAI_API_URL = 'https://api.openai.com/v1/chat/completions';

app.post('/chat', async (req, res) => {
  try {
    const { text } = req.body;
    if (!text) {
      return res.status(400).json({ error: 'Text is required in the request body' });
    }

    const response = await axios.post(
      OPENAI_API_URL,
      {
        model: 'gpt-4o-mini',
        messages: [{ role: 'user', content: text }],
      },
      {
        headers: {
          'Authorization': `Bearer ${OPENAI_API_KEY}`,
          'Content-Type': 'application/json',
        },
      }
    );
    
    const result = response.data.choices[0].message.content;
    res.json({ 'type': 'message', 'text': result });
  } catch (error) {
    console.error('Error:', error);
    res.status(500).json({ error: 'An error occurred while processing your request' });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
  • package.json
{
  "name": "teams_webhook_js",
  "version": "1.0.0",
  "main": "app.js",
  "type": "module", 
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "axios": "^1.7.7",
    "dotenv": "^16.4.5",
    "express": "^4.19.2"
  }
}
  • .env
OPENAI_API_KEY={{your_openai_api_key}} # OpenAI API の API Key を設定してください
PORT=3000 # ポート番号の設定は任意です。設定しなければポート番号 3000 で起動します。

以上、3つのファイルを一つのフォルダに格納し、その中で以下のコマンドを実行してください。

$ npm install
$ npm start

これで連携サーバーが起動します。http://localhost:{{.envで設定したPORT}}/chat に POST リクエストを送信すると ChatGPT からの回答を返します。
お役に立ちましたら幸いです。

Hogetic Lab
Hogetic LabPublication

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

Discussion