Freigeben über

AG-UI Integration mit Agent Framework

AG-UI ist ein Protokoll, mit dem Sie webbasierte KI-Agent-Anwendungen mit erweiterten Features wie Echtzeitstreaming, Zustandsverwaltung und interaktiven UI-Komponenten erstellen können. Die Agent Framework AG-UI-Integration bietet eine nahtlose Verbindung zwischen Ihren Agenten und Webclients.

Was ist AG-UI?

AG-UI ist ein standardisiertes Protokoll zum Erstellen von KI-Agent-Schnittstellen, das Folgendes bereitstellt:

  • Remote-Agent-Hosting: Bereitstellen von KI-Agents als Webdienste, auf die von mehreren Clients zugegriffen werden kann
  • Echtzeitstreaming: Stream-Agent-Antworten mithilfe von Server-Sent Events (SSE) für sofortiges Feedback
  • Standardisierte Kommunikation: Einheitliches Nachrichtenformat für zuverlässige Agentinteraktionen
  • Sitzungsverwaltung: Aufrechterhaltung des Konversationskontexts über mehrere Anfragen hinweg
  • Erweiterte Features: Genehmigungen von Menschen in der Schleife, Zustandssynchronisierung und benutzerdefiniertes Benutzeroberflächenrendering

Wann sollte man AG-UI verwenden

Erwägen Sie die Verwendung von AG-UI, wenn Sie Folgendes benötigen:

  • Erstellen von Web- oder mobilen Anwendungen, die mit KI-Agents interagieren
  • Bereitstellen von Agents als Dienste, auf die mehrere gleichzeitige Benutzer zugreifen können
  • Echtzeit-Streaming von Agentenreaktionen, um sofortiges Benutzerfeedback zu ermöglichen
  • Implementieren von Genehmigungsworkflows, bei denen Benutzer Aktionen vor der Ausführung bestätigen
  • Synchronisieren des Zustands zwischen Client und Server für interaktive Erfahrungen
  • Rendern benutzerdefinierter UI-Komponenten basierend auf Agenttoolaufrufen

Unterstützte Features

Die Agent Framework-AG-UI-Integration unterstützt alle 7 AG-UI Protokollfeatures:

  1. Agentischer Chat: Einfacher Streaming-Chat mit automatischen Toolanrufen
  2. Rendering von Back-End-Tools: Tools, die im Backend ausgeführt werden, wobei die Ergebnisse an den Client gestreamt werden
  3. Human in the Loop: Genehmigungsanfragen zur Benutzerbestätigung
  4. Agentische generative UI: Asynchrone Tools für langdauernde Vorgänge mit Fortschrittsaktualisierungen
  5. Toolbasierte generative UI: Benutzerdefinierte UI-Komponenten, die basierend auf Toolaufrufen gerendert werden
  6. Freigegebener Zustand: Bidirektionale Zustandssynchronisierung zwischen Client und Server
  7. Predictive State Updates: Stream-Toolargumente als optimistische Zustandsaktualisierungen

Erstellen von Agent-UIs mit CopilotKit

CopilotKit bietet umfangreiche UI-Komponenten zum Erstellen von Agent-Benutzeroberflächen basierend auf dem Standardprotokoll AG-UI Protokoll. CopilotKit unterstützt Streaming-Chatschnittstellen, Front-End- und Back-End-Toolaufrufe, Benutzerinteraktionen, generative Benutzeroberflächen, gemeinsamen Zustand und vieles mehr. Sie sehen ein Beispiel für die verschiedenen Agent-UI-Szenarien, die CopilotKit in der AG-UI Dojo-Beispielanwendung unterstützt.

CopilotKit hilft Ihnen, sich auf die Funktionen Ihres Agenten zu konzentrieren und gleichzeitig eine ansprechende Benutzererfahrung zu bieten, ohne das Rad neu zu erfinden. Weitere Informationen zu den ersten Schritten mit Microsoft Agent Framework und CopilotKit finden Sie in der Dokumentation zur Microsoft Agent Framework-Integration für CopilotKit .

AG-UI im Vergleich zur Direct Agent-Nutzung

Zwar können Sie Agents direkt in Ihrer Anwendung mit den Methoden Run und RunStreamingAsync des Agent Framework ausführen, aber die AG-UI bietet zusätzliche Funktionen:

Merkmal Direkte Agent-Verwendung Integration von AG-UI
Einsatz Eingebettet in Anwendung Remotedienst über HTTP
Clientzugriff Einzelne Anwendung Mehrere Clients (Web, Mobil)
Streamen Asynchrone Iteration im Prozess Vom Server gesendete Ereignisse (SSE)
Zustandsverwaltung Von der Anwendung verwaltet Momentaufnahmen des Zustands auf Protokollebene
Sitzungskontext Von der Anwendung verwaltet Protokollverwaltete Sitzungs-IDs
Genehmigungsworkflows Benutzerdefinierte Implementierung Integriertes Middleware-Muster

Übersicht über die Architektur

Die AG-UI-Integration verwendet ASP.NET Core und folgt einer sauberen Middleware-basierten Architektur:

┌─────────────────┐
│  Web Client     │
│  (Browser/App)  │
└────────┬────────┘
         │ HTTP POST + SSE
         ▼
┌─────────────────────────┐
│  ASP.NET Core           │
│  MapAGUI("/", agent)    │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  AIAgent                │
│  (with Middleware)      │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  IChatClient            │
│  (Azure OpenAI, etc.)   │
└─────────────────────────┘

Wichtige Komponenten

  • ASP.NET Core Endpoint: MapAGUI Erweiterungsmethode verarbeitet HTTP-Anforderungen und SSE-Streaming
  • AIAgent: Agent Framework-Agent erstellt aus IChatClient oder benutzerdefinierte Implementierung
  • Middleware-Pipeline: Optionale Middleware für Genehmigungen, Zustandsverwaltung und benutzerdefinierte Logik
  • Protokolladapter: Konvertiert zwischen Agent Framework-Typen und AG-UI Protokollereignissen
  • Chatclient: Microsoft.Extensions.AI Chatclient (Azure OpenAI, OpenAI, Ollama usw.)

Wie das Agent-Framework in AG-UI übersetzt wird

Das Verständnis der Zuordnung von Agent-Framework-Konzepten zu AG-UI hilft Ihnen, effektive Integrationen zu erstellen.

Agent Framework-Konzept AG-UI Entsprechung Description
AIAgent Agent-Endpunkt Jeder Agent wird zu einem HTTP-Endpunkt
agent.Run() HTTP POST-Anforderung Client sendet Nachrichten über HTTP
agent.RunStreamingAsync() Vom Server gesendete Ereignisse Streaming-Antworten über SSE
AgentResponseUpdate AG-UI-Ereignisse Automatisch in Protokollereignisse konvertiert
AIFunctionFactory.Create() Backend-Tools Ausgeführt auf dem Server, Gestreamte Ergebnisse
ApprovalRequiredAIFunction Mensch-überwachter Prozess Middleware konvertiert in das Genehmigungsprotokoll
AgentSession Sitzungsverwaltung ConversationId verwaltet kontext
ChatResponseFormat.ForJsonSchema<T>() Status-Schnappschüsse Strukturierte Ausgaben entwickeln sich zu Zustandsereignissen.

Installation

Die AG-UI Integration ist im ASP.NET Core-Hostingpaket enthalten:

dotnet add package Microsoft.Agents.AI.Hosting.AGUI.AspNetCore

Dieses Paket enthält alle Abhängigkeiten, die für AG-UI Integration erforderlich sind, einschließlich Microsoft.Extensions.AI.

Nächste Schritte

So beginnen Sie mit AG-UI Integration:

  1. Erste Schritte: Erstellen Ihres ersten AG-UI Servers und Clients
  2. Backend-Toolrendering: Funktionswerkzeuge zu Ihren Agenten hinzufügen

Zusätzliche Ressourcen

AG-UI im Vergleich zur Direct Agent-Nutzung

Zwar können Sie Agents direkt in Ihrer Anwendung mit den Methoden run und run(..., stream=True) des Agent Framework ausführen, aber die AG-UI bietet zusätzliche Funktionen:

Merkmal Direkte Agent-Verwendung Integration von AG-UI
Einsatz Eingebettet in Anwendung Remotedienst über HTTP
Clientzugriff Einzelne Anwendung Mehrere Clients (Web, Mobil)
Streamen Asynchrone Iteration im Prozess Vom Server gesendete Ereignisse (SSE)
Zustandsverwaltung Von der Anwendung verwaltet Bidirektionale Synchronisierung auf Protokollebene
Threadkontext Von der Anwendung verwaltet Protokollverwaltete Thread-IDs
Genehmigungsworkflows Benutzerdefinierte Implementierung Integrierte Protokollunterstützung

Übersicht über die Architektur

Die AG-UI Integration verwendet eine saubere, modulare Architektur:

┌─────────────────┐
│  Web Client     │
│  (Browser/App)  │
└────────┬────────┘
         │ HTTP POST + SSE
         ▼
┌─────────────────────────┐
│  FastAPI Endpoint       │
│  (add_agent_framework_  │
│   fastapi_endpoint)     │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  AgentFrameworkAgent    │
│  (Protocol Wrapper)     │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  Orchestrators          │
│  (Execution Flow Logic) │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  Agent              │
│  (Agent Framework)      │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  Chat Client            │
│  (Azure OpenAI, etc.)   │
└─────────────────────────┘

Wichtige Komponenten

  • FastAPI-Endpunkt: HTTP-Endpunkt, der SSE-Streaming und Anforderungsrouting behandelt
  • AgentFrameworkAgent: Lightweight Wrapper, der Agent Framework-Agents an AG-UI Protokoll anpasst
  • Orchestratoren: Behandeln unterschiedlicher Ausführungsflüsse (Standard, Human-in-the-Loop, Zustandsverwaltung)
  • Ereignisbrücke: Konvertiert Agent Framework-Ereignisse in AG-UI Protokollereignisse
  • Nachrichtenadapter: Bidirektionale Konvertierung zwischen AG-UI- und Agent Framework-Nachrichtenformaten
  • Bestätigungsstrategien: Erweiterbare Strategien für domänenspezifische Bestätigungsmeldungen

Wie das Agent-Framework in AG-UI übersetzt wird

Das Verständnis der Zuordnung von Agent-Framework-Konzepten zu AG-UI hilft Ihnen, effektive Integrationen zu erstellen.

Agent Framework-Konzept AG-UI Entsprechung Description
Agent Agent-Endpunkt Jeder Agent wird zu einem HTTP-Endpunkt
agent.run() HTTP POST-Anforderung Client sendet Nachrichten über HTTP
agent.run(..., stream=True) Vom Server gesendete Ereignisse Streaming-Antworten über SSE
Agentantwortaktualisierungen AG-UI-Ereignisse TEXT_MESSAGE_CONTENT, TOOL_CALL_START usw.
Funktionswerkzeuge (@tool) Backend-Tools Ausgeführt auf dem Server, Ergebnisse, die an den Client gestreamt wurden
Toolgenehmigungsmodus Mensch-überwachter Prozess Genehmigungsanforderungen/Antworten per Protokoll
Aufgezeichnete Unterhaltungen Threadverwaltung threadId bewahrt den Kontext zwischen Anfragen

Installation

Installieren Sie das AG-UI Integrationspaket:

pip install agent-framework-ag-ui --pre

Dadurch werden sowohl das Kern-Agent-Framework als auch AG-UI Integrationskomponenten installiert.

Nächste Schritte

So beginnen Sie mit AG-UI Integration:

  1. Erste Schritte: Erstellen Ihres ersten AG-UI Servers und Clients
  2. Backend-Toolrendering: Funktionswerkzeuge zu Ihren Agenten hinzufügen

Zusätzliche Ressourcen

  • Last updated on