Sohbet kutusundan çıkmak: Üretken arayüz, AG-UI ve CopilotKit

Uygulamanın içinde ikinci bir uygulama

Bir yapay zekâ özelliği eklediğinde çoğu zaman şunu yapıyorsun: Sağ alta bir sohbet kutusu. Kullanıcı soruyor, model bir paragraf ya da bir tablo yazıyor. Sonra kullanıcı o bilgiyi okuyup uygulamanın asıl ekranında kendisi uyguluyor.

Videonun benzetmesiyle bu, uygulamanın içine ikinci bir uygulama koymak. Ürün bir yanda, yapay zekâ diğer yanda. Aradaki bağlantıyı kullanıcının kafası kuruyor. Basit soru-cevap için yeterli. Ama ajanın bir şeyi gerçekten değiştirmesini istediğinde duvara çarpıyorsun.

Üretken arayüz ne demek?

Üretken arayüz (generative UI), ajanın cevap olarak sadece metin değil, arayüz parçası da döndürebilmesi. Mesela “geçen ayın harcamalarını göster” dediğinde paragraf yerine uygulamanın kendi grafik bileşeni beliriyor.

CopilotKit belgeleri bunu bir yelpaze olarak anlatıyor. Bir uçta kontrol, diğer uçta özgürlük var:

• Kontrollü: Bileşenleri sen yazıyorsun. Ajan sadece hangisini göstereceğini ve içine hangi veriyi koyacağını seçiyor. En öngörülebilir yol.
• Bildirimsel (declarative): Ajan, “bir kart, içinde bir liste ve bir düğme” gibi yapılandırılmış bir tarif gönderiyor. Uygulama bunu kendi onaylı bileşenleriyle çiziyor. Google’ın A2UI belirtimi bu türden: Arayüzü kod değil, JSON verisi olarak tarif ediyor. Böylece model rastgele kod çalıştıramıyor. Modelin bu tarifi hangi formatta yazması gerektiğini OpenUI yazısında ele aldık.
• Serbest: Arayüz, bir MCP sunucusundan hazır geliyor ve korumalı bir çerçevenin (iframe) içinde gösteriliyor. En esnek ama erişilebilirliği, marka görünümünü ve güvenliği garanti etmek en zor yol. Bu yolu MCP Apps yazımızda anlattık.

AG-UI: Ajanla ekran arasındaki ortak dil

Bunun altında bir iletişim sorunu var. LangGraph, CrewAI ya da kendi yazdığın bir ajan arka planda çalışıyor. Önde React, mobil ya da başka bir arayüz var. Her ikili için ayrı yapıştırma kodu yazılıyor.

AG-UI, bu boşluğu dolduran açık bir protokol. CopilotKit’in LangChain ve CrewAI ile ortaklığından doğmuş. Ajan ile arayüz arasında olay (event) akışı tanımlıyor: mesajlar, araç çağrıları, durum güncellemeleri, kullanıcı etkileşimleri. Belgeler kendini diğer iki protokolün yanına koyuyor: MCP ajanı araçlara ve veriye, A2A ajanları birbirine bağlıyor. AG-UI ise ajanı kullanıcıya bağlıyor.

CopilotKit’in dört parçası

Videodaki özetle CopilotKit şunları bir arada sunuyor:

1. AG-UI üzerinden ajanla haberleşme.
2. Ajanın uygulamanın gerçek bileşenlerini göstermesi.
3. Paylaşılan durum: Kullanıcı bir şeyi değiştirince ajan görüyor, ajan değiştirince ekran güncelleniyor.
4. İnsan onayı (human-in-the-loop): Ajan bir şey göndermeden ya da oluşturmadan önce durup kullanıcıya soruyor.

Videoya göre de en önemli parça bu: Gerçek ürünlerde kullanıcı tam otomasyon değil, son sözü istiyor.

Ne zaman gerekli, ne zaman fazla?

Videonun değerlendirmesi dengeli. Vercel AI SDK daha hafif ve her parçayı kendin kurmak istersen daha uygun. CopilotKit daha “pili içinde” bir çözüm, ama onun kalıplarını benimsiyorsun. Çekirdek kütüphane MIT lisanslı ve açık kaynak. Barındırma, ölçek ve kurumsal özellikler için ücretli planlar var. Hangi parçanın ücretsiz olduğunu baştan bilmek gerekiyor.

Sadece “soru sor, cevap al” istiyorsan bu yapının hepsi gereksiz. Ama ajanın kullanıcıyla aynı veri üzerinde çalışmasını istiyorsan, üretken arayüz doğru yön.

Düşün

• Kullandığın bir uygulamadaki yapay zekâ özelliği, cevabını sana mı bırakıyor, yoksa işi ekranda kendisi mi yapıyor?
• Bir ajanın arayüzü kendisinin çizmesine ne kadar izin verirdin: hazır bileşenler mi, tamamen serbest mi?

Kendi cümlelerimizle yazılmış bir özettir, çeviri değildir. Tüm kaynaklar yukarıda.