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

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

## 環境
- Windows 11
- TypeScript
- Visual Studio Code
- Teams Toolkit
- OpenAI

## 実装

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/74a14377-f292-3f68-2f5c-7a149e198973.png)
　　
インストールが完了すると、左側のサイドバーにTeams Toolkitを示すTeamsのアイコンが表示されます。
そのアイコンを選択し、Microsoft 365 のアカウントにログインしてください。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/da43a70d-2b5f-1bea-baf0-89438a0c3d99.png)
　　
「Bot」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/2148eb26-939f-55ee-9759-3b05ea863e35.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/3128b7bb-032b-c15f-e782-7b621a2e13d1.png)

　　
「TypeScript」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/6e206d6b-51c6-5f16-48bd-501e776ad44e.png)
　　
アプリのローカルの保存先を指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/62466b2a-e3a2-6027-745a-1e06566fb84e.png)
　　
アプリケーション名を入力し、「エンターキーを押してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/23fe44c6-b088-7af8-6ef8-a47882bb7972.png)
　　
遷移した画面のソースコード内の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」でデバッグを実行します。
実行後は以下のような画面が表示されるので、「追加」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/c5c0dd43-c461-a4c2-0c97-6606214c8115.png)
　  
チャットボットが表示され、チャットすることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/6b5f5431-c689-f7cf-6f77-db2dd1d0fe45.png)


## おわりに
お疲れ様でした！

参考文献はこちらです。

https://learn.microsoft.com/ja-jp/microsoftteams/platform/sbs-gs-bot?tabs=vscode%2Cviscode&tutorial-step=2

https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension

https://www.qes.co.jp/media/open-ai/a318