integrace AG-UI s architekturou agentů

Ag-UI je protokol, který umožňuje vytvářet webové aplikace agenta AI s pokročilými funkcemi, jako jsou streamování v reálném čase, správa stavu a interaktivní komponenty uživatelského rozhraní. Integrace agentního rámce AG-UI poskytuje bezproblémové připojení mezi vašimi agenty a webovými klienty.

Co je AG-UI?

AG-UI je standardizovaný protokol pro vytváření rozhraní agenta AI, která poskytuje:

• Hostování vzdáleného agenta: Nasazení agentů AI jako webových služeb dostupných více klienty
• Streamování v reálném čase: Odpovědi agenta streamu s využitím událostí Server-Sent (SSE) pro okamžitou zpětnou vazbu
• Standardizovaná komunikace: Konzistentní formát zpráv pro spolehlivé interakce agentů
• Správa relací: Udržování kontextu konverzace napříč několika požadavky
• Pokročilé funkce: Schvalování s lidským zásahem, synchronizace stavu a individuální vykreslování uživatelského rozhraní

Kdy použít AG-UI

Zvažte použití AG-UI, pokud potřebujete:

• Vytváření webových nebo mobilních aplikací, které komunikují s agenty umělé inteligence
• Nasazení agentů jako služeb přístupných více souběžnými uživateli
• Streamujte odpovědi agentů v reálném čase pro poskytnutí okamžité uživatelské zpětné vazby.
• Implementace pracovních postupů schválení, ve kterých uživatelé před spuštěním potvrdí akce
• Synchronizace stavu mezi klientem a serverem pro interaktivní prostředí
• Vykreslení vlastních komponent uživatelského rozhraní na základě volání nástrojů agenta

Podporované funkce

Integrace rámce AG-UI podporuje všech 7 funkcí protokolu AG-UI.

1. Chat agentů: Základní streamovací chat s automatickým voláním nástrojů
2. Vykreslování nástrojů back-endu: Nástroje spouštěné v back-endu s výsledky streamovanými do klienta
3. Spolupráce člověka a systému: Žádosti o schválení funkcí pro potvrzení uživatelem
4. Agentní generativní uživatelské rozhraní: asynchronní nástroje pro operace, které trvají dlouho, s aktualizací průběhu
5. Generování uživatelského rozhraní založeného na nástrojích: Vlastní součásti uživatelského rozhraní vykreslené na základě volání nástrojů
6. Sdílený stav: Obousměrná synchronizace stavu mezi klientem a serverem
7. Prediktivní aktualizace stavu: Argumenty nástroje Stream jako optimistické aktualizace stavu

Vytváření uživatelských rozhraní agenta pomocí CopilotKitu

CopilotKit poskytuje bohaté komponenty uživatelského rozhraní pro vytváření uživatelských rozhraní agentů na základě standardního protokolu AG-UI. CopilotKit podporuje streamovací chatovací rozhraní, volání nástrojů na front-endu a back-endu, interakce s lidským vstupem, generativní uživatelské rozhraní, sdílený stav a mnoho dalšího. Můžete si prohlédnout příklady různých scénářů uživatelského rozhraní agenta, které CopilotKit podporuje v ukázkové aplikaci AG-UI Dojo .

CopilotKit vám pomůže soustředit se na možnosti vašeho agenta při poskytování vylepšeného uživatelského prostředí bez opětovného vytvoření kolečka. Další informace o tom, jak začít používat Microsoft Agent Framework a CopilotKit, najdete v dokumentaci k platformě Microsoft Agent Framework pro CopilotKit .

AG-UI oproti přímému využití agenta

I když můžete spouštět agenty přímo ve vaší aplikaci pomocí rozhraní Agent Framework Run a RunStreamingAsync metod, AG-UI nabízí další možnosti:

Vlastnost	Využití přímého agenta	Integrace AG-UI
Nasazení	Vložené v aplikaci	Vzdálená služba přes PROTOKOL HTTP
Klientský přístup	Jedna aplikace	Více klientů (web, mobilní zařízení)
Streamování	Asynchronní iterace v procesu	události Server-Sent (SSE)
Správa stavu	Spravovaná aplikací	Snímky stavu na úrovni protokolu
Kontext relace	Spravovaná aplikací	ID relací spravovaných protokolem
Schvalovací pracovní postupy	Vlastní implementace	Předdefinovaný model middlewaru

Přehled architektury

Integrace AG-UI používá ASP.NET Core a řídí se čistou architekturou založenou na middlewaru:

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

Klíčové komponenty

• koncový bod ASP.NET Core: MapAGUI metoda rozšíření zpracovává požadavky HTTP a streamování SSE
• AIAgent: Agent Framework vytvořený z IChatClient nebo vlastní implementace
• Kanál middlewaru: Volitelný middleware pro schvalování, správu stavu a vlastní logiku
• Adaptér protokolu: Převádí mezi typy rozhraní Agent Framework a událostmi protokolu AG-UI
• Chatovací klient: Microsoft.Extensions.AI chatovacího klienta (Azure OpenAI, OpenAI, Ollama atd.)

Překlad rozhraní Agent Framework do AG-UI

Pochopení toho, jak se koncepty Agent Frameworku mapují na AG-UI, pomáhá vytvářet efektivní integrace.

Koncept Agent Framework	ekvivalent AG-UI	Description
AIAgent	Koncový bod agenta	Každý agent se stane koncovým bodem HTTP.
agent.Run()	Požadavek HTTP POST	Klient odesílá zprávy přes protokol HTTP.
agent.RunStreamingAsync()	Události odesílané serverem	Streamování odpovědí přes SSE
AgentResponseUpdate	události AG-UI	Automaticky převedeno na události protokolu
AIFunctionFactory.Create()	Back-endové nástroje	Vykonáno na serveru, výsledky se streamují
ApprovalRequiredAIFunction	Člověk ve smyčce	Middleware se převede na schvalovací protokol.
AgentSession	Správa relací	ConversationId udržuje kontext.
ChatResponseFormat.ForJsonSchema<T>()	Snímky stavu	Strukturovaný výstup se promění na události stavu.

Installation

Integrace AG-UI je součástí hostitelského balíčku ASP.NET Core:

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

Tento balíček zahrnuje všechny závislosti potřebné pro integraci AG-UI, včetně Microsoft.Extensions.AI.

Další kroky

Začínáme s integrací AG-UI:

1. Začínáme: Sestavení prvního serveru a klienta AG-UI
2. Vykreslování back-endových nástrojů: Vylepšení agentů přidáním funkčních nástrojů

Další zdroje

• Dokumentace k rozhraní Agent Framework
• Dokumentace k protokoluAG-UI
• Dokumentace k Microsoft.Extensions.AI
• Úložiště GitHub v prostředí Agent Framework

AG-UI oproti přímému využití agenta

I když můžete spouštět agenty přímo ve vaší aplikaci pomocí rozhraní Agent Framework run a run(..., stream=True) metod, AG-UI nabízí další možnosti:

Vlastnost	Využití přímého agenta	Integrace AG-UI
Nasazení	Vložené v aplikaci	Vzdálená služba přes PROTOKOL HTTP
Klientský přístup	Jedna aplikace	Více klientů (web, mobilní zařízení)
Streamování	Asynchronní iterace v procesu	události Server-Sent (SSE)
Správa stavu	Spravovaná aplikací	Obousměrná synchronizace na úrovni protokolu
Kontext vlákna	Spravovaná aplikací	ID vláken spravovaných protokolem
Schvalovací pracovní postupy	Vlastní implementace	Podpora integrovaných protokolů

Přehled architektury

Integrace AG-UI používá čistou modulární architekturu:

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

Klíčové komponenty

• Koncový bod FastAPI: Koncový bod HTTP, který zpracovává streamování SSE a směrování požadavků
• AgentFrameworkAgent: Lightweight wrapper, který adaptuje agenty Agent Framework na AG-UI protokol
• Orchestrátory: Řízení různých výkonných toků (výchozí, zapojení člověka, správa stavu)
• Přemostění událostí: Převede události rozhraní Agent Framework na události protokolu AG-UI.
• Adaptéry zpráv: Obousměrný převod mezi formáty zpráv AG-UI a Agent Framework
• Strategie potvrzení: Rozšiřitelné strategie pro potvrzovací zprávy specifické pro doménu

Překlad rozhraní Agent Framework do AG-UI

Pochopení toho, jak se koncepty Agent Frameworku mapují na AG-UI, pomáhá vytvářet efektivní integrace.

Koncept Agent Framework	ekvivalent AG-UI	Description
Agent	Koncový bod agenta	Každý agent se stane koncovým bodem HTTP.
agent.run()	Požadavek HTTP POST	Klient odesílá zprávy přes protokol HTTP.
agent.run(..., stream=True)	Události odesílané serverem	Streamování odpovědí přes SSE
Aktualizace odpovědí agenta	události AG-UI	TEXT_MESSAGE_CONTENT, TOOL_CALL_STARTatd.
Nástroje funkcí (@tool)	Back-endové nástroje	Spuštěno na serveru, výsledky streamované do klienta
Režim schválení nástrojů	Člověk ve smyčce	Žádosti o schválení/odpovědi prostřednictvím protokolu
Historie konverzace	Správa vláken	threadId udržuje kontext napříč požadavky.

Installation

Nainstalujte integrační balíček AG-UI:

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

Tím se nainstalují jak základní rozhraní agenta, tak komponenty integrace AG-UI.

Další kroky

Začínáme s integrací AG-UI:

1. Začínáme: Sestavení prvního serveru a klienta AG-UI
2. Vykreslování back-endových nástrojů: Vylepšení agentů přidáním funkčních nástrojů

Další zdroje

• Dokumentace k rozhraní Agent Framework
• Dokumentace k protokoluAG-UI
• AG-UI aplikace Dojo – ukázková aplikace demonstrující integraci rozhraní Agent Framework
• Úložiště GitHub v prostředí Agent Framework