次の方法で共有

Azure AI Foundry Agent Service から App Service Web アプリを呼び出す

Azure AI Foundry Agent Service を使用すると、カスタム命令を使用してニーズに合わせて調整された AI エージェントを作成し、コード インタープリターやカスタム関数などの高度なツールによって拡張できます。 OpenAPI 3.0 で指定されたツールを使用して Azure AI エージェントを外部 API に接続できるようになりました。これにより、さまざまなアプリケーションとのスケーラブルな相互運用性を実現できます。

Azure App Service は、Web アプリと API を構築、デプロイ、スケーリングするためのフル マネージド プラットフォームです。 API が Azure App Service でホストされている場合は、OpenAPI 仕様を使用して AI エージェントを API に接続できます。 OpenAPI 仕様では、API とその操作方法が定義されています。 その後、自然言語を使用して、AI エージェントを介して API を呼び出すことができます。 このツールは、コードの変更を最小限に抑えて既存のアプリに AI エージェント機能を追加できるため、強力です。 また、このエージェントには、アプリと直接対話する機能があります。 使用可能な SDK を使用してエージェントと対話するために、コードを大幅に変更したり、実装作業を行ったりする必要はありません。

このチュートリアルでは、Azure AI Foundry エージェントを使用して、Azure App Service でホストされている既存の API を呼び出します。 このチュートリアルの終わりまでに、Azure AI Foundry Agent Service の AI エージェントを使用して App Service で実行されているファッション アシスタント チャット アプリケーションが作成されます。

App Service 内で実行されている AI エージェントを示すスクリーンショット。

[前提条件]

  1. GitHub アカウント。 無料 で入手することもできます。
  2. アクティブなサブスクリプションを持つ Azure アカウント。 Azure アカウントをお持ちでない場合は、無料で作成できます。

1.GitHub Codespaces でサンプルを調べる

  1. GitHub アカウントにサインインし、https://github.com/Azure-Samples/ai-agent-openai-web-app/fork に移動します。
  2. [Create fork] (フォークの作成) を選択します。
  3. [コード]>[メインに codespace を作成] を選択します。 codespace の設定には数分かかります。

サンプル リポジトリには、次の内容があります。

コンテンツ 説明
src/webapp フロントエンド .NET Blazor アプリケーション。
インフラストラクチャ Azure に .NET Web アプリをデプロイするためのコードとしてのインフラストラクチャと、AI エージェント用の Azure AI Foundry リソース。 「Azure Developer CLI テンプレート作成の概要」を参照してください。
azure.yaml Blazor アプリケーションを App Service にデプロイする Azure Developer CLI 構成。 「Azure Developer CLI テンプレート作成の概要」を参照してください。

2. Azure インフラストラクチャとアプリケーションをデプロイする

  1. azd auth login コマンドを使用し、プロンプトに従って Azure アカウントにサインインします。

    azd auth login

  2. App Service アプリを作成し、azd up コマンドを使用してコードをデプロイします。

    azd up

    azd up コマンドの完了には、数分かかることがあります。 azd up では、プロジェクト内の Bicep ファイルを使用して P0v3 価格レベルで App Service アプリを作成し、 src/webappに .NET アプリをデプロイします。 このコマンドでは、Azure AI Foundry とエージェントのサポート リソースも作成されます。

3. AI エージェントを作成する

  1. Azure portal で、azd テンプレートによって作成されるリソース グループに移動します。 リソース グループの名前は、実行する azd コマンドの出力にあります。

  2. Azure AI プロジェクト リソースを選択します。 名前は ai-aiproject-<identifier>の形式にする必要があります。 ハブまたは AI サービス リソースではなく、 プロジェクト リソースを選択してください。 エージェントは、Azure AI プロジェクト リソースから作成されます。

  3. Launch Studio を選択して、Azure AI Foundry Studio を開きます。

  4. 左側のメニューの [ ビルドとカスタマイズ] で、[エージェント] を選択 します。

  5. ページが読み込まれたら、ドロップダウンで、自動的に作成された自動生成された Azure OpenAI サービス リソースを選択し、[ Let's go] を選択します。

  6. [+ 新しいエージェント] を選択して新しいエージェントを作成するか、既定のエージェントが既に作成されている場合は既定のエージェントを使用します。

  7. エージェントが作成されたら、右側のメニューに次の手順を追加します。 次の手順では、エージェントが質問にのみ回答し、ファッション ストア アプリに関連するタスクを完了するようにします。

     You are an agent for a fashion store that sells clothing. You have the ability to view inventory, update the customer's shopping cart, and answer questions about the clothing items that are in the inventory. You should not answer questions about topics that are unrelated to the fashion store. If a user asks an unrelated question, please respond by telling them that you can only talk about things that are related to the fashion store.

4. OpenAPI 指定ツールを AI エージェントに追加する

スクリーンショットと追加情報を含む詳細なガイダンスについては、 Azure AI Foundry ポータルでの OpenAPI 仕様ツールの追加に関するページを参照してください。 手順は、次の手順にまとめられています。

  1. [アクション] の横にある [+ 追加] を選択します。

  2. OpenAPI 3.0 指定したツールを選択します。

  3. ツールに名前と次の説明を付けます。 この説明は、ツールを使用するタイミングと方法を決定するためにモデルによって使用されます。

     This tool is used to interact with and manage an online fashion store. The tool can add or remove items from a shopping cart as well as view inventory.

  4. 認証方法は匿名のままにします。 Web アプリに認証はありません。 アプリでアクセスするために API キーまたはマネージド ID が必要な場合は、この場所でこの情報を指定します。

  5. OpenAPI 仕様をコピーしてテキスト ボックスに貼り付けます。 OpenAPI 仕様は、 src/webapp ディレクトリの Codespace で提供され、 swagger.jsonと呼ばれます。

  6. ツールの作成を完了する前に、アプリの URL をコピーして OpenAPI 仕様に貼り付ける必要があります。 OpenAPI 仕様の 10 行目のプレースホルダー <APP-SERVICE-URL> をアプリの URL に置き換えます。 これは、https://<app-name>.azurewebsites.net という形式になっています。

    • アプリの URL を見つけるには、リソース グループに戻り、 App Service に移動します。 URL は、App Service の [概要 ] ページにあります。

  7. [ 次へ] を選択し、指定した詳細を確認して、[ ツールの作成] を選択します。

5. App Service を AI エージェントに接続する

AI エージェントを設定し、OpenAPI Specified Tool を追加した後、アプリが接続先のエージェントを認識できるように、適切な環境変数を使用して App Service を構成する必要があります。 アプリには、AI エージェント サービスへのアクセスを許可するマネージド ID が既に割り当てられます。 このマネージド ID は、アプリがエージェントに到達するために必要であり、azd テンプレートを使用して作成されます。

  1. OpenAPI ツールを追加したエージェント ダッシュボードから、 エージェント ID をメモします。 これは、asst_<unique-identifier> という形式になっています。
  2. メニューの [ 概要 ] を選択 して、プロジェクトの接続文字列をメモします。 これは、<region>.api.azureml.ms;<subscription-id>;<resource-group-name>;<project-name> という形式になっています。
  3. Azure portal で App Service に移動します。
  4. 左側のメニューで [環境変数 ] を選択します。
  5. [ アプリの設定 ] タブで 、[ + 追加 ] を選択し、次の設定を追加します。
    • 名前: AzureAIAgent__ConnectionString
    • 値: AI エージェント サービスから指定した接続文字列
  6. 別のアプリ設定を追加します。
    • 名前: AzureAIAgent__AgentId
    • 値: エージェントの作成時に指定したエージェント ID
  7. ページの下部にある [ 適用 ] を選択し、メッセージが表示されたら確認します。 新しい設定が適用された状態でアプリが再起動します。

6. 実行中のアプリを確認する

azd の出力でアプリの URL を見つけて、ブラウザーでそこに移動します。 AZD 出力の URL は次のようになります。

Deploying services (azd deploy)

    (✓) Done: Deploying service web
    - Endpoint: https://<app-name>.azurewebsites.net/

チャット ウィンドウで、エージェントに次のような質問をします。

  • 私のカートに何が入っていますか？
  • 小さなデニムジャケットをカートに追加する
  • 在庫にブレザーがありますか？ また、項目に関する一般的な質問をしたり、エージェントが情報を提供できる必要があります。
  • レッドスリムフィットチェックカジュアルシャツについて教えてください
  • ジャケットは暖かいですか?

クリーンアップ

このアプリを使い終わったら、次を実行して、このチュートリアル中に作成されたすべてのリソースを含むリソース グループを削除します。

azd down

トラブルシューティング

一般的な問題

  1. チャットが機能しない
    • 環境変数 (AzureAIAgent__ConnectionString と AzureAIAgent__AgentId) が App Service 環境変数で正しく設定されていることを確認します。
    • AI エージェントが適切に作成され、正しい OpenAPI ツールで構成されていることを確認します。
    • OpenAPI 仕様の URL に Azure AI Foundry Agent Service からアクセスできることを確認します。
    • App Service の URL が、OpenAPI 指定ツールに提供された swagger.json で更新されていることを確認します。
  2. アクセス許可の問題
    • 認証エラーが発生した場合は、App Service のマネージド ID に、Azure AI Foundry Agent Service にアクセスするための適切なアクセス許可があることを確認します。 マネージド ID には、エージェントと対話するための少なくとも Microsoft.MachineLearningServices/workspaces/agents/action アクセス許可が必要です。 指定された "Azure AI 開発者ロール" にはこのアクセス許可があり、十分である必要があります。 このロールを変更する場合は、必要なアクセス許可があることを確認してください。
  3. API の問題
    • エージェントがインベントリまたはカートに対してアクションを実行できない場合は、OpenAPI 仕様で API ルートを確認します。
    • /api/docsの Swagger UI で直接テストすることで、API エンドポイントが正しく応答していることを確認します。

ログの表示

App Service のログを表示するには:

  1. Azure portal で App Service に移動します。
  2. 左側のメニューで、[ 監視>ログ ストリーム ] を選択して、リアルタイム ログを表示します。
  3. これらのログは、対処が必要になる可能性があるアプリケーションの問題を明らかにします。

API 機能について

OpenAPI 仕様では、使用可能なエンドポイントに関する情報が AI エージェントに提供されます。

Cart API エンドポイント

  • GET /api/Cart: 現在のショッピング カートの内容と合計コストを取得します
  • DELETE /api/Cart: カートからすべての項目をクリアします
  • POST /api/Cart/add: ショッピング カートに項目を追加します
  • PUT /api/Cart/{productId}/size/{size}: 特定の項目の数量を更新します
  • DELETE /api/Cart/{productId}/size/{size}: カートから特定の項目を削除します

インベントリ API エンドポイント

  • GET /api/Inventory: 利用可能なすべてのインベントリ項目を一覧表示します
  • GET /api/Inventory/{id}: 特定の製品に関する詳細を取得します
  • GET /api/Inventory/{id}/size/{size}: 特定の製品サイズのインベントリをチェックします
  • GET /api/Inventory/sizes: インベントリで使用可能なすべてのサイズを取得します

高度なエージェント相互作用

AI エージェントは、基本的な対話以外にも、より複雑なシナリオを処理できます。

  • パーソナライズされたレコメンデーション: 「会議にはビジネスカジュアルな衣装が必要です」
  • サイズガイダンス: "6フィート2インチ（約188cm）で180ポンド（約82kg）の人には、どのサイズのブレザーが合いますか?"
  • 衣装コーディネーション: 「黒のデニムジャケットは何がうまくいくの?
  • ショッピングカート管理: "大きなシャツを取り外して、代わりに中サイズを追加する"
  • 在庫チェック: "赤いシャツのMサイズはありますか?"
  • 価格に関するお問い合わせ: 「ジャケットの価格帯は?

セキュリティに関する考慮事項

  • アプリケーションは、運用環境で Azure AI Foundry Agent Service に対するセキュリティで保護された認証に Azure マネージド ID を使用します。
  • 標準プラクティスと Azure リソースのいずれかを使用して、アプリとエージェントをさらにセキュリティで保護できます。 セキュリティで保護された Azure AI エージェント インフラストラクチャ テンプレートについては、 azureai-samples リポジトリを参照してください。

次のステップ

これで、Azure App Service 上の API に AI エージェントを接続する方法を学習しました。App Service で利用できる他の AI 統合を調べることができます。

チュートリアル: Azure App Service と Azure OpenAI (.NET) を使用してチャットボットを構築する

チュートリアル: App Service で Phi-4 サイドカー拡張機能を使用してチャットボットを実行する (ASP.NET Core)

Azure App Service で Azure SQL と Azure OpenAI に接続された .NET Blazor アプリをデプロイする