Teams AI ライブラリのクイック スタート ガイド

Teams AI ライブラリを使用してアプリを作成できるように設計された Chef ボット サンプルを使用して、Teams AI ライブラリの使用を開始します。 ボットでは、gpt-3.5-turbo モデルを使用して Teams ユーザーとチャットし、会話の範囲内に留まり、丁寧で敬意を払って応答します。

前提条件

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

インストール 使用するには...
   
Visual Studio Code または Visual Studio JavaScript、TypeScript、または CSharp ビルド環境。 最新バージョンを使用します。
Teams ツールキット アプリのプロジェクト スキャフォールディングを作成する Microsoft Visual Studio Code 拡張機能。 最新バージョンを使用します。
Git Git は、リポジトリ内のさまざまなバージョンのコードを管理するのに役立つバージョン管理システムです。
Node.js バックエンド JavaScript ランタイム環境。 詳細については、「 プロジェクトの種類Node.js バージョン互換性テーブル」を参照してください
Microsoft Teams 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 で appId とパスワードを生成したくない場合は、ファイル内の と MicrosoftAppPassword を独自の.env値で更新MicrosoftAppIdします。
  • 競合を回避するために、ファイル内 のSECRET_BOT_PASSWORDTEAMS_APP_UPDATE_TIME の値を .env 削除するか、空白のままにします。

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

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

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

ChefBot サンプルを使用して 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. teams-ai > js > サンプル> 04.ai.a.teamsChefBot に移動し、[フォルダーの選択] を選択します。 シェフ ボット サンプルのすべてのファイルは、Visual Studio Code の [エクスプローラー ] セクションの下に一覧表示されます。

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

  14. サンプル フォルダーで、構成ファイルの次のコードを .env 更新します。

    OPENAI_KEY=<your OpenAI key>
    
    
  15. 左側のウィンドウで、[ Teams ツールキット] を選択します。

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

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

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

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

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

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

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

    スクリーンショットは、Teams の Teams シェフ ボットとの会話の例を示しています。

ボットは、GPT ターボ 3.5 モデルを使用して Teams ユーザーとチャットし、会話の範囲内に留まり、丁寧で敬意を払って対応します。

注:

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

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

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

  2. リポジトリを複製して、サンプル アプリをテストします。

    git clone https://github.com/microsoft/teams-ai.git
    
  3. dotnet フォルダーに移動します。

    cd teams-ai/dotnet
    
  4. リポジトリを複製したフォルダーに移動し、 04.ai.a.teamsChefBot を選択します。

  5. [TeamsChefBot.sln] を選択します。 ソリューションが Visual Studio で開きます。

  6. Visual Studio で、ファイル内の OpenAI 関連の設定を appsettings.Development.json 更新します。

    "OpenAI": {
    "ApiKey": "<your-openai-api-key>"
    },
    
  7. [デバッグ] ドロップダウン メニューで、[ Dev Tunnel>Create a Tunnel]\(トンネルの作成\) を選択します。

    Visual Studio の Dev Tunnel オプションと [トンネルの作成] オプションの例を示すスクリーンショット。

  8. トンネルの作成に使用するアカウントを選択します。 Azure、Microsoft アカウント (MSA)、GitHub は、サポートされているアカウントの種類です。 次のオプションを更新します。

    1. [名前]: トンネルの名前を入力します。
    2. トンネルの種類: [永続的] または [ 一時的] を選択します。
    3. アクセス: [ パブリック] を選択します。
    4. [OK] を選択します。 Visual Studio では、トンネルが作成されたことを示す確認メッセージが表示されます。

    作成したトンネルは、 Dev Tunnel (トンネル > の名前) の下に一覧表示されます。

  9. [ソリューション エクスプローラー] に移動し、プロジェクトを選択します。

  10. メニューを右クリックし、[Teams ツールキット>] [Teamsアプリの依存関係の準備] を選択します。

    Visual Studio の [Teams ツールキット] セクションの [Teams アプリの依存関係の準備] オプションの例を示すスクリーンショット。

    メッセージが表示されたら、Microsoft 365 アカウントにサインインします。 Teams アプリが正常に準備されたことを示すメッセージが表示されます。

  11. [OK] を選択します。

  12. [F5] を選択するか、[デバッグ>の開始] を選択します。

  13. [追加] を選択します。 アプリが Teams に追加され、チャット ウィンドウが開きます。

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

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

    チャット ウィンドウの例と、シェフ ボットからのメッセージをユーザー メッセージへの返信として示すスクリーンショット。

Teams Toolkit を使用して、サンプルを Azure にデプロイすることもできます。 デプロイするには、次の手順に従います。

  1. Visual Studio で、[ソリューション エクスプローラー] に移動し、プロジェクトを選択します。
  2. メニューを右クリックし、[クラウドでのTeams Toolkit> プロビジョニング] を選択します。 Toolkit は、サンプルを Azure にプロビジョニングします。
  3. メニューを右クリックし、[Teams ToolkitDeploy to the Cloud]\(>クラウドへのデプロイ\) を選択します。

その他のツール

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

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

次の手順