AG-UI Protocol: Standar Baru untuk Antarmuka Manusia-Agen

AG-UI Protocol: Standar Baru untuk Antarmuka Manusia-Agen

Seiring AI agent yang semakin mampu menangani alur kerja nyata, tantangan infrastruktur baru pun muncul: bagaimana manusia dan agen berkomunikasi selama eksekusi berlangsung—bukan hanya di awal dan akhir, tetapi sepanjang proses?

Protokol AG-UI adalah spesifikasi terbuka yang dirancang untuk menjawab pertanyaan ini. Protokol ini mendefinisikan standar bagaimana AI agent melakukan streaming event, meminta input, dan menampilkan status ke aplikasi frontend serta operator manusia secara real time. Jika MCP (Model Context Protocol) menstandarkan cara agen mengakses alat, AG-UI menstandarkan cara agen berkomunikasi dengan pengguna.

Panduan ini menjelaskan apa itu AG-UI, mengapa penting, cara kerjanya, dan bagaimana mulai menggunakannya dalam stack agen Anda.

Masalah yang Diselesaikan AG-UI

Sebelum AG-UI, setiap tim yang membangun aplikasi AI agent menghadap pengguna harus menciptakan protokol komunikasinya sendiri. Bagaimana agen memberi tahu frontend bahwa ia sedang berpikir? Bagaimana ia meminta keputusan manusia? Bagaimana pengguna mengirim koreksi di tengah tugas? Bagaimana progres ditampilkan?

Jawabannya berbeda-beda untuk setiap tim—seringkali bersifat ad hoc, kurang terdokumentasi, dan sulit digunakan ulang. Hal ini menciptakan ekosistem yang terfragmentasi di mana:

• Framework agen tidak bisa berbagi komponen frontend
• Pengembang harus membangun infrastruktur streaming UI dari nol untuk setiap proyek
• Pengguna mendapat pengalaman yang tidak konsisten di berbagai produk berbasis agen
• Debugging perilaku agen membutuhkan logging kustom di setiap implementasi

AG-UI menetapkan kosakata bersama dan struktur event sehingga framework agen mana pun dapat menghasilkan event yang dapat dirender oleh frontend kompatibel AG-UI—tanpa kode integrasi khusus.

Apa Itu AG-UI?

AG-UI adalah protokol event streaming terbuka yang mendefinisikan format dan semantik pesan yang dipertukarkan antara AI agent dengan antarmuka pengguna.

AG-UI bersifat:

• Tidak bergantung pada transport: bekerja melalui HTTP (Server-Sent Events), WebSocket, atau transport streaming apa pun
• Tidak bergantung pada framework: dapat diimplementasikan dalam bahasa atau framework agen apa pun
• Dua arah: agen mengirim event ke frontend; pengguna mengirim pesan dan interupsi ke agen
• Stateful: protokol menyertakan snapshot status sehingga frontend dapat merekonstruksi konteks agen secara lengkap kapan saja

AG-UI bukan:

• Protokol alat (itu tugas MCP)
• Framework agen itu sendiri
• Perpustakaan komponen UI (meski implementasi referensi tersedia)

AG-UI vs. MCP: Memahami Perbedaannya

Sumber kebingungan yang umum adalah bagaimana AG-UI berhubungan dengan Model Context Protocol (MCP) milik Anthropic.

Keduanya saling melengkapi. Agen yang berjalan di produksi biasanya menggunakan MCP untuk mengakses alat (pencarian web, pembuatan gambar, eksekusi kode) dan AG-UI untuk mengomunikasikan progres serta meminta input manusia.

Konsep Inti dalam AG-UI

Tipe Event

AG-UI mendefinisikan sekumpulan tipe event standar yang dikeluarkan agen:

Event siklus hidup:

• RUN_STARTED / RUN_FINISHED — agen telah memulai atau menyelesaikan eksekusi
• STEP_STARTED / STEP_FINISHED — langkah diskrit dalam alur kerja telah dimulai atau selesai
• RUN_ERROR — agen mengalami error yang tidak dapat dipulihkan

Event pesan:

• TEXT_MESSAGE_START / TEXT_MESSAGE_CONTENT / TEXT_MESSAGE_END — output teks streaming dari agen
• TOOL_CALL_START / TOOL_CALL_ARGS / TOOL_CALL_END — agen sedang memanggil alat

Event status:

• STATE_SNAPSHOT — snapshot lengkap dari status agen saat ini
• STATE_DELTA — pembaruan inkremental pada status
• MESSAGES_SNAPSHOT — riwayat percakapan lengkap pada titik tertentu

Event kustom:

• CUSTOM — untuk event spesifik aplikasi yang tidak tercakup dalam set standar

Giliran Manusia (Human Turn)

AG-UI juga menstandarkan cara manusia berinteraksi dengan agen yang sedang berjalan. Frontend mengirimkan AgentInput untuk menginterupsi, mengalihkan, atau memberikan informasi kepada agen di tengah eksekusi. Ini berbeda dari giliran percakapan baru—agen sedang berjalan, dan manusia sedang mempengaruhi tugas yang sedang dikerjakan.

Arsitektur Berbasis Thread

AG-UI mengorganisasi jalannya agen ke dalam thread—konteks percakapan persisten yang mempertahankan status di berbagai run. Thread dalam AG-UI kira-kira setara dengan sesi atau percakapan di framework lain, tetapi dengan dukungan protokol eksplisit untuk melanjutkan, bercabang, dan memutar ulang.

Cara Kerja AG-UI: Alur Tipikal

1. Pengguna mengirimkan tugas melalui frontend
2. Frontend mengirim permintaan InitialRun dengan RunAgentInput ke backend agen
3. Agen memulai eksekusi dan mengeluarkan event RUN_STARTED
4. Agen mengeluarkan STEP_STARTED untuk setiap langkah perencanaan
5. Agen memanggil alat → mengeluarkan TOOL_CALL_START, TOOL_CALL_ARGS, TOOL_CALL_END
6. Agen menghasilkan teks → mengeluarkan TEXT_MESSAGE_START, TEXT_MESSAGE_CONTENT (streaming), TEXT_MESSAGE_END
7. Agen mengeluarkan STATE_DELTA untuk memperbarui status frontend secara real time
8. Pengguna memutuskan untuk mengalihkan agen → mengirim AgentInput dengan koreksi
9. Agen mengintegrasikan koreksi dan melanjutkan
10. Agen mengeluarkan RUN_FINISHED

Frontend menerima event-event ini sebagai stream dan merendernya secara bertahap—menampilkan pemanggilan alat saat terjadi, melakukan streaming teks secara real time, dan memperbarui indikator progres berdasarkan event langkah.

Mengimplementasikan AG-UI

Dukungan Framework

AG-UI semakin mendapat dukungan dari framework agen utama:

• LangGraph: Event AG-UI dapat dikeluarkan dari node graf menggunakan AG-UI Python SDK
• Integrasi AG-UI CopilotKit: CopilotKit (framework frontend React untuk AI) hadir dengan dukungan AG-UI native
• Implementasi kustom: Spesifikasi AG-UI terbuka; framework apa pun dapat mengimplementasikannya dengan definisi tipe event

Mulai Cepat (Python)

from ag_ui.core import (
    RunAgentInput, EventType,
    RunStartedEvent, TextMessageStartEvent,
    TextMessageContentEvent, TextMessageEndEvent,
    RunFinishedEvent,
)
import uuid

async def run_agent(input: RunAgentInput):
    run_id = str(uuid.uuid4())

    yield RunStartedEvent(
        type=EventType.RUN_STARTED,
        thread_id=input.thread_id,
        run_id=run_id,
    )

    msg_id = str(uuid.uuid4())
    yield TextMessageStartEvent(type=EventType.TEXT_MESSAGE_START, message_id=msg_id, role="assistant")
    
    for chunk in agent.stream(input.messages):
        yield TextMessageContentEvent(
            type=EventType.TEXT_MESSAGE_CONTENT,
            message_id=msg_id,
            delta=chunk
        )

    yield TextMessageEndEvent(type=EventType.TEXT_MESSAGE_END, message_id=msg_id)
    yield RunFinishedEvent(type=EventType.RUN_FINISHED, thread_id=input.thread_id, run_id=run_id)

Menghubungkan ke AnyCap

Ketika agen berbasis AG-UI Anda membutuhkan kemampuan dunia nyata—pencarian web, pembuatan gambar, penyimpanan file—AnyCap terintegrasi sebagai lapisan alat di bawah orkestrasi. Agen memanggil alat AnyCap selama loop eksekusinya dan mengeluarkan event TOOL_CALL_* yang sesuai agar frontend menampilkan apa yang sedang terjadi:

Pengguna: "Teliti 5 framework AI terbaik dan buat gambar ringkasannya"

Agen mengeluarkan: TOOL_CALL_START (tool: "anycap_search", args: {...})
Agen mengeluarkan: TOOL_CALL_END (result: hasil pencarian)
Agen mengeluarkan: TOOL_CALL_START (tool: "anycap_image_generate", args: {...})
Agen mengeluarkan: TOOL_CALL_END (result: URL gambar)
Agen mengeluarkan: TEXT_MESSAGE (ringkasan streaming dengan gambar tertanam)

Transparansi penuh ini—yang ditampilkan melalui event AG-UI—itulah yang membedakan antarmuka manusia-agen yang tepercaya dari kotak hitam.

Mengapa AG-UI Penting untuk Aplikasi Agen Produksi

Jika Anda membangun produk berbasis agen, AG-UI menyediakan:

Komponen yang dapat digunakan ulang. Komponen frontend yang dibangun sesuai spesifikasi AG-UI bekerja dengan backend mana pun yang kompatibel. Bangun UI chat streaming sekali; gunakan bersama LangGraph, CrewAI, dan AutoGen tanpa perubahan.

Pengalaman pengguna yang konsisten. Pengguna melihat pola interaksi yang sama di berbagai alur kerja agen karena tipe event telah distandarkan.

Debugging. Snapshot status dan aliran event AG-UI memberi Anda rekaman lengkap eksekusi agen. Memutar ulang aliran event menunjukkan dengan tepat apa yang dilihat dan dilakukan agen di setiap langkah.

Pengawasan manusia. Mekanisme AgentInput untuk intervensi manusia di tengah tugas sudah built-in dalam protokol—bukan ditambahkan belakangan.

Kesimpulan

AG-UI mengisi kesenjangan nyata dalam tumpukan infrastruktur AI agentik. Seiring agen menjadi lebih canggih dan lebih berorientasi pengguna, protokol bagaimana mereka mengomunikasikan statusnya dan menerima input manusia menjadi sama pentingnya dengan alat yang dapat mereka akses.

Bagi pengembang yang membangun produk berbasis agen di 2026, mengadopsi AG-UI lebih awal berarti membangun di atas fondasi yang sedang menjadi standar ekosistem—alih-alih memelihara lapisan komunikasi khusus yang menjadi beban saat produk Anda berkembang.

Bacaan lanjutan:

• Perbandingan Framework Orkestrasi AI
• MCP vs. Skills: Mana yang Harus Digunakan?
• Kemampuan AnyCap
• Repositori GitHub AG-UI