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

AG-UI Szenarien

AG-UI definiert sieben Showcase-Szenarien. Die MAF-Unterstützung variiert je nach SDK; verwenden Sie den sprachspezifischen Abschnitt auf dieser Seite für die aktuelle Unterstützungsstufe und Implementierungsanleitungen.

  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. Beispiele für die verschiedenen Agent-UI-Szenarien, die CopilotKit in der AG-UI Dojo-Beispielanwendung unterstützt.

Um ein CopilotKit React-Frontend mit einem Agent Framework AG-UI Back-End zu verbinden, registrieren Sie Ihren Endpunkt als eine HttpAgent in der CopilotKit-Laufzeit. Auf diese Weise können die Frontend-Tools von CopilotKit als AG-UI-Client-Tools durchlaufen, und alle AG-UI-Funktionen (Streaming, Genehmigungen, Zustandssynchronisierung) funktionieren automatisch.

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 .

.NET-Integration

Die .NET-Integration macht ein MAF AIAgent als AG-UI HTTP-Endpunkt verfügbar. Der Hostingadapter konvertiert den Antwortdatenstrom des Agents in AG-UI Ereignisse; Kern-Agent-Verhalten, z. B. Toolausführung und Genehmigung, bleibt Teil von MAF.

Verwenden Sie die .NET-Integration, um:

AG-UI Clients entscheiden, wie Text-, Tool-, Genehmigungs- und Zustandsereignisse gerendert werden sollen.

Architecture

Das C#-Hostingpaket fügt einen ASP.NET-Core-Endpunkt um einen gewöhnlichen MAF-Agenten herum hinzu:

AG-UI client -- HTTP POST / SSE --> MapAGUIServer --> AIAgent

MapAGUIServer passt die AG-UI Anforderung an MAF-Nachrichten und Ausführungsoptionen an. Anschließend wird die Streamingantwort des Agents mithilfe des AG-UI .NET SDK in AG-UI Ereignisse konvertiert.

Installation

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

Nächste Schritte

Erste Schritte mit AG-UI

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:

Funktion Direkte Agent-Verwendung Integration von AG-UI
Deployment Eingebettet in Anwendung Remotedienst über HTTP
Clientzugriff Einzelne Anwendung Mehrere Clients (Web, Mobil)
Streaming 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 verarbeitet, konfigurierbare Keepalive-Kommentare und Anforderungsrouting
  • 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
Konversationsverlauf 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
  3. Workflows: Verfügbarmachen von Workflows mit mehreren Agents über AG-UI
  4. Human-in-the-Loop: Implementieren von Genehmigungsworkflows
  5. MCP-Apps-Kompatibilität: Verwenden von MCP-Apps mit Ihrem AG-UI-Endpunkt
  6. Statusverwaltung: Synchronisieren des Zustands zwischen Client und Server

Zusätzliche Ressourcen

Go unterstützt AG-UI über provider/aguiprovider sowohl für Server als auch für Clients.

import "github.com/microsoft/agent-framework-go/provider/aguiprovider"

mux := http.NewServeMux()
mux.Handle("/", aguiprovider.NewJSONHTTPHandler(myAgent, aguiprovider.HandlerConfig{}))

if err := http.ListenAndServe(":8888", mux); err != nil {
    log.Fatal(err)
}

Tip

In den AG-UI Go-Beispielen finden Sie vollständige Server- und Clientbeispiele.

  • Last updated on