Teams AI ライブラリで Assistants API を使用するためのクイック スタート ガイド

数学講師アシスタントサンプルの Teams AI ライブラリで OpenAI または Azure OpenAI Assistants API の使用を開始します。 このガイドでは、OpenAI Code インタープリター ツールを使用して、数学を専門とするアシスタントを作成するのに役立ちます。 ボットは gpt-3.5-turbo モデルを使用して、Microsoft Teams ユーザーとチャットし、会話の範囲内に留まり、丁寧で敬意を持って対応します。

前提条件

開始するには、次のツールがあることを確認します。

インストール 使用するには...
Visual Studio Code JavaScript、TypeScript、または C Sharp ビルド環境。 最新バージョンを使用します。
Teams ツールキット アプリのプロジェクト スキャフォールディングを作成する Microsoft Visual Studio Code 拡張機能。 最新バージョンを使用します。
Git Git は、リポジトリ内のさまざまなバージョンのコードを管理するのに役立つバージョン管理システムです。
Node.js バックエンド JavaScript ランタイム環境。 詳細については、「 プロジェクトの種類Node.js バージョン互換性テーブル」を参照してください
Microsoft Teams すべてのユーザーと共同作業を行うには、チャット、会議、通話のアプリを 1 か所で操作します。
OpenAI または Azure OpenAI 最初に OpenAI API キーを作成して、OpenAI の GPT を使用します。 アプリをホストする場合、または Azure でリソースにアクセスする場合は、Azure OpenAI サービスを作成する必要があります。
Microsoft Edge (推奨) または Google Chrome 開発者ツールを備えたブラウザー。
Microsoft 365 開発者アカウント アプリをインストールし、カスタム Teams アプリを有効にし、カスタム アプリの アップロードを有効にする適切なアクセス許可を持つ Teams アカウントにアクセスします。

ランタイム エラーが発生する前に既にサンプルを実行している場合は、次の手順に従って新たに開始します。
  • サンプル内のすべての .env ファイルと env/.env.*.* ファイルを確認し、自動的に設定された値を削除して、Teams Toolkit が新しいリソースを生成することを確認します。
  • Teams Toolkit でアプリ ID とパスワードを生成しない場合は、.env ファイル内のMicrosoftAppIdMicrosoftAppPasswordを独自の値で更新します。
  • 競合を回避するために、.env ファイル内のSECRET_BOT_PASSWORDTEAMS_APP_UPDATE_TIMEの値を削除するか、空白のままにします。

Teams Toolkit では、 MicrosoftAppIdMicrosoftAppPassword リソースが自動的にプロビジョニングされます。 独自のリソースを使用する場合は、 .env ファイルに手動で追加する必要があります。 Teams Toolkit では、次のリソースは自動生成されません。

  • Azure OpenAI または OpenAI キー
  • データベースまたは同様のストレージ オプション

サンプル アプリをビルドして実行する

数学講師アシスタント サンプルを使用して Teams AI ライブラリの使用を開始します。 これにより、コンピューターの localhost で Teams AI ライブラリ ベースのサンプルをすばやく実行できます。

  1. サンプルに移動します。

  2. 次のコマンドを実行して、リポジトリを複製します。

    git clone https://github.com/microsoft/teams-ai.git
    
  3. Visual Studio Code に移動します。

  4. [ファイル>フォルダーを開く] を選択します

  5. teams-ai リポジトリを複製した場所に移動し、 teams-ai フォルダーを選択します。

  6. [ フォルダーの選択] を選択します

    teams-ai フォルダーと [フォルダーの選択] オプションを示すスクリーンショット。

  7. [ 表示>ターミナル] を選択します。 ターミナル ウィンドウが開きます。

  8. ターミナル ウィンドウで、次のコマンドを実行して js フォルダーに移動します。

    cd .\js\
    
  9. 次のコマンドを実行して、依存関係をインストールします。

    yarn install
    
  10. 次のコマンドを実行して、依存関係を構築します。

    yarn build
    
  11. 依存関係がインストールされたら、[ ファイル>フォルダーを開く] を選択します。

  12. d.assistants-mathBot > 04.ai-apps > teams-ai > js > サンプルに移動し、[フォルダーの選択] を選択します。 Math 講師 アシスタント サンプルのすべてのファイルは、Visual Studio Code の [エクスプローラー ] セクションの下に一覧表示されます。

  13. [エクスプローラー] でsample.env ファイルを複製し、重複するファイルを .env に更新します。

  14. 選択した AI サービスに基づいて、次の手順を更新します。

    1. env フォルダーに移動し、./env/.env.local.user ファイル内の次のコードを更新します。

      SECRET_OPENAI_KEY=<your OpenAI key>
      ASSISTANT_ID=<your Assistant ID>
      
    2. infra フォルダーに移動し、azure.bicep ファイル内の次の行がコメント アウトされていることを確認します。

          // {
          //  name: 'AZURE_OPENAI_KEY'
          //  value: azureOpenAIKey
          // }
          // {
          //  name: 'AZURE_OPENAI_ENDPOINT'
          //  value: azureOpenAIEndpoint
          // }
      
  15. サンプルを、 teams-aiのサブディレクトリではない新しいディレクトリにコピーします。

  16. 左側のウィンドウで、[ Teams ツールキット] を選択します。

  17. [ ACCOUNTS] で、次の手順に従ってサインインします。

    • Microsoft 365 アカウント
    • Azure アカウント
  18. アプリをデバッグするには、 F5 キーを選択します。

    ブラウザー タブで、ボットをテナントに追加するように要求する Teams Web クライアントが開きます。

  19. [追加] を選択します。

    Teams Web クライアントにアプリを追加するオプションを示すスクリーンショット。

    チャット ウィンドウが開きます。

  20. メッセージ作成領域で、ボットを呼び出すメッセージを送信します。

    スクリーンショットは、mathbot 出力の例を示しています。

注:

初めてボットを構築する場合は、Visual Studio Code 用の Teams Toolkit 拡張機能を使用してボットをビルドすることをお勧めします。 「JavaScript を使用して最初のボット アプリをビルドする」を参照してください。

その他のツール

次のツールを使用して、サンプルを実行して設定することもできます。

  1. Teams Toolkit CLI: Teams Toolkit CLI を使用して、コマンド ラインからMicrosoft Teamsアプリを作成および管理できます。 詳細については、「 Teams Toolkit CLI のセットアップ手順」を参照してください。

  2. Bot Framework Emulator: Bot Framework Emulator は、ボットをローカルでテストおよびデバッグできるデスクトップ アプリケーションです。 ボットのエンドポイント URL と Microsoft アプリ ID とパスワードを入力して、ボットに接続できます。 その後、ボットにメッセージを送信し、その応答をリアルタイムで確認できます。 詳細については、「 Bot Framework Emulator のセットアップ手順」を参照してください。

  3. 手動セットアップ: リソースを手動で設定する場合は、それぞれのサービスによって提供される手順に従って設定できます。 詳細については、「 手動セットアップ手順」を参照してください。

次の手順