Integrasi AG-UI dengan Kerangka Kerja Agen

AG-UI adalah protokol yang memungkinkan Anda membangun aplikasi agen AI berbasis web dengan fitur canggih seperti streaming real time, manajemen status, dan komponen UI interaktif. Integrasi agent Framework AG-UI menyediakan konektivitas yang mulus antara agen dan klien web Anda.

Apa itu AG-UI?

AG-UI adalah protokol standar untuk membangun antarmuka agen AI yang menyediakan:

  • Hosting Agen Jarak Jauh: Menyebarkan agen AI sebagai layanan web yang dapat diakses oleh beberapa klien
  • Streaming Real-time: Streaming respons agen menggunakan Server-Sent Events (SSE) untuk mendapatkan umpan balik secara langsung
  • Komunikasi Standar: Format pesan yang konsisten untuk interaksi agen yang andal
  • Manajemen Sesi: Mempertahankan konteks percakapan di beberapa permintaan
  • Fitur Tingkat Lanjut: Persetujuan human-in-the-loop, sinkronisasi status, dan penyajian UI kustom

Kapan Menggunakan AG-UI

Pertimbangkan untuk menggunakan AG-UI saat Anda perlu:

  • Membangun aplikasi web atau seluler yang berinteraksi dengan agen AI
  • Menyebarkan agen sebagai layanan yang dapat diakses oleh beberapa pengguna bersamaan
  • Mengalirkan respons agen secara real-time untuk memberikan umpan balik pengguna langsung
  • Menerapkan alur kerja persetujuan tempat pengguna mengonfirmasi tindakan sebelum eksekusi
  • Menyinkronkan status antara klien dan server untuk pengalaman interaktif
  • Merender komponen UI kustom berdasarkan panggilan alat agen

Skenario AG-UI

AG-UI mendefinisikan tujuh skenario percontohan. Dukungan MAF bervariasi menurut SDK; gunakan bagian khusus bahasa di halaman ini untuk tingkat dukungan saat ini dan panduan implementasi.

  1. Obrolan Agentik: Obrolan streaming dasar dengan panggilan alat otomatis
  2. Backend Tool Rendering: Alat yang dijalankan pada backend dengan hasil yang dialirkan ke klien
  3. Manusia dalam Perulangan: Permintaan persetujuan fungsi untuk konfirmasi pengguna
  4. Agentic Generative UI: Alat asinkron untuk operasi jangka panjang dengan pembaruan status
  5. UI Generatif berbasis alat: Komponen UI kustom yang dirender berdasarkan panggilan alat
  6. Status Bersama: Sinkronisasi status dua arah antara klien dan server
  7. Pembaruan Status Prediktif: Alirkan argumen alat sebagai pembaruan status optimis

Membangun UI agen dengan CopilotKit

CopilotKit menyediakan komponen UI yang kaya untuk membangun antarmuka pengguna agen berdasarkan protokol AG-UI standar. CopilotKit mendukung antarmuka obrolan streaming, pemanggilan alat frontend & backend, interaksi human-in-the-loop, UI generatif, status bersama, dan banyak lagi. Anda dapat melihat contoh berbagai skenario UI agen yang didukung CopilotKit di aplikasi sampel AG-UI Dojo .

Untuk menyambungkan frontend CopilotKit React ke backend Agent Framework AG-UI, daftarkan titik akhir Anda sebagai HttpAgent dalam runtime CopilotKit. Ini memungkinkan alat frontend CopilotKit berfungsi sebagai perangkat klien AG-UI, dan semua fitur dalam AG-UI (streaming, persetujuan, sinkronisasi status) berfungsi secara otomatis.

CopilotKit membantu Anda fokus pada kemampuan agen sambil memberikan pengalaman pengguna yang profesional tanpa menciptakan ulang sesuatu yang sudah ada. Untuk mempelajari selengkapnya tentang memulai penggunaan Microsoft Agent Framework dan CopilotKit, lihat dokumentasi tentang integrasi Microsoft Agent Framework untuk CopilotKit.

Integrasi .NET

Integrasi .NET mengekspos MAF AIAgent sebagai titik akhir HTTP AG-UI. Adaptor hosting mengonversi aliran respons agen menjadi peristiwa AG-UI; perilaku agen inti seperti eksekusi dan persetujuan alat tetap menjadi bagian dari MAF.

Gunakan integrasi .NET untuk:

Klien AG-UI menentukan cara menampilkan teks, tool, persetujuan, dan peristiwa status.

Architecture

Paket host C# menambahkan endpoint ASP.NET Core di sekeliling agen MAF standar:

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

MapAGUIServer menyesuaikan permintaan AG-UI ke pesan MAF dan menjalankan opsi. Ini kemudian mengonversi respons streaming dari agen menjadi event AG-UI menggunakan AG-UI .NET SDK.

Penginstalan

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

Langkah berikutnya

Mulai menggunakan AG-UI

AG-UI vs. Penggunaan Agen Langsung

Meskipun Anda dapat langsung menjalankan agen di aplikasi Anda menggunakan metode run dan run(..., stream=True) Agent Framework, AG-UI menyediakan kemampuan tambahan.

Feature Penggunaan Agen Langsung Integrasi AG-UI
Deployment Disematkan dalam aplikasi Layanan jarak jauh melalui HTTP
Akses Pengguna Aplikasi tunggal Beberapa klien (web, seluler)
Streaming Iterasi asinkron dalam proses Peristiwa Server-Sent (SSE)
Manajemen Negara Dikelola oleh aplikasi Sinkronisasi tingkat protokol dua arah
Konteks Utas Dikelola oleh aplikasi ID utas yang dikelola protokol
Alur Kerja Persetujuan Implementasi kustom Dukungan protokol bawaan

Gambaran Umum Arsitektur

Integrasi AG-UI menggunakan arsitektur modular yang bersih:

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

Komponen Utama

  • Titik Akhir FastAPI: Titik akhir HTTP yang menangani streaming SSE, komentar keepalive yang dapat dikonfigurasi, dan perutean permintaan
  • AgentFrameworkAgent: Pembungkus ringan yang menyesuaikan agen Agent Framework dengan protokol AG-UI
  • Orkestrator: Menangani alur eksekusi yang berbeda (default, human-in-the-loop, manajemen status)
  • Event Bridge: Mengonversi peristiwa Kerangka Kerja Agen menjadi peristiwa protokol AG-UI
  • Adaptor Pesan: Konversi dua arah antara format pesan AG-UI dan Agent Framework
  • Strategi Konfirmasi: Strategi yang dapat diperluas untuk pesan konfirmasi khusus domain

Bagaimana Agent Framework Diaplikasikan ke AG-UI

Memahami bagaimana konsep Agent Framework dipetakan ke AG-UI membantu Anda membangun integrasi yang efektif:

Konsep Kerangka Kerja Agen AG-UI Setara Description
Agent Titik Akhir Agen Setiap agen menjadi titik akhir HTTP
agent.run() Permintaan HTTP POST Klien mengirim pesan melalui HTTP
agent.run(..., stream=True) Peristiwa yang Dikirim oleh Server Respons streaming melalui SSE
Pembaruan respons agen Peristiwa AG-UI TEXT_MESSAGE_CONTENT, TOOL_CALL_START, dll.
Alat fungsi (@tool) Alat Perangkat Lunak Penghubung Dijalankan di server, hasil dialirkan ke klien
Mode persetujuan alat Manusia dalam Lingkaran Permintaan/respons persetujuan melalui protokol
Riwayat percakapan Manajemen Utas threadId mempertahankan konteks di seluruh permintaan

Penginstalan

Instal paket integrasi AG-UI:

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

Ini menginstal kerangka kerja agen inti dan komponen integrasi AG-UI.

Langkah Selanjutnya

Untuk mulai menggunakan integrasi AG-UI:

  1. Memulai: Membangun server dan klien AG-UI pertama Anda
  2. Backend Tool Rendering: Menambahkan alat fungsi ke agen Anda
  3. Alur kerja: Mengekspos alur kerja multi-agen melalui AG-UI
  4. Human-in-the-Loop: Menerapkan alur kerja persetujuan
  5. Kompatibilitas Aplikasi MCP: Gunakan Aplikasi MCP dengan titik akhir AG-UI Anda
  6. Manajemen Status: Menyinkronkan status antara klien dan server

Sumber Daya Tambahan

Go mendukung AG-UI melalui provider/aguiprovider baik untuk server maupun klien.

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

Tip

Lihat contohAG-UI Go untuk sampel server dan klien lengkap.

  • Last updated on