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

Seiring AI agent menjadi cukup mampu untuk menangani alur kerja nyata, tantangan infrastruktur baru pun muncul: bagaimana manusia dan agen berkomunikasi selama eksekusi—bukan hanya di awal dan akhir, tetapi sepanjang prosesnya?

AG-UI protocol adalah spesifikasi terbuka yang dirancang untuk menyelesaikan masalah ini. Ini mendefinisikan standar tentang bagaimana AI agent melakukan streaming event, meminta input, dan menampilkan status ke aplikasi frontend dan operator manusia secara real time. Jika MCP (Model Context Protocol) menstandarisasi cara agen mengakses alat, AG-UI menstandarisasi cara agen berbicara kepada pengguna.

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

Masalah yang Diselesaikan AG-UI

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

Jawabannya berbeda untuk setiap tim—sering kali ad hoc, kurang terdokumentasi, dan sulit digunakan kembali. Ini menciptakan ekosistem yang terfragmentasi di mana:

• Framework agen tidak dapat berbagi komponen frontend
• Pengembang harus membangun ulang infrastruktur streaming UI dari awal untuk setiap proyek
• Pengguna mendapatkan pengalaman yang tidak konsisten di berbagai produk berbasis agen
• Debugging perilaku agen memerlukan 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 mana pun yang kompatibel dengan AG-UI—tanpa kode integrasi kustom.

Apa Itu AG-UI?

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

Ini adalah:

• Transport-agnostic: bekerja melalui HTTP (Server-Sent Events), WebSocket, atau transport streaming apa pun
• Framework-agnostic: 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 ini mencakup snapshot status sehingga frontend dapat merekonstruksi konteks agen penuh kapan saja

Ini bukan:

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

AG-UI vs. MCP: Memahami Perbedaannya

Sumber kebingungan umum adalah bagaimana AG-UI berhubungan dengan Model Context Protocol (MCP) dari 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 mengkomunikasikan kemajuannya dan meminta input manusia.

Konsep Inti dalam AG-UI

Jenis Event

AG-UI mendefinisikan serangkaian jenis event standar yang dikeluarkan oleh 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 berakhir
• RUN_ERROR — agen mengalami kesalahan 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 memanggil sebuah alat

Event status:

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

Event kustom:

• CUSTOM — untuk event khusus aplikasi yang tidak tercakup oleh set standar

Giliran Manusia

AG-UI juga menstandarisasi 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 mempengaruhi tugasnya saat ini.

Arsitektur Berbasis Thread

AG-UI mengorganisir jalannya agen menjadi thread—konteks percakapan persisten yang mempertahankan status di beberapa jalannya. Thread dalam AG-UI kira-kira setara dengan sesi atau percakapan dalam 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 mengirimkan 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 → mengirimkan AgentInput dengan koreksi
9. Agen memasukkan koreksi dan melanjutkan
10. Agen mengeluarkan RUN_FINISHED

Frontend menerima event ini sebagai stream dan merendernya secara progresif—menampilkan panggilan alat saat terjadi, streaming teks secara real time, dan memperbarui indikator kemajuan berdasarkan event langkah.

Mengimplementasikan AG-UI

Dukungan Framework

AG-UI mendapatkan dukungan di berbagai framework agen utama:

• LangGraph: Event AG-UI dapat dikeluarkan dari node graph menggunakan AG-UI Python SDK
• Integrasi AG-UI CopilotKit: CopilotKit (framework frontend React untuk AI) hadir dengan dukungan AG-UI asli
• Implementasi kustom: Spesifikasi AG-UI terbuka; framework apa pun dapat mengimplementasikannya dengan definisi jenis 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 bertenaga 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 sehingga frontend menampilkan apa yang terjadi:

Pengguna: "Teliti 5 framework AI teratas dan buat gambar ringkasan"

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—inilah yang membedakan antarmuka manusia-agen yang tepercaya dari sebuah kotak hitam.

Mengapa AG-UI Penting untuk Aplikasi Agen Produksi

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

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

Pengalaman pengguna yang konsisten. Pengguna melihat pola interaksi yang sama di berbagai alur kerja agen karena jenis event sudah distandarisasi.

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

Pengawasan manusia. Mekanisme AgentInput untuk intervensi manusia di tengah tugas sudah terintegrasi dalam protokol—bukan ditambahkan sebagai renungan.

Kesimpulan

AG-UI mengisi kesenjangan nyata dalam stack infrastruktur AI agentik. Seiring agen menjadi lebih mampu dan lebih menghadap pengguna, protokol tentang cara mereka mengkomunikasikan status dan menerima input manusia menjadi sama pentingnya dengan alat yang dapat mereka akses.

Bagi pengembang yang membangun produk berbasis agen di tahun 2026, mengadopsi AG-UI lebih awal berarti membangun di atas fondasi yang sedang menjadi konvergensi ekosistem—bukan mempertahankan lapisan komunikasi bespoke yang menjadi beban seiring produk Anda berkembang.

Bacaan lebih lanjut:

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