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

scenariusze AG-UI

AG-UI definiuje siedem scenariuszy prezentacji. Obsługa programu MAF różni się w zależności od zestawu SDK; użyj sekcji specyficznej dla języka na tej stronie, aby uzyskać bieżące wskazówki dotyczące poziomu pomocy technicznej i implementacji.

  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 .

Aby połączyć frontend CopilotKit React z backendem frameworku Agent Framework AG-UI, zarejestruj swój punkt końcowy jako HttpAgent w środowisku uruchomieniowym CopilotKit. Dzięki temu narzędzia frontendowe CopilotKit mogą stać się narzędziami klienckimi AG-UI, a wszystkie funkcjonalności AG-UI (przesyłanie strumieniowe, zatwierdzenia, synchronizacja stanu) działają automatycznie.

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 na temat rozpoczynania pracy z narzędziami Microsoft Agent Framework i CopilotKit, zobacz dokumentację Microsoft Agent Framework integration for CopilotKit.

Integracja z platformą .NET

Integracja .NET uwidacznia program MAF AIAgent jako punkt końcowy HTTP AG-UI. Karta hostingowa konwertuje strumień odpowiedzi agenta na zdarzenia AG-UI; podstawowe zachowanie agenta, takie jak wykonywanie i zatwierdzanie narzędzi, pozostaje częścią programu MAF.

Użyj integracji .NET, aby:

AG-UI klienci decydują, jak renderować tekst, narzędzie, zatwierdzenie i zdarzenia stanu.

Architecture

Pakiet hostingowy języka C# dodaje punkt końcowy ASP.NET Core wokół zwykłego agenta MAF:

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

MapAGUIServer dostosowuje żądanie AG-UI do komunikatów MAF i opcji uruchamiania. Następnie konwertuje odpowiedź agenta na zdarzenia AG-UI przy użyciu zestawu SDK AG-UI .NET.

Instalacja

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

Następne kroki

Wprowadzenie do interfejsu użytkownika grupy dostępności

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
Deployment 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, który obsługuje strumieniowanie SSE, konfigurowalne komentarze podtrzymujące połączenie oraz trasowanie żą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
  3. Przepływy pracy: uwidaczniaj przepływy pracy obejmujące wiele agentów za pośrednictwem AG-UI
  4. Human-in-the-Loop: Wdrażanie przepływów pracy zatwierdzania
  5. Zgodność aplikacji MCP: używanie aplikacji MCP z punktem końcowym AG-UI
  6. Zarządzanie stanem: synchronizowanie stanu między klientem a serwerem

Dodatkowe zasoby

Go obsługuje AG-UI za pośrednictwem provider/aguiprovider zarówno dla serwerów, jak i klientów.

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

Wskazówka

Zobacz przykłady AG-UI Go, aby zobaczyć pełne przykłady serwera i klienta.

  • Last updated on