Delen via

AG-UI integratie met Agent Framework

AG-UI is een protocol waarmee u webgebaseerde AI-agenttoepassingen kunt bouwen met geavanceerde functies zoals realtime streaming, statusbeheer en interactieve UI-onderdelen. De integratie van Agent Framework AG-UI biedt naadloze connectiviteit tussen uw agents en webclients.

Wat is AG-UI?

AG-UI is een gestandaardiseerd protocol voor het bouwen van AI-agentinterfaces die het volgende bieden:

  • Extern agenthosting: AI-agents implementeren als webservices die toegankelijk zijn voor meerdere clients
  • Realtime streaming: Reacties van streamagents met behulp van Server-Sent gebeurtenissen (SSE) voor directe feedback
  • Gestandaardiseerde communicatie: consistente berichtindeling voor betrouwbare agentinteracties
  • Sessiebeheer: gesprekscontext onderhouden voor meerdere aanvragen
  • Geavanceerde functies: Goedkeuringen van human-in-the-loop, statussynchronisatie en aangepaste UI-rendering

Wanneer gebruikt u AG-UI

Overweeg het gebruik van AG-UI wanneer u het volgende moet doen:

  • Web- of mobiele toepassingen bouwen die communiceren met AI-agents
  • Agents implementeren als services die toegankelijk zijn voor meerdere gelijktijdige gebruikers
  • Stream agent-antwoorden in real time om onmiddellijke feedback aan gebruikers te geven.
  • Goedkeuringswerkstromen implementeren waarbij gebruikers acties bevestigen vóór uitvoering
  • Status synchroniseren tussen client en server voor interactieve ervaringen
  • Aangepaste UI-onderdelen weergeven op basis van agenthulpprogramma-aanroepen

Ondersteunde functies

De integratie van Agent Framework AG-UI ondersteunt alle 7 AG-UI protocolfuncties:

  1. Agentic Chat: Eenvoudige streamingchat met automatisch aanroepen van hulpprogramma's
  2. Rendering van back-endhulpprogramma: hulpprogramma's uitgevoerd op back-end met resultaten die naar de client worden gestreamd
  3. Human in the Loop: Goedkeuringsaanvragen voor functie voor bevestiging van de gebruiker
  4. Agentic Ative UI: Async-hulpprogramma's voor langlopende bewerkingen met voortgangsupdates
  5. Op hulpprogramma's gebaseerde gebruikersinterface: Aangepaste UI-onderdelen die worden weergegeven op basis van hulpprogramma-aanroepen
  6. Gedeelde status: Synchronisatie van twee richtingen tussen client en server
  7. Voorspellende statusupdates: Toolargumenten streamen als optimistische statusupdates

Agent-UIs bouwen met CopilotKit

CopilotKit biedt uitgebreide UI-onderdelen voor het bouwen van gebruikersinterfaces van agents op basis van het standaardprotocol AG-UI. CopilotKit ondersteunt streaming-chatinterfaces, aanroepen van tools voor frontend en backend, menselijke interacties in de loop, generatieve UI, gedeelde status en nog veel meer. In de AG-UI Dojo-voorbeeldtoepassing ziet u een voorbeeld van de verschillende gebruikersinterfacescenario's voor agents die door CopilotKit worden ondersteund.

CopilotKit helpt u zich te concentreren op de mogelijkheden van uw agent terwijl u een professionele gebruikerservaring levert zonder het wiel opnieuw uit te vinden. Raadpleeg de Microsoft Agent Framework-integratie voor CopilotKit-documentatie voor meer informatie over hoe u mee aan de slag kunt gaan met Microsoft Agent Framework en CopilotKit.

AG-UI versus Direct Agentgebruik

Hoewel u agents rechtstreeks in uw toepassing kunt uitvoeren met behulp van Agent Framework Run en RunStreamingAsync methoden, biedt AG-UI extra mogelijkheden:

Feature Direct Agent-gebruik integratie van AG-UI
Uitrol Ingesloten in toepassing Externe dienst via HTTP
Clienttoegang Eén toepassing Meerdere clients (web, mobiel)
Streamen Asynchrone iteratie in het proces Server-Sent Gebeurtenissen (SSE)
Toestandsbeheer Door toepassing beheerd Momentopnamen op protocolniveau
Sessiecontext Door toepassing beheerd Door protocol beheerde sessie-id's
Goedkeuringswerkstromen Aangepaste implementatie Ingebouwd middleware-patroon

Overzicht van architectuur

De AG-UI-integratie maakt gebruik van ASP.NET Core en volgt een schone middleware-architectuur:

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

Belangrijke onderdelen

  • ASP.NET Core Endpoint: MapAGUI extensiemethode verwerkt HTTP-aanvragen en SSE-streaming
  • AIAgent: Agent Framework-agent gemaakt op basis van IChatClient of aangepaste implementatie
  • Middleware-pijplijn: optionele middleware voor goedkeuringen, statusbeheer en aangepaste logica
  • Protocoladapter: converteert tussen agentframeworktypen en AG-UI protocol-gebeurtenissen
  • Chatclient: Microsoft.Extensions.AI chatclient (Azure OpenAI, OpenAI, Ollama, enzovoort)

Hoe Agent Framework wordt omgezet in AG-UI

Inzicht in hoe de concepten van Agent Framework zijn toegewezen aan AG-UI helpt u bij het bouwen van effectieve integraties:

Agent Framework-concept AG-UI equivalent Description
AIAgent Agenteindpunt Elke agent wordt een HTTP-eindpunt
agent.Run() HTTP POST-aanvraag Client verzendt berichten via HTTP
agent.RunStreamingAsync() Server-verzonden gebeurtenissen Streaming antwoorden via SSE
AgentResponseUpdate AG-UI-gebeurtenissen Automatisch geconverteerd naar protocolgebeurtenissen
AIFunctionFactory.Create() Hulpprogramma's voor back-end Uitgevoerd op server, resultaten gestreamd
ApprovalRequiredAIFunction Human-in-the-Loop Middleware wordt geconverteerd naar goedkeuringsprotocol
AgentSession Sessiebeheer ConversationId behoudt context
ChatResponseFormat.ForJsonSchema<T>() Statusmomentopnamen Gestructureerde uitvoer wordt status gebeurtenissen

Installatie

De AG-UI-integratie is opgenomen in het ASP.NET Core-hostingpakket:

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

Dit pakket bevat alle afhankelijkheden die nodig zijn voor AG-UI-integratie, waaronder Microsoft.Extensions.AI.

Volgende stappen

Ga als volgende aan de slag met AG-UI-integratie:

  1. Aan de slag: uw eerste AG-UI-server en -client bouwen
  2. Rendering van back-end tools: functiehulpmiddelen toevoegen aan uw agents

Aanvullende informatiebronnen

AG-UI versus Direct Agentgebruik

Hoewel u agents rechtstreeks in uw toepassing kunt uitvoeren met behulp van Agent Framework run en run(..., stream=True) methoden, biedt AG-UI extra mogelijkheden:

Feature Direct Agent-gebruik integratie van AG-UI
Uitrol Ingesloten in toepassing Externe dienst via HTTP
Clienttoegang Eén toepassing Meerdere clients (web, mobiel)
Streamen Asynchrone iteratie in het proces Server-Sent Gebeurtenissen (SSE)
Toestandsbeheer Door toepassing beheerd Synchronisatie op bidirectioneel protocolniveau
Draadcontext Door toepassing beheerd Door protocol beheerde thread-id's
Goedkeuringswerkstromen Aangepaste implementatie Ingebouwde protocolondersteuning

Overzicht van architectuur

De AG-UI-integratie maakt gebruik van een schone, modulaire architectuur:

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

Belangrijke onderdelen

  • FastAPI-eindpunt: HTTP-eindpunt dat SSE-streaming en aanvraagroutering verwerkt
  • AgentFrameworkAgent: Lichtgewicht wrapper waarmee Agent Framework-agents worden aangepast aan AG-UI protocol
  • Orchestrators: verschillende uitvoeringsstromen verwerken (standaard, human-in-the-loop, statusbeheer)
  • Event Bridge: Converteert Agent Framework-gebeurtenissen naar AG-UI protocol-gebeurtenissen
  • Berichtadapters: Bidirectionele conversie tussen AG-UI en Agent Framework-berichtindelingen
  • Bevestigingsstrategieën: Uitbreidbare strategieën voor domeinspecifieke bevestigingsberichten

Hoe Agent Framework wordt omgezet in AG-UI

Inzicht in hoe de concepten van Agent Framework zijn toegewezen aan AG-UI helpt u bij het bouwen van effectieve integraties:

Agent Framework-concept AG-UI equivalent Description
Agent Agenteindpunt Elke agent wordt een HTTP-eindpunt
agent.run() HTTP POST-aanvraag Client verzendt berichten via HTTP
agent.run(..., stream=True) Server-verzonden gebeurtenissen Streaming antwoorden via SSE
Updates van reactie van agent AG-UI-gebeurtenissen TEXT_MESSAGE_CONTENT, TOOL_CALL_START, enz.
Functiehulpprogramma's (@tool) Hulpprogramma's voor back-end Uitgevoerd op server, resultaten gestreamd naar client
Modus voor goedkeuring van tools Human-in-the-Loop Goedkeuringsaanvragen/antwoorden via protocol
Samenvatting gesprek Threadbeheer threadId onderhoudt context tussen aanvragen

Installatie

Installeer het AG-UI-integratiepakket:

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

Hiermee worden zowel het core agentframework als AG-UI integratieonderdelen geïnstalleerd.

Volgende stappen

Ga als volgende aan de slag met AG-UI-integratie:

  1. Aan de slag: uw eerste AG-UI-server en -client bouwen
  2. Rendering van back-end tools: functiehulpmiddelen toevoegen aan uw agents

Aanvullende informatiebronnen

  • Last updated on