Microsoft 365 エージェント ツールキットを使用して Visual Studio Code で JavaScript エージェントを作成する

この記事では、Microsoft 365 エージェント ツールキット を使用して、Visual Studio で新規の Agents SDK JavaScript プロジェクトを作成する方法をご紹介します。

必要条件

新しいプロジェクトの作成

エージェント ツールキットは、エージェント構築の開始に役立つプロジェクト テンプレートを提供します。 ツールキットのテンプレートから開始することも、Agents SDK のサンプルから開始することもできます。

紙幣

これ以降の手順は、現時点では、JavaScript および TypeScript にのみ対応しています。 Python のサポートが計画されています。

  1. Visual Studio Code で、サイド バーの Microsoft 365 エージェント アイコンを選択して Microsoft 365 エージェント ツールキット拡張機能のサイド パネルを開きます。

  2. 新しいエージェント プロジェクトを作成するには、新しいエージェント/アプリの作成 を選択します。 ツールキットのテンプレートから開始することも、Agents SDK のサンプルから開始することもできます。 このガイドでは、Agents Toolkit から開始する方法について説明します。

Agents Toolkit 拡張機能の開始ページ

  1. エージェント SDK でエージェントの構築を開始するには、カスタム エンジン エージェント を選択します。

作成するエージェント タイプを選択する

新しいエージェントを作成する

カスタム エンジン エージェントをオプションとして選択すると、一連のプロンプトに従って独自の AI サービスを追加することができます。

2 つのテンプレートから選択できます。

  • 基本的なカスタム エンジン エージェント
  • 天気エージェント。

基本的なカスタム エンジン エージェントは、あらかじめ何も構築されていないエージェントです。 エージェントを実用的なものにするには、Semantic Kernel や LangChain などの AI オーケストレーターと、独自のナレッジを追加する必要があります。

テンプレートの選択

  1. この例では、Weather Agent を選択して、選択した言語に応じて LangChain と Azure AI Foundry を使用するエージェントを作成します。

LLM サービスを選択するように求められます。

  1. モデルに Azure OpenAI を選択します。

    LLM に Azure OpenAI を選択する

    Microsoft Foundry ポータルから Azure OpenAI モデルの キー、ターゲット URI、名前 を取得し、入力するよう促されます。 これらの情報は、Foundry ポータルの 自分の資産 セクションおよび モデルとエンドポイント セクションで確認できます。

  2. Azure OpenAI サービス キーから開始して、モデルの詳細を入力します。

    Azure OpenAI キーを入力して認証する

  3. JavaScript または TypeScript を選択し、既定のフォルダー を選択し、アプリケーション名 を入力して、プロジェクトのルート フォルダーを既定の場所に格納します。

    新しいプロジェクトが開きます。

    新規作成したプロジェクトのファイルのビュー

  4. Visual Studio Code のツールバーで Microsoft 365 のロゴを選択し、拡張機能をhs異様してサインインしていることを確認します。 接続するテナントにサインインしていることを確認します。

    アカウントの表示とサインイン

エージェント プレイグラウンドでエージェントをデバッッグおよびテストする

ツールキットで利用できる新しい Microsoft 365 エージェント プレイグラウンドを使って、コードのデバッグやテストができます。 プレイグラウンドを利用すると、完全なデプロイ サイクルを行わずに、コードを容易にデバッグできます。

  1. Microsoft 365 エージェント プレイグラウンドでデバッグする を選択します。

    プレイグラウンドを選択したら、必須コンポーネントがローカル コンピューターに準備されるまでしばらく待ちます。 準備には数分かかります。

    Microsoft 365 エージェント プレイグラウンドでデバッグを選択する

  2. デプロイを待つ間に、プフォルダーのコードを確認して内容を把握します。

    生成されたテンプレート コードの確認

  3. デバッグとテスト用のプレイグラウンドで読み込みが完了すると、ブラウザが開き、エージェントとの対話を開始できるようになります。 ガイドに従って、LangChain と Azure AI Foundry を使って事前に構築されたテンプレートを使用すると、「明日の {場所} の天気は?」と質問できます。エージェントは、選択した AI サービスを使って天気情報をアダプティブ カードで応答します。

    Teams アプリ テスト ツールでアプリをデバッグする

    チャット内のアダプティブ カードを使用した Teams アプリ テスト ツール

Microsoft 365 Copilot でエージェントをデバッグおよびテストする

エージェント プレイグラウンドでローカル テストを終えたら、Azure Bot Service にデプロイし、Microsoft 365 Copilot チャネル用に構成できます。 Microsoft 365 Copilot にアクセスできるテナントにログインしていることを確認してください。

  1. デバッグ ターゲットを Copilot に変更して、Microsoft 365 Copilot を使用してデバッグできるようにします。 キーボードで F5 を押すか、デバッグ を選択してテストします。 エージェントを Microsoft 365 で利用できるようにするには、準備に数分かかります。 バックグラウンドで、ツールキットは Azure Bot Service 内にアプリ登録と Azure Bot Service レコードを作成し、マニフェストとともにプロジェクトをテナントにデプロイします。

    Copilot (Edge) でデバッグを選択する

  2. プロジェクトのデプロイが完了すると、Microsoft 365 Copilot が読み込まれます。必要に応じて、質問の入力、ブレークポイントの追加、デバッグを、Microsoft 365 Copilot で直接実行できます。

    Microsoft 365 Copilot でのテストとデバッグ

概要

これで、以下の作業が無事に完了しました。

  • エージェント ツールキットを使用して新しい Microsoft 365 エージェント プロジェクトとエージェントを作成しました
  • Microsoft 365 エージェント プレイグラウンドを使ってエージェントをローカル環境でテストしました
  • Microsoft 365 チャネル内で直接デバッグを行うために、エージェントをデプロイしました
  • Last updated on