Partager via


Tutoriel : Créer une application web agentique dans Azure App Service avec LangGraph ou Foundry Agent Service (Python)

Ce didacticiel montre comment ajouter une fonctionnalité agentique à une application CRUD FastAPI pilotée par les données existante. Cela utilise deux approches différentes : LangGraph et Foundry Agent Service.

Si votre application web dispose déjà de fonctionnalités utiles, telles que le shopping, 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 dans un plug-in (pour LangGraph) 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 de tâches simple. À la fin, vous pourrez créer, mettre à jour et gérer des tâches avec un agent dans une application App Service.

LangGraph et Foundry Agent Service vous permettent de créer des applications web agentiques avec des fonctionnalités basées sur l’IA. LangGraph est similaire à Microsoft Agent Framework et est un SDK. Le tableau suivant présente quelques-uns des points à prendre en compte et des adaptations :

Considération LangGraph ou Microsoft Agent Framework Service d’agent de la fonderie
Performance Rapide (s’exécute localement) Plus lent (service managé, distant)
Développement Code complet, contrôle maximal Code faible, intégration rapide
Essai Tests manuels/unitaires dans le code Terrain de jeu intégré pour les tests rapides
Extensibilité Managé par l’application Managé par Azure, mise à l’échelle automatique
Garde-fous de sécurité Implémentation personnalisée requise Sécurité et modération du contenu intégrées
Identité Implémentation personnalisée requise ID et authentification de l’agent intégrés
Entreprise Intégration personnalisée requise Déploiement intégré de Microsoft 365/Teams et appels d’outils intégrés à Microsoft 365.

Dans ce tutoriel, vous allez apprendre à :

  • Convertissez les fonctionnalités d’application existantes en plug-in pour LangGraph.
  • Ajoutez le plug-in à un agent LangGraph et utilisez-le dans une application web.
  • Convertir les fonctionnalités de l'application existante en un point de terminaison OpenAPI pour le Service de l’Agent Foundry.
  • Appelez un agent Foundry dans une application web.
  • Attribuez les autorisations requises pour la connectivité d’identité managée.

Prerequisites

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 référentiel GitHub à l’adresse https://github.com/Azure-Samples/app-service-agentic-langgraph-foundry-python.

  2. Sélectionnez le bouton Code, sélectionnez l’onglet Codespaces, puis sélectionnez Créer un codespace sur l’espace principal.

  3. Attendez quelques instants que votre Codespace s’initialise. Lorsqu’il est prêt, un environnement de développement entièrement configuré s’affiche dans votre navigateur.

  4. Exécutez l’application localement :

    python3 -m venv venv
    source venv/bin/activate
    pip install -r requirements.txt
    uvicorn src.app:app --host 0.0.0.0 --port 3000
    
  5. Lorsque vous voyez Votre application s’exécutant sur le port 3000 est disponible, sélectionnez Ouvrir dans le navigateur et ajoutez quelques tâches.

    Les agents ne sont pas entièrement configurés, donc ils ne fonctionnent pas encore. Vous les configurerez ultérieurement.

Examinez le code de l’agent

Les deux approches utilisent le même modèle d’implémentation, où l’agent est initialisé au démarrage de l’application et répond aux messages utilisateur par des demandes POST.

L'élément LangGraphTaskAgent est initialisé dans le constructeur dans src/agents/langgraph_task_agent.py. Le code d’initialisation effectue les opérations suivantes :

# Initialize Azure OpenAI client
credential = DefaultAzureCredential()
azure_ad_token_provider = get_bearer_token_provider(
    credential, "https://cognitiveservices.azure.com/.default"
)

self.llm = AzureChatOpenAI(
    azure_endpoint=endpoint,
    azure_deployment=deployment_name,
    azure_ad_token_provider=azure_ad_token_provider,
    api_version="2024-10-21"
)

# Define tools
tools = [
    self._create_task_tool(),
    self._get_tasks_tool(),
    self._get_task_tool(),
    self._update_task_tool(),
    self._delete_task_tool()
]

# Create the agent
self.agent = create_react_agent(self.llm, tools, checkpointer=self.memory)
print("LangGraph Task Agent initialized successfully")

Lors du traitement des messages utilisateur, l’agent est appelé à l’aide ainvoke() du message de l’utilisateur et d’un ID de thread pour la continuité des conversations :

result = await self.agent.ainvoke(
    {"messages": [("user", message)]},
    config=config
)

Déployer l’exemple d’application

L’exemple de référentiel contient un modèle Azure Developer CLI (AZD), qui crée une application App Service avec une identité managée et déploie votre exemple d’application.

  1. Dans le terminal, connectez-vous à Azure à l’aide d’Azure Developer CLI :

    azd auth login
    

    Suivez les instructions pour terminer le processus d’authentification.

  2. Déployez l’application Azure App Service avec le modèle AZD :

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

    Question Réponse
    Entrez un nom pour le nouvel 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. L’URL ressemble à ceci dans la sortie AZD :

     Deploying services (azd deploy)
    
       (✓) Done: Deploying service web
       - Endpoint: <URL>
     
  5. Ouvrez le schéma OpenAPI généré automatiquement au niveau du chemin d’accès https://....azurewebsites.net/openapi.json . Vous aurez besoin de ce schéma plus tard.

    Vous disposez maintenant d’une application App Service avec une identité managée affectée par le système.

Créer et configurer la ressource Microsoft Foundry

  1. Dans le portail Foundry, vérifiez que le bouton radio New Foundry en haut est activé et créez un projet.

  2. Déployez un modèle de votre choix (consultez Démarrage rapide Microsoft Foundry : Créer des ressources).

  3. Depuis le haut du model playground, copiez le nom du modèle.

  4. Le moyen le plus simple d’obtenir le point de terminaison Azure OpenAI est toujours à partir du portail Classic. Sélectionnez le bouton radio New Foundry, puis Azure OpenAI, et copiez ensuite l’URL dans le point de terminaison Azure OpenAI pour plus tard.

    Capture d’écran montrant comment copier le point de terminaison OpenAI et le point de terminaison du projet de recherche dans le portail Foundry.

Attribuer les autorisations nécessaires

  1. Dans le menu supérieur du nouveau portail Foundry, sélectionnez Utiliser, puis sélectionnez Administrateur. Dans la ligne de votre projet Foundry, vous devez voir deux liens. La colonne Name est la ressource de projet Foundry, et celle de la colonne de ressource Parent est la ressource Foundry.

    Capture d’écran montrant comment accéder rapidement à la ressource de fonderie ou à la ressource de projet de fonderie.

  2. Sélectionnez la ressource Foundry dans la ressource parente , puis sélectionnez Gérer cette ressource dans le portail Azure. À partir du portail Azure, vous pouvez attribuer un accès en fonction du rôle pour la ressource à l’application web déployée.

  3. Ajoutez le rôle suivant pour l’identité managée de l’application App Service :

    Ressource cible Rôle requis Nécessaire pour
    Fonderie Utilisateur OpenAI de Cognitive Services Service d’achèvement de conversation dans Microsoft Agent Framework.

    Pour obtenir des instructions, consultez Attribuer des rôles Azure à l’aide du portail Azure.

Configurer des variables de connexion dans votre exemple d’application

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

    Variable Descriptif
    AZURE_OPENAI_ENDPOINT Point de terminaison Azure OpenAI (copié à partir du portail Classic Foundry).
    AZURE_OPENAI_DEPLOYMENT_NAME Nom du modèle dans le déploiement (copié depuis le model playground dans le nouveau portail Foundry).

    Note

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

    Note

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

  2. Se connecter à 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 :

    npm run build
    npm start
    
  4. Lorsque vous voyez Votre application s’exécutant sur le port 3000 est disponible, sélectionnez Ouvrir dans le navigateur.

  5. Sélectionnez le lien Agent LangGraph et le lien Agent Foundry pour essayer l’interface de conversation. Si vous obtenez une réponse, votre application se connecte correctement à la ressource Microsoft Foundry.

  6. De retour dans le codespace 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.

Nettoyer les ressources

Lorsque vous avez terminé avec l’application, vous pouvez supprimer les ressources App Service afin d’éviter des coûts supplémentaires :

azd down --purge

Étant donné que le modèle AZD n’inclut pas les ressources Microsoft Foundry, vous devez les supprimer manuellement si vous le souhaitez.

Plus de ressources