Integrering av AG-UI med Agent Framework

AG-UI är ett protokoll som gör att du kan skapa webbaserade AI-agentprogram med avancerade funktioner som realtidsströmning, tillståndshantering och interaktiva gränssnittskomponenter. Agent Framework-AG-UI integrering ger sömlös anslutning mellan dina agenter och webbklienter.

Vad är AG-UI?

AG-UI är ett standardiserat protokoll för att skapa AI-agentgränssnitt som tillhandahåller:

  • Fjärragentvärdtjänst: Implementera AI-agenter som webbtjänster som flera klienter kan få åtkomst till
  • Realtidsströmning: Stream-agentsvar med Server-Sent Events (SSE) för omedelbar feedback
  • Standardiserad kommunikation: Konsekvent meddelandeformat för tillförlitliga agentinteraktioner
  • Sessionshantering: Underhålla konversationskontext över flera begäranden
  • Avancerade funktioner: Human-in-the-loop-godkännanden, tillståndssynkronisering och anpassad UI-återgivning

När använda AG-UI

Överväg att använda AG-UI när du behöver:

  • Skapa webb- eller mobilprogram som interagerar med AI-agenter
  • Distribuera agenter som tjänster som är tillgängliga för flera samtidiga användare
  • Strömma agentens svar i realtid för att ge omedelbar feedback till användaren
  • Implementera arbetsflöden för godkännande där användare bekräftar åtgärder före körning
  • Synkronisera tillstånd mellan klient och server för interaktiva upplevelser
  • Rendera anpassade gränssnittskomponenter baserat på agentverktygsanrop

AG-UI scenarier

AG-UI definierar sju scenarier. MAF-stöd varierar beroende på SDK; använd det språkspecifika avsnittet på den här sidan för den aktuella supportnivån och implementeringsvägledningen.

  1. Agentisk chatt: Grundläggande direktuppspelningschatt med automatiska verktygssamtal
  2. Rendering av serverdelsverktyg: Verktyg som körs på serverdelen med resultat som strömmas till klienten
  3. Människa i loopen: Begäranden om funktionsgodkännande för användarbekräftelse
  4. Agentic Generative UI: Async-verktyg för långvariga åtgärder med förloppsuppdateringar
  5. Verktygsbaserat generativt användargränssnitt: Anpassade gränssnittskomponenter renderade baserat på verktygsanrop
  6. Delat tillstånd: Dubbelriktad tillståndssynkronisering mellan klient och server
  7. Förutsägande tillståndsuppdateringar: Strömma verktygsargument som optimistiska tillståndsuppdateringar

Skapa agent-UIs med CopilotKit

CopilotKit tillhandahåller omfattande gränssnittskomponenter för att skapa agentens användargränssnitt baserat på standardprotokollet AG-UI. CopilotKit har stöd för direktuppspelning av chattgränssnitt, anrop till verktyg på klient- och serversidan, människa-i-loopen-interaktioner, generativt användargränssnitt, delad status och mycket mer. Du kan se exempel på de olika agentgränssnittsscenarier som CopilotKit stöder i AG-UI Dojo-exempelprogrammet .

Registrera din slutpunkt som en HttpAgent i CopilotKit runtime-miljön för att ansluta en CopilotKit React frontend till en Agent Framework AG-UI serverdel. På så sätt kan CopilotKits klientdelsverktyg flöda igenom som AG-UI klientverktyg, och alla AG-UI funktioner (direktuppspelning, godkännanden, tillståndssynkronisering) fungerar automatiskt.

CopilotKit hjälper dig att fokusera på agentens funktioner samtidigt som du levererar en polerad användarupplevelse utan att återuppfinna hjulet. Mer information om hur du kommer igång med Microsoft Agent Framework och CopilotKit finns i dokumentationen Microsoft Agent Framework-integrering för CopilotKit.

.NET-integrering

.NET-integreringen gör en MAF AIAgent tillgänglig som en AG-UI HTTP-ändpunkt. Värdadaptern konverterar agentens svarsström till AG-UI-händelser; agentens kärnbeteenden, såsom verktygsexekvering och godkännande, förblir en del av MAF.

Använd .NET integrering för att:

AG-UI klienter bestämmer hur text, verktyg, godkännande och tillståndshändelser ska återges.

Architecture

C#-värdpaketet lägger till en ASP.NET Core-slutpunkt kring en vanlig MAF-agent:

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

MapAGUIServer anpassar AG-UI-begäran för MAF-meddelanden och körningsalternativ. Sedan konverteras agentens strömningssvar till AG-UI händelser med hjälp av AG-UI .NET SDK.

Installation

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

Nästa steg

Kom igång med AG-UI

AG-UI jämfört med direktagentanvändning

Du kan köra agenter direkt i ditt program med agentramverkets run metoder och run(..., stream=True) metoder, men AG-UI ger ytterligare funktioner:

Feature Direktagentanvändning AG-UI integration
Deployment Inbäddad i programmet Fjärrtjänst via HTTP
Klientåtkomst Enskilt program Flera klienter (webb, mobil)
Streaming Asynkron iteration i processen Server-sända händelser (SSE)
Tillståndshantering Applikationshanterad Dubbelriktad synkronisering på protokollnivå
Trådkontext Applikationshanterad Protokollhanterade tråd-ID:n
Arbetsflöden för godkännande Anpassad implementering Inbyggt protokollstöd

Översikt över arkitektur

Den AG-UI integreringen använder en ren, modulär arkitektur:

┌─────────────────┐
│  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.)   │
└─────────────────────────┘

Nyckelkomponenter

  • FastAPI-slutpunkt: HTTP-slutpunkt som hanterar SSE-strömning, konfigurerbara keepalive-kommentarer och routning av begäranden
  • AgentFrameworkAgent: Lätt omslutning som anpassar Agent Framework-agenter till AG-UI protokoll
  • Orchestrators: Hantera olika körningsflöden (standard, human-in-the-loop, tillståndshantering)
  • Event Bridge: Konverterar Agent Framework-händelser till AG-UI protokollhändelser
  • Meddelandeadaptrar: Dubbelriktad konvertering mellan AG-UI- och Agent Framework-meddelandeformat
  • Bekräftelsestrategier: Utökningsbara strategier för domänspecifika bekräftelsemeddelanden

Så översätts Agent Framework till AG-UI

Att förstå hur Agent Framework-begrepp mappar till AG-UI hjälper dig att skapa effektiva integreringar:

Agent Framework-koncept AG-UI motsvarande Description
Agent Agentslutpunkt Varje agent blir en HTTP-slutpunkt
agent.run() HTTP POST-begäran Klienten skickar meddelanden via HTTP
agent.run(..., stream=True) Serverskickade händelser Direktuppspelningssvar via SSE
Uppdateringar av agentsvar AG-UI händelser TEXT_MESSAGE_CONTENT, TOOL_CALL_START, osv.
Funktionsverktyg (@tool) Backendverktyg Körs på servern, resultat strömmas till klienten
Läge för godkännande av verktyg Human-in-the-Loop (mänsklig interaktion i processen) Begäranden/svar om godkännande via protokoll
Konversationshistorik Trådhantering threadId upprätthåller kontexten mellan begäranden

Installation

Installera AG-UI integrationspaketet:

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

Detta installerar både kärnagentramverket och AG-UI integreringskomponenter.

Nästa steg

Så här kommer du igång med AG-UI integrering:

  1. Komma igång: Skapa din första AG-UI server och klient
  2. Rendering av serverdelsverktyg: Lägg till funktionsverktyg i dina agenter
  3. Arbetsflöden: Exponera arbetsflöden för flera agenter via AG-UI
  4. Human-in-the-Loop: Implementera arbetsflöden för godkännande
  5. MCP Apps-kompatibilitet: Använd MCP-appar med din AG-UI slutpunkt
  6. Tillståndshantering: Synkronisera tillstånd mellan klient och server

Ytterligare resurser

Go stöder AG-UI via provider/aguiprovider för både servrar och klienter.

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)
}

Tips/Råd

Se AG-UI Go-exempel för fullständiga server- och klientexempel.

  • Last updated on