Freigeben über


Lernprogramm: Erstellen einer agentischen Web-App in Azure App Service mit LangGraph oder Foundry Agent Service (Python)

In diesem Tutorial wird veranschaulicht, wie Sie einer vorhandenen datengesteuerten FastAPI CRUD-Anwendung Agentfunktionen hinzufügen. Dazu werden zwei verschiedene Ansätze verwendet: LangGraph und Foundry Agent Service.

Wenn Ihre Webanwendung bereits nützliche Funktionen wie Shopping, Hotelbuchung oder Datenverwaltung aufweist, ist es relativ einfach, Ihrer Webanwendung Agent-Funktionen hinzuzufügen, indem diese Funktionen in ein Plug-In (für LangGraph) oder als OpenAPI-Endpunkt (für Foundry Agent Service) eingeschlossen werden. In diesem Tutorial beginnen Sie mit einer einfachen Aufgabenlisten-App. Am Ende können Sie Aufgaben mit einem Agent in einer App Service App erstellen, aktualisieren und verwalten.

Sowohl der LangGraph- als auch der Foundry-Agent-Dienst ermöglichen es Ihnen, agentische Webanwendungen mit KI-gesteuerten Funktionen zu erstellen. LangGraph ähnelt Microsoft Agent Framework und ist ein SDK. In der folgenden Tabelle sind einige Überlegungen und Kompromisse aufgeführt:

Überlegung LangGraph oder Microsoft Agent Framework Gießerei-Agentendienst
Leistung Schnell (lokal ausgeführt) Langsamer (verwaltet, Remotedienst)
Entwicklung Vollständiger Code, maximale Kontrolle Wenig Code, schnelle Integration
Testen Manuelle/Komponententests im Code Integrierter Playground für schnelle Tests
Skalierbarkeit App-verwaltet Von Azure verwaltet, automatisch skaliert
Sicherheitsschutzschienen Benutzerdefinierte Implementierung erforderlich Integrierte Sicherheit und Moderation von Inhalten
Identität Benutzerdefinierte Implementierung erforderlich Integrierte Agent-ID und Authentifizierung
Enterprise Benutzerdefinierte Integration erforderlich Integrierte Microsoft 365/Teams-Bereitstellung und Integrierte Microsoft 365-Toolaufrufe.

In diesem Tutorial lernen Sie Folgendes:

  • Konvertieren Sie vorhandene App-Funktionen in ein Plug-In für LangGraph.
  • Fügen Sie das Plug-In einem LangGraph-Agent hinzu, und verwenden Sie es in einer Web-App.
  • Konvertieren Sie vorhandene App-Funktionen in einen OpenAPI-Endpunkt für den Foundry Agent Service.
  • Rufen Sie einen Foundry-Agent in einer Web-App auf.
  • Weisen Sie die erforderlichen Berechtigungen für die Konnektivität der verwalteten Identität zu.

Voraussetzungen

Öffnen des Beispiels mit Codespaces

Die einfachste Möglichkeit für den Einstieg ist die Verwendung von GitHub Codespaces, die eine vollständige Entwicklungsumgebung mit allen erforderlichen vorinstallierten Tools bereitstellt.

  1. Navigieren Sie zum GitHub-Repository unter https://github.com/Azure-Samples/app-service-agentic-langgraph-foundry-python.

  2. Wählen Sie die Schaltfläche Code, dann die Registerkarte Codespaces und dann Codespace im Hauptfeld erstellen aus.

  3. Warten Sie einen Moment, bis Ihr Codespace initialisiert wurde. Wenn Sie fertig sind, wird in Ihrem Browser eine vollständig konfigurierte Entwicklungsumgebung angezeigt.

  4. Lokales Ausführen der Anwendung:

    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. Wenn Sie sehen, dass Ihre Anwendung auf Port 3000 ausgeführt wird, wählen Sie Im Browser öffnen aus, und fügen Sie einige Aufgaben hinzu.

    Die Agents sind nicht vollständig konfiguriert, sodass sie noch nicht funktionieren. Sie konfigurieren sie später.

Überprüfen des Agent-Codes

Beide Ansätze verwenden das gleiche Implementierungsmuster, bei dem der Agent beim Anwendungsstart initialisiert wird und mit POST-Anforderungen auf Benutzernachrichten reagiert.

Dies LangGraphTaskAgent wird im Konstruktor in src/agents/langgraph_task_agent.py initialisiert. Der Initialisierungscode führt Folgendes aus:

# 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")

Beim Verarbeiten von Benutzernachrichten wird der Agent mit ainvoke() der Nachricht des Benutzers und einer Thread-ID für die Unterhaltungskontinuität aufgerufen:

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

Bereitstellen der Beispielanwendung

Das Beispiel-Repository enthält eine Azure Developer CLI-Vorlage (AZD), die eine App Service-App mit verwalteter Identität erstellt und Ihre Beispielanwendung bereitstellt.

  1. Melden Sie sich im Terminal mithilfe der Azure Developer CLI bei Azure an:

    azd auth login
    

    Folgen Sie den Anweisungen, um den Authentifizierungsprozess abzuschließen.

  2. Stellen Sie die Azure App Service App mit der AZD-Vorlage bereit:

    azd up
    
  3. Wenn Sie dazu aufgefordert werden, geben Sie die folgenden Antworten:

    Frage Antwort
    Geben Sie einen neuen Umgebungsnamen ein: Geben Sie einen eindeutigen Namen ein.
    Wählen Sie ein zu verwendende Azure-Abonnement aus: Wählen Sie das Abonnement aus.
    Wählen Sie eine zu verwendende Ressourcengruppe aus: Wählen Sie Eine neue Ressourcengruppe erstellen aus.
    Wählen Sie einen Speicherort aus, an dem die Ressourcengruppe erstellt werden soll: Wählen Sie "Schweden Zentral" aus.
    Geben Sie einen Namen für die neue Ressourcengruppe ein: Geben Sie Eingeben ein.
  4. Suchen Sie in der AZD-Ausgabe die URL für Ihre App, und navigieren Sie im Browser dorthin. Die URL sieht in der AZD-Ausgabe wie folgt aus:

     Deploying services (azd deploy)
    
       (✓) Done: Deploying service web
       - Endpoint: <URL>
     
  5. Öffnen Sie das automatisch generierte OpenAPI-Schema im https://....azurewebsites.net/openapi.json Pfad. Sie benötigen dieses Schema später.

    Sie verfügen jetzt über eine App Service-App mit einer systemseitig zugewiesenen verwalteten Identität.

Erstellen und Konfigurieren der Microsoft Foundry-Ressource

  1. Vergewissern Sie sich im Foundry-Portal, dass die obere Neue Foundry-Schaltfläche auf aktiv festgelegt ist und erstellen Sie ein Projekt.

  2. Stellen Sie ein Modell Ihrer Wahl bereit (siehe Schnellstart von Microsoft Foundry: Erstellen von Ressourcen).

  3. Kopieren Sie den Namen des Modells aus dem oberen Bereich des Modell-Playrounds.

  4. Die einfachste Möglichkeit zum Abrufen des Azure OpenAI-Endpunkts ist noch aus dem klassischen Portal. Wählen Sie die Schaltfläche Neues Foundry, dann Azure OpenAI und kopieren Sie die URL in Azure OpenAI Endpunkt für später.

    Screenshot, der zeigt, wie der OpenAI-Endpunkt und der Gießereiprojektendpunkt im Gießereiportal kopiert werden.

Zuweisen der erforderlichen Berechtigungen

  1. Wählen Sie im oberen Menü des neuen Gießereiportals "Betreiben" und dann "Administrator" aus. In der Zeile für Ihr Foundry-Projekt sollten zwei Links angezeigt werden. Die Ressource in der Spalte Name ist die Projektressource von Foundry, und die Ressource in der Spalte Übergeordnete Ressource ist die Foundry-Ressource.

    Screenshot, der zeigt, wie Sie schnell zur Gießereiressource oder Gießereiprojektressource wechseln.

  2. Wählen Sie die Foundry-Ressource in der übergeordneten Ressource aus, und wählen Sie dann im Azure-Portal "Diese Ressource verwalten" aus. Im Azure-Portal können Sie der bereitgestellten Web-App rollenbasierten Zugriff für die Ressource zuweisen.

  3. Fügen Sie die folgende Rolle für die verwaltete Identität der App Service-Anwendung hinzu:

    Zielressource Erforderliche Rolle Erforderlich für
    Gießerei Kognitive Dienste OpenAI-Nutzer Der Chatabschlussdienst in Microsoft Agent Framework.

    Anweisungen hierzu finden Sie unter Zuweisen von Azure-Rollen über das Azure-Portal.

Konfigurieren von Verbindungsvariablen in Ihrer Beispielanwendung

  1. Öffnen Sie .env. Konfigurieren Sie mithilfe der Werte, die Sie zuvor aus dem Foundry-Portal kopiert haben, die folgenden Variablen:

    Variable Description
    AZURE_OPENAI_ENDPOINT Azure OpenAI-Endpunkt (kopiert aus dem klassischen Foundry-Portal).
    AZURE_OPENAI_DEPLOYMENT_NAME Modellname in der Bereitstellung (kopiert aus dem Modell-Playground im New Foundry Portal).

    Hinweis

    Um das Tutorial einfach zu halten, verwenden Sie diese Variablen in ENV, anstatt sie mit App-Einstellungen in App Service zu überschreiben.

    Hinweis

    Um das Tutorial einfach zu halten, verwenden Sie diese Variablen in ENV, anstatt sie mit App-Einstellungen in App Service zu überschreiben.

  2. Anmelden bei Azure mit der Azure CLI:

    az login
    

    Dadurch kann die Azure Identity-Clientbibliothek im Beispielcode ein Authentifizierungstoken für den angemeldeten Benutzer empfangen. Denken Sie daran, dass Sie die erforderliche Rolle für diesen Benutzer zuvor hinzugefügt haben.

  3. Lokales Ausführen der Anwendung:

    npm run build
    npm start
    
  4. Wenn Sie sehen, dass Ihre Anwendung auf Port 3000 ausgeführt wird, wählen Sie Im Browser öffnen aus.

  5. Wählen Sie den Link " LangGraph-Agent " und den Link "Foundry-Agent " aus, um die Chat-Schnittstelle auszuprobieren. Wenn Sie eine Antwort erhalten, stellt Ihre Anwendung eine erfolgreiche Verbindung mit der Microsoft Foundry-Ressource her.

  6. Stellen Sie ihre App-Änderungen wieder im GitHub-Codespace bereit.

    azd up
    
  7. Navigieren Sie erneut zur bereitgestellten Anwendung, und testen Sie die Chat-Agents.

Bereinigen von Ressourcen

Wenn Sie mit der Anwendung fertig sind, können Sie die App Service Ressourcen löschen, um weitere Kosten zu vermeiden:

azd down --purge

Da die AZD-Vorlage die Microsoft Foundry-Ressourcen nicht enthält, müssen Sie sie bei Bedarf manuell löschen.

Weitere Ressourcen