Teams Toolkit × OpenAI でチャットボットを作ってみた #Azure

はじめに

Teams上で動くOpenAIのチャットボットを作ってみました。

環境

Windows 11
TypeScript
Visual Studio Code
Teams Toolkit
OpenAI

実装

Teams Toolkitのインストール

クローンしたリポジトリをVisual Studio Codeで開きます。
Visual Studio Codeの拡張機能「Teams Toolkit」をインストールします。

　　
インストールが完了すると、左側のサイドバーにTeams Toolkitを示すTeamsのアイコンが表示されます。
そのアイコンを選択し、Microsoft 365 のアカウントにログインしてください。

チャットボットの作成

左のサイドバーにTeams Toolkitを表示させた状態で、「Create a New App」を選択します。

　　
「Bot」を選択します。

　　
「AI Chat Bot」を選択します。

　　
「TypeScript」を選択します。

　　
アプリのローカルの保存先を指定します。

　　
アプリケーション名を入力し、「エンターキーを押してください。

　　
遷移した画面のソースコード内のenv/.env.local.userのOpenAIの環境変数を指定します。Azure OpenAIでも設定可能です。

env/.env.local.user

# This file includes environment variables that will not be committed to git by default. You can set these environment variables in your CI/CD system for your project.

# If you're adding a secret value, add SECRET_ prefix to the name so Teams Toolkit can handle them properly
# Secrets. Keys prefixed with `SECRET_` will be masked in Teams Toolkit logs.
SECRET_BOT_PASSWORD=
SECRET_OPENAI_API_KEY=<openai-api-key>
SECRET_AZURE_OPENAI_API_KEY=<azure-openai-api-key>
SECRET_AZURE_OPENAI_ENDPOINT=<azure-openai-endpoint>

　　
Azure OpenAIにする場合は、src/app.tsを以下のように変更してください。

src/app.ts

import { MemoryStorage } from "botbuilder";
import * as path from "path";

// See https://aka.ms/teams-ai-library to learn more about the Teams AI library.
import { Application, ActionPlanner, OpenAIModel, PromptManager } from "@microsoft/teams-ai";

import config from "./config";

// Create AI components
const model = new OpenAIModel({
  // Use OpenAI
  // apiKey: config.openAIKey,
  // defaultModel: "gpt-3.5-turbo",

  //Uncomment the following lines to use Azure OpenAI
  azureApiKey: config.azureOpenAIKey,
  azureDefaultDeployment: "gpt-35-turbo",
  azureEndpoint: config.azureOpenAIEndpoint,

  useSystemMessages: true,
  logRequests: true,
});
const prompts = new PromptManager({
  promptsFolder: path.join(__dirname, "../src/prompts"),
});
const planner = new ActionPlanner({
  model,
  prompts,
  defaultPrompt: "chat",
});

// Define storage and application
const storage = new MemoryStorage();
const app = new Application({
  storage,
  ai: {
    planner,
  },
});

export default app;

　　
F5キーまたは「実行」の「Start Debugging」でデバッグを実行します。
実行後は以下のような画面が表示されるので、「追加」を選択します。

　
チャットボットが表示され、チャットすることができます。

おわりに

お疲れ様でした！

参考文献はこちらです。