Udostępnij przez

AG-UI integracja z platformą Agent Framework

AG-UI to protokół, który umożliwia tworzenie webowych aplikacji AI agentów z zaawansowanymi funkcjami, takimi jak przesyłanie strumieniowe w czasie rzeczywistym, zarządzanie stanem oraz interaktywne składniki UI. Integracja platformy Agent Framework AG-UI zapewnia bezproblemową łączność między agentami a klientami internetowymi.

Co to jest AG-UI?

AG-UI to standardowy protokół do tworzenia interfejsów agenta sztucznej inteligencji, który zapewnia:

  • Zdalne hostowanie agentów: Wdrażaj agentów AI jako usługi internetowe dostępne dla wielu klientów
  • Przesyłanie strumieniowe w czasie rzeczywistym: Strumieniowanie odpowiedzi agenta przy użyciu zdarzeń przesyłanych przez serwer (SSE) w celu uzyskania natychmiastowych informacji zwrotnych
  • Ustandaryzowana komunikacja: spójny format komunikatów na potrzeby niezawodnych interakcji agenta
  • Zarządzanie sesjami: obsługa kontekstu konwersacji w wielu żądaniach
  • Funkcje zaawansowane: zatwierdzenia odbywające się z udziałem człowieka, synchronizacja stanów i niestandardowe renderowanie UI

Kiedy należy używać AG-UI

Rozważ użycie AG-UI, jeśli musisz:

  • Tworzenie aplikacji internetowych lub mobilnych korzystających z agentów sztucznej inteligencji
  • Wdrażaj agentów jako usługi dostępne dla wielu jednoczesnych użytkowników
  • Przesyłanie strumieniowe odpowiedzi agenta w czasie rzeczywistym w celu zapewnienia natychmiastowej informacji zwrotnej od użytkowników
  • Implementowanie przepływów pracy zatwierdzania, w których użytkownicy potwierdzają akcje przed wykonaniem
  • Synchronizowanie stanu między klientem a serwerem na potrzeby środowisk interaktywnych
  • Renderowanie niestandardowych składników interfejsu użytkownika na podstawie wywołań narzędzi agenta

Obsługiwane funkcje

Integracja platformy Agent Framework AG-UI obsługuje wszystkie 7 funkcji protokołu AG-UI:

  1. Agentic Chat: podstawowy czat strumieniowy z automatycznym wywoływaniem narzędzi
  2. Renderowanie narzędzi zaplecza: narzędzia wykonywane na zapleczu z wynikami przesyłanymi strumieniowo do klienta
  3. Człowiek w pętli: żądania zatwierdzenia funkcji na potrzeby potwierdzenia użytkownika
  4. Agentowy generatywny interfejs użytkownika: asynchroniczne narzędzia do operacji długotrwałych z aktualizacjami dotyczących postępu
  5. Interfejs użytkownika generowania oparty na narzędziach: niestandardowe składniki interfejsu użytkownika renderowane na podstawie wywołań narzędzi
  6. Stan udostępniony: dwukierunkowa synchronizacja stanu między klientem a serwerem
  7. Przewidywane aktualizacje stanu: argumenty narzędzi do strumieniowania jako optymistyczne aktualizacje stanu

Budowanie interfejsów użytkownika agenta przy użyciu CopilotKit

CopilotKit udostępnia zaawansowane składniki interfejsu użytkownika do tworzenia interfejsów użytkownika agenta na podstawie standardowego protokołu AG-UI. CopilotKit obsługuje interfejsy czatu strumieniowego, wywoływanie narzędzi frontendowych i backendowych, interakcje typu human-in-the-loop, generatywny interfejs użytkownika, współdzielony stan i wiele innych. Przykłady różnych scenariuszy interfejsu użytkownika agenta obsługiwanych przez copilotKit można znaleźć w przykładowej aplikacji AG-UI Dojo .

CopilotKit pomaga skupić się na możliwościach agenta, jednocześnie dostarczając dopracowane doświadczenie użytkownika bez potrzeby wynajdywania koła na nowo. Aby dowiedzieć się więcej o rozpoczęciu pracy z Microsoft Agent Framework i CopilotKit, zobacz dokumentację integracji Microsoft Agent Framework z CopilotKit.

AG-UI w porównaniu z bezpośrednim użyciem agenta

Chociaż można uruchamiać agentów bezpośrednio w aplikacji przy użyciu metod Run i RunStreamingAsync platformy Agent Framework, AG-UI zapewnia dodatkowe możliwości:

Funkcja Użycie agenta bezpośredniego integracja AG-UI
Wdrożenie Osadzony w aplikacji Usługa zdalna za pośrednictwem protokołu HTTP
Dostęp klienta Pojedyncza aplikacja Wielu klientów (sieć Web, urządzenia przenośne)
Streaming Iteracja asynchroniowa w procesie zdarzenia Server-Sent (SSE)
Zarządzanie stanem Zarządzane przez aplikację Zrzuty stanu protokołu
Kontekst sesji Zarządzane przez aplikację Identyfikatory sesji zarządzanej przez protokół
Przepływy pracy zatwierdzania Implementacja niestandardowa Wbudowany wzorzec oprogramowania pośredniczącego

Omówienie architektury

Integracja AG-UI używa platformy ASP.NET Core i jest zgodna z czystą architekturą opartą na oprogramowaniu pośredniczącym:

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

Kluczowe składniki

  • ASP.NET Core Endpoint: MapAGUI metoda rozszerzenia obsługuje żądania HTTP i przesyłanie strumieniowe SSE
  • AIAgent: agent frameworku utworzony z IChatClient lub implementacji niestandardowej
  • Ścieżka oprogramowania pośredniczącego: opcjonalne oprogramowanie pośredniczące dla zatwierdzeń, zarządzanie stanami i logika niestandardowa
  • Adapter protokołu: konwertuje między typami struktury agentów i zdarzeniami protokołu AG-UI
  • Klient czatu: Microsoft.Extensions.AI klient czatu (Azure OpenAI, OpenAI, Ollama itp.)

Jak Agent Framework przekłada się na AG-UI

Zrozumienie sposobu mapowania koncepcji struktury agenta na AG-UI ułatwia tworzenie skutecznych integracji:

Koncepcja struktury agentów odpowiednik AG-UI Description
AIAgent Punkt końcowy agenta Każdy agent staje się punktem końcowym HTTP
agent.Run() Żądanie HTTP POST Klient wysyła komunikaty za pośrednictwem protokołu HTTP
agent.RunStreamingAsync() Zdarzenia wysyłane przez serwer Odpowiedzi przesyłania strumieniowego za pośrednictwem protokołu SSE
AgentResponseUpdate wydarzenia AG-UI Automatycznie konwertowane na zdarzenia protokołu
AIFunctionFactory.Create() Narzędzia zaplecza Wykonane na serwerze, wyniki przesyłane strumieniowo
ApprovalRequiredAIFunction Człowiek w pętli Oprogramowanie pośredniczące konwertuje na protokół zatwierdzania
AgentSession Zarządzanie sesjami ConversationId utrzymuje kontekst
ChatResponseFormat.ForJsonSchema<T>() Migawki stanu Wyjście strukturalne staje się zdarzeniami stanowymi

Instalacja

Integracja AG-UI jest zawarta w pakiecie hostingu ASP.NET Core:

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

Ten pakiet zawiera wszystkie zależności wymagane do integracji AG-UI, w tym Microsoft.Extensions.AI.

Dalsze kroki

Aby rozpocząć integrację z AG-UI:

  1. Wprowadzenie: tworzenie pierwszego serwera AG-UI i klienta
  2. Renderowanie narzędzi warstwy serwerowej: dodaj funkcje narzędzi do agentów

Dodatkowe zasoby

AG-UI w porównaniu z bezpośrednim użyciem agenta

Chociaż można uruchamiać agentów bezpośrednio w aplikacji przy użyciu metod run i run(..., stream=True) platformy Agent Framework, AG-UI zapewnia dodatkowe możliwości:

Funkcja Użycie agenta bezpośredniego integracja AG-UI
Wdrożenie Osadzony w aplikacji Usługa zdalna za pośrednictwem protokołu HTTP
Dostęp klienta Pojedyncza aplikacja Wielu klientów (sieć Web, urządzenia przenośne)
Streaming Iteracja asynchroniowa w procesie zdarzenia Server-Sent (SSE)
Zarządzanie stanem Zarządzane przez aplikację Dwukierunkowa synchronizacja na poziomie protokołu
Kontekst wątku Zarządzane przez aplikację Identyfikatory wątków zarządzanych przez protokół
Przepływy pracy zatwierdzania Implementacja niestandardowa Obsługa wbudowanego protokołu

Omówienie architektury

Integracja AG-UI korzysta z czystej, modułowej architektury:

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

Kluczowe składniki

  • Punkt końcowy FastAPI: punkt końcowy HTTP obsługujący przesyłanie strumieniowe SSE i routing żądań
  • AgentFrameworkAgent: Lekka nakładka, która dostosowuje agentów Agent Framework do protokołu AG-UI.
  • Orkiestratory: obsługa różnych przepływów wykonywania (ustawienie domyślne, human-in-the-loop, zarządzanie stanem)
  • Event Bridge: konwertuje zdarzenia struktury agenta na zdarzenia protokołu AG-UI
  • Adaptery komunikatów: dwukierunkowa konwersja między formatami komunikatów AG-UI i Agent Framework
  • Strategie potwierdzenia: rozszerzalne strategie dotyczące komunikatów potwierdzenia specyficznych dla domeny

Jak Agent Framework przekłada się na AG-UI

Zrozumienie sposobu mapowania koncepcji struktury agenta na AG-UI ułatwia tworzenie skutecznych integracji:

Koncepcja struktury agentów odpowiednik AG-UI Description
Agent Punkt końcowy agenta Każdy agent staje się punktem końcowym HTTP
agent.run() Żądanie HTTP POST Klient wysyła komunikaty za pośrednictwem protokołu HTTP
agent.run(..., stream=True) Zdarzenia wysyłane przez serwer Odpowiedzi przesyłania strumieniowego za pośrednictwem protokołu SSE
Aktualizacje odpowiedzi agenta wydarzenia AG-UI TEXT_MESSAGE_CONTENT, TOOL_CALL_START, itp.
Narzędzia funkcji (@tool) Narzędzia zaplecza Wykonane na serwerze, wyniki przesyłane strumieniowo do klienta
Tryb zatwierdzania narzędzi Człowiek w pętli Żądania zatwierdzenia/odpowiedzi za pośrednictwem protokołu
Historia konwersacji Zarządzanie wątkami threadId obsługuje kontekst między żądaniami

Instalacja

Zainstaluj pakiet integracji AG-UI:

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

Spowoduje to zainstalowanie zarówno podstawowej platformy agentów, jak i składników integracji AG-UI.

Dalsze kroki

Aby rozpocząć integrację z AG-UI:

  1. Wprowadzenie: tworzenie pierwszego serwera AG-UI i klienta
  2. Renderowanie narzędzi warstwy serwerowej: dodaj funkcje narzędzi do agentów

Dodatkowe zasoby

  • Last updated on