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

AG-UI adalah protokol terbuka untuk streaming real-time antara agen AI dan UI frontend. Berikut cara kerja model event, jenis pesan yang didukung, dan alasan pentingnya bagi pengembang aplikasi agentic.

by AnyCap

Diagram arsitektur protokol AG-UI — menampilkan event streaming dua arah antara frontend UI dan agen AI

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

AG-UI protocol adalah spesifikasi terbuka yang dirancang untuk menyelesaikan masalah ini. Protokol ini mendefinisikan standar tentang bagaimana agen AI melakukan streaming event, meminta input, dan menampilkan state ke aplikasi frontend dan operator manusia secara real-time. Jika MCP (Model Context Protocol) menstandarkan cara agen mengakses tools, AG-UI menstandarkan cara agen berbicara 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 agen AI yang berhadapan langsung dengan manusia 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 di setiap tim — sering kali ad hoc, kurang terdokumentasi, dan sulit digunakan ulang. Ini menciptakan ekosistem yang terfragmentasi, di mana:

  • framework agen tidak bisa berbagi komponen frontend
  • pengembang harus membangun ulang infrastruktur UI streaming dari nol untuk setiap proyek
  • pengguna mendapatkan pengalaman yang tidak konsisten di berbagai produk berbasis agen
  • debugging perilaku agen memerlukan logging khusus di setiap implementasi

AG-UI menghadirkan kosakata bersama dan struktur event bersama sehingga framework agen apa pun dapat menghasilkan event yang bisa dirender oleh frontend yang kompatibel dengan 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 agen AI dan antarmuka yang berhadapan dengan pengguna.

AG-UI bersifat:

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

AG-UI bukan:

  • protokol tool; itu tugas MCP
  • framework agen itu sendiri
  • library komponen UI, meskipun implementasi referensi tersedia

AG-UI vs. MCP: Memahami Perbedaannya

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

Dimensi MCP AG-UI
Tujuan Komunikasi Agen ↔ Tool Komunikasi Agen ↔ Manusia/Frontend
Arah Agen memanggil tool, menerima hasil Agen melakukan streaming event; manusia mengirim pesan
Audiens Pengembang tool/server Pengembang frontend dan framework agen
Fokus Kapabilitas apa yang dapat digunakan agen Bagaimana agen mengomunikasikan state dan progresnya
Relasi Menangani sisi tool dari agen Menangani sisi antarmuka pengguna

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

Konsep Inti dalam AG-UI

Jenis Event

AG-UI mendefinisikan seperangkat standar jenis event yang dipancarkan agen:

Event siklus hidup:

  • RUN_STARTED / RUN_FINISHED — agen telah memulai atau menyelesaikan eksekusi
  • STEP_STARTED / STEP_FINISHED — langkah diskret dalam workflow telah dimulai atau berakhir
  • 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 tool

Event state:

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

Event kustom:

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

Giliran Manusia

AG-UI juga menstandarkan cara manusia berinteraksi dengan agen yang sedang berjalan. Frontend mengirim AgentInput untuk menginterupsi, mengarahkan ulang, atau memberikan informasi kepada agen di tengah eksekusi. Ini berbeda dari giliran percakapan baru — agen sedang berjalan, dan manusia memengaruhi tugas yang sedang dikerjakannya.

Arsitektur Berbasis Thread

AG-UI mengatur run agen ke dalam thread — konteks percakapan persisten yang mempertahankan state di beberapa run. Thread dalam AG-UI kurang lebih setara dengan sesi atau percakapan di framework lain, tetapi dengan dukungan protokol eksplisit untuk melanjutkan, bercabang, dan memutar ulang.

Cara Kerja AG-UI: Alur yang Umum

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

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

Mengimplementasikan AG-UI

Dukungan Framework

AG-UI mulai mendapat dukungan di berbagai framework agen utama:

  • LangGraph: event AG-UI dapat dipancarkan dari node graph menggunakan AG-UI Python SDK
  • Integrasi AG-UI CopilotKit: CopilotKit, framework frontend React untuk AI, menyediakan dukungan AG-UI native
  • Implementasi kustom: spesifikasi AG-UI bersifat terbuka; framework apa pun dapat mengimplementasikannya dengan definisi jenis event yang ada

Quick Start (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

Saat agen berbasis AG-UI Anda membutuhkan kapabilitas dunia nyata, seperti pencarian web, pembuatan gambar, atau penyimpanan file, AnyCap terintegrasi sebagai lapisan tool di bawah orkestrasi. Agen memanggil tool AnyCap selama loop eksekusinya dan memancarkan event TOOL_CALL_* yang sesuai agar frontend menampilkan apa yang sedang terjadi:

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

Agent emits: TOOL_CALL_START (tool: "anycap_search", args: {...})
Agent emits: TOOL_CALL_END (result: search results)
Agent emits: TOOL_CALL_START (tool: "anycap_image_generate", args: {...})
Agent emits: TOOL_CALL_END (result: image URL)
Agent emits: TEXT_MESSAGE (streaming summary with embedded image)

Transparansi penuh ini — yang ditampilkan melalui event AG-UI — adalah pembeda antara antarmuka manusia-agen yang tepercaya dan black box.

Mengapa AG-UI Penting untuk Aplikasi Agen Produksi

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

Kegunaan ulang komponen. Komponen frontend yang dibangun sesuai spesifikasi AG-UI akan bekerja dengan backend apa pun yang patuh. Bangun UI chat streaming sekali; gunakan dengan LangGraph, CrewAI, dan AutoGen tanpa perubahan.

Pengalaman pengguna yang konsisten. Pengguna melihat pola interaksi yang sama di berbagai workflow agen karena jenis event telah distandarkan.

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

Pengawasan manusia. Mekanisme AgentInput untuk intervensi manusia di tengah tugas sudah menjadi bagian dari protokol — bukan tempelan belakangan.

Kesimpulan

AG-UI mengisi celah nyata dalam stack infrastruktur AI agentic. Ketika agen menjadi semakin mampu dan semakin berhadapan langsung dengan pengguna, protokol tentang bagaimana mereka mengomunikasikan state dan menerima input manusia menjadi sama pentingnya dengan tool yang dapat mereka akses.

Bagi pengembang yang membangun produk berbasis agen pada 2026, mengadopsi AG-UI sejak awal berarti membangun di atas fondasi yang sedang dituju ekosistem — alih-alih mempertahankan lapisan komunikasi khusus yang akan menjadi beban saat produk Anda berkembang.

Bacaan lanjutan: