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

はじめに

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」でデバッグを実行します。
実行後は以下のような画面が表示されるので、「追加」を選択します。

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

おわりに

お疲れ様でした！

参考文献はこちらです。