Tutoriel : Créer une application web agentique dans Azure App Service avec Microsoft Agent Framework ou Foundry Agent Service (.NET)

Ce tutoriel montre comment ajouter une fonctionnalité agentique à une application CRUD principale basée sur les données existante ASP.NET. Cela utilise deux approches différentes : Microsoft Agent Framework et Foundry Agent Service.

Si votre application web dispose déjà de fonctionnalités utiles, telles que l’achat, la réservation d’hôtels ou la gestion des données, il est relativement simple d’ajouter des fonctionnalités d’agent à votre application web en encapsulant ces fonctionnalités en tant qu’outils (pour Microsoft Agent Framework) ou en tant que point de terminaison OpenAPI (pour le service De l’agent Foundry). Dans ce tutoriel, vous commencez par une application de liste to-do simple. À la fin, vous pourrez créer, mettre à jour et gérer des tâches avec un agent dans une application App Service.

Microsoft Agent Framework et Foundry Agent Service vous permettent de créer des applications web agentiques avec des fonctionnalités basées sur l’IA. Le tableau suivant présente certaines considérations et compromis :

Dans ce tutoriel, vous allez apprendre à :

Prerequisites

• Un compte Azure avec un abonnement actif : créez un compte gratuitement.
• Compte GitHub pour utiliser GitHub Codespaces - En savoir plus sur GitHub Codespaces.

Ouvrir l’exemple avec Codespaces

Le moyen le plus simple de commencer consiste à utiliser GitHub Codespaces, qui fournit un environnement de développement complet avec tous les outils requis préinstallés.

1. Accédez au dépôt GitHub à l’adresse https://github.com/Azure-Samples/app-service-agentic-semantic-kernel-ai-foundry-agent.

2. Sélectionnez le bouton Code , sélectionnez l’onglet Espaces de code, puis sélectionnez Créer un espace de code dans l’espace de code principal.

3. Attendez quelques instants pour que votre espace de code s’initialise. Une fois prêt, vous verrez un environnement de développement entièrement configuré dans votre navigateur.

4. Exécutez l’application localement :

   dotnet run
   

5. Lorsque vous voyez Votre application, qui s’exécute sur le port 5280, est disponible, sélectionnez Ouvrir dans le navigateur et ajoutez quelques tâches.

Passer en revue le code de l’agent

Les deux approches utilisent le même modèle d’implémentation, où l’agent est initialisé en tant que service (dans Program.cs) dans un fournisseur et injecté dans le composant Blazor respectif.

// Create IChatClient
IChatClient chatClient = new AzureOpenAIClient(
        new Uri(endpoint),
        new DefaultAzureCredential())
    .GetChatClient(deployment)
    .AsIChatClient();

// Get TaskCrudTool instance from service provider
var taskCrudTool = sp.GetRequiredService<TaskCrudTool>();

// Create agent with tools
var agent = chatClient.CreateAIAgent(
    instructions: @"You are an agent that manages tasks using CRUD operations. 
        Use the provided functions to create, read, update, and delete tasks. 
        Always call the appropriate function for any task management request.
        Don't try to handle any requests that are not related to task management.
        When handling requests, if you're missing any information, don't make it up but prompt the user for it instead.",
    tools:
    [
        AIFunctionFactory.Create(taskCrudTool.CreateTaskAsync),
        AIFunctionFactory.Create(taskCrudTool.ReadTasksAsync),
        AIFunctionFactory.Create(taskCrudTool.UpdateTaskAsync),
        AIFunctionFactory.Create(taskCrudTool.DeleteTaskAsync)
    ]);

// Create thread for this scoped instance (persists across navigation)
var thread = agent.GetNewThread();

return (agent, thread);

var response = await this.Agent.RunAsync(sentInput, this.agentThread);

// Create project client
var projectClient = new AIProjectClient(new Uri(endpoint), new DefaultAzureCredential());

// Get an existing agent from Microsoft Foundry
var agent = projectClient.Agents.GetAgent(agentName);

// Get conversations client for retrieving history
var conversationsClient = projectClient.OpenAI.Conversations;

// Create conversation for this browser session
var conversation = conversationsClient.CreateProjectConversation().Value;

// Get response client for this agent and conversation
var responseClient = projectClient.OpenAI.GetProjectResponsesClientForAgent(agentName, conversation.Id);

return (responseClient, conversation, conversationsClient);

app.MapOpenApi();

app.MapGet("/api/tasks", async (TaskService taskService) =>
{
    return Results.Ok(await taskService.GetAllTasksAsync());
})
.WithDescription("Gets all tasks.")
.WithName("GetAllTasks");

#pragma warning disable OPENAI001
var response = await FoundryProvider.ResponseClient.CreateResponseAsync(sentInput);
#pragma warning restore OPENAI001

Déployer l’exemple d’application

Le dépôt d’exemples contient un modèle Azure Developer CLI (AZD), qui crée une application App Service et déploie votre application d’exemple. L’identité managée attribuée au système App Service est conservée pour les appels Azure AI sortants. Une identité managée distincte attribuée par l’utilisateur et une identifiante d’identité fédérée permettaient à l’authentification App Service d’agir comme l’application Microsoft Entra générée sans secret client.

1. Dans le terminal, connectez-vous à Azure en utilisant la CLI de développeur Azure :

   azd auth login
   

   Suivez les instructions pour terminer le processus d’authentification.

2. Déploie l’application Azure App Service en utilisant le modèle AZD :

   azd up
   

3. Lorsque vous y êtes invité, fournissez les réponses suivantes :

   Question	Answer
   Entrez un nouveau nom d’environnement :	Tapez un nom unique.
   Sélectionnez un abonnement Azure à utiliser :	Sélectionnez l’abonnement.
   Choisissez un groupe de ressources à utiliser :	Sélectionnez Créer un groupe de ressources.
   Sélectionnez un emplacement dans lequel créer le groupe de ressources :	Sélectionnez Suède Centre.
   Entrez un nom pour le nouveau groupe de ressources :	Tapez Entrée.

4. Dans la sortie AZD, retrouvez l’URL de votre application et accédez-y dans le navigateur. Copiez également la valeur de l’audience de l’identité managée Foundry OpenAPI pour une utilisation ultérieure. Le résultat se présente ainsi :

    Deploying services (azd deploy)
   
      (✓) Done: Deploying service web
      - Endpoint: <URL>
   
    Foundry OpenAPI managed identity audience:
        api://<generated-client-id>
    

5. Lorsque Microsoft vous le demande, connectez-vous en utilisant un compte dans le locataire de déploiement et vérifiez que la liste des tâches se charge.

6. Dans le même navigateur authentifié, ajoutez /openapi/v1.json à l’URL du point de terminaison App Service. Copiez ou sauvegardez le schéma OpenAPI généré pour plus tard.

   Note

   L’authentification par service d’applications renvoie une redirection HTTP 302 pour les requêtes navigateur non authentifiées. Cet exemple contient à la fois une interface utilisateur de navigateur et des API, ce qui permet à la redirection d’offrir une expérience de connexion utilisable. Les applications uniquement API utilisent généralement HTTP 401 à la place.

Créer et configurer la ressource Microsoft Foundry

Attribuer des autorisations requises

Configurer des variables de connexion dans votre exemple d’application

1. Ouvrez appsettings.json. À l’aide des valeurs que vous avez copiées précédemment à partir du portail Foundry, configurez les variables suivantes :

   • Infrastructure de l’agent Microsoft
   • Service de l’agent Foundry

   Variable	Description
   AzureOpenAIEndpoint	Azure OpenAI endpoint (copié depuis la page d’accueil du portail Foundry).
   ModelDeployment	Nom du modèle dans le déploiement (copié depuis le model playground dans le nouveau portail Foundry).

   Note

   Pour simplifier le didacticiel, vous allez utiliser ces variables dans appsettings.json au lieu de les remplacer par des paramètres d’application dans App Service.

   Note

   Pour simplifier le didacticiel, vous allez utiliser ces variables dans appsettings.json au lieu de les remplacer par des paramètres d’application dans App Service.

2. Connectez-vous à Azure avec Azure CLI :

   az login
   

   Cela permet à la bibliothèque cliente Azure Identity dans l’exemple de code de recevoir un jeton d’authentification pour l’utilisateur connecté. N’oubliez pas que vous avez ajouté le rôle requis pour cet utilisateur précédemment.

3. Exécutez l’application localement :

   dotnet run
   

4. Lorsque votre application s'exécutant sur le port 5280, est disponible, sélectionnez Ouvrir dans le navigateur.

5. Validez les deux pivots séparément :

   • Microsoft Agent Framework : Sélectionnez Microsoft Agent Framework Agent Agent, et demandez à l’agent de créer une tâche. Microsoft Agent Framework appelle l’outil de tâche en cours de traitement.
   • Foundry Agent Service : Sélectionnez Foundry Agent Service, et demandez à l’agent de créer une tâche. L’agent Foundry à distance appelle le point de terminaison /api/tasks déployé et protégé avec une identité gérée.

   La tâche créée par l’agent Foundry apparaît dans l’instance du service applicatif déployé, et non dans la base de données locale en mémoire. L’outil OpenAPI de Foundry utilise toujours l’URL serveur intégrée dans le schéma OpenAPI.

6. De retour dans l’espace de code GitHub, déployez les modifications apportées à votre application.

   azd up
   

7. Accédez à nouveau à l’application déployée et testez les agents de conversation.

Questions fréquemment posées

• Comment ajouter la génération augmentée par récupération (RAG) à l’agent Foundry ?

Comment ajouter la génération augmentée par récupération (RAG) à l’agent Foundry ?

Cette consigne s’applique au parcours Foundry Agent Service de ce tutoriel. Cela ne modifie pas les implémentations de LangGraph, Noyau sémantique ou Microsoft Agent Framework affichées dans l'autre onglet.

Créez ou sélectionnez une base de connaissances Foundry IQ, puis connectez cette base à l’agent du service d’agent Foundry. La connexion est mise à la disposition de l’agent sous la forme d’un outil de connaissances MCP géré.

Le code d’App Service continue d’invoquer le même agent en utilisant son nom via son client Foundry existant et agent_reference. L'application web n'a pas besoin d'une intégration directe Recherche Azure AI ni de son propre client MCP. Si l’interface affiche les sources, traitez les annotations de citation retournées par l’agent.

Nettoyer les ressources

Lorsque vous avez terminé avec l’application, vous pouvez supprimer les ressources App Service pour éviter d’entraîner d’autres coûts :

azd down --purge

Ensuite, supprime la ressource Foundry si tu l’as créée séparément.

Plus de ressources

• Intégrer l’IA à vos applications Azure App Service
• Qu’est-ce que le Service de l’agent Foundry ?
• Documentation de Microsoft Agent Framework