Ön uç eskiden sabit bir şeydi. Tasarımcılar çizerdi. Mühendisler inşa ederdi. Kullanıcılar ne çıktıysa onu alırdı.
Bu dönem bitti.
2026'da piyasaya sürülen arayüzler, kısmen ajanın kendisi tarafından, gerçek zamanlı olarak, kullanıcının gerçekten ne istediğine göre çiziliyor. Tablo iste, tablo al. Onu anlatan bir paragraf değil.
Generative UI, ajanların anlatmayı bırakıp göstermeye başlamasını sağlayan katmandır. Bunu oluşturmak için üç desen ortaya çıktı ve aralarındaki farklar çoğu ekibin fark ettiğinden daha önemli.
Ama bunu oluşturmanın tek bir yolu yok. Üç yol var. Ve çoğu ekip, seçim yaptıklarının farkında bile olmadan birini seçiyor.
Protokol yığını
Üç protokol. Her biri tek bir iş yapar.
MCP, ajanları araçlara bağlar. A2A, ajanları birbirine bağlar. AG-UI, ajanları kullanıcılara bağlar.
AG-UI, aşağıda göreceğiniz her şeyi taşıyan akış katmanıdır: araç çağrıları, A2UI şemaları, MCP App olayları, durum delta'ları. SSE üzerinden çalışır. Durum aynı akış üzerinde iki yönlü akar. Kullanıcı düzenler, ajan görür. Ajan değiştirir, kullanıcı görür.
A2UI, Google'ın ajanların UI'ı şema olarak yayması için belirlediği standarttır. AG-UI üzerinde çalışır. CopilotKit bunu üretimde kullanır.
Bunların hiçbiri için bir ayrıştırıcı yazmazsınız. CopilotKit bir AG-UI istemcisidir ve akışı sizin için çözer.
Çoğu ekibin karıştırdığı üç desen
On geliştiriciye Generative UI'nin ne olduğunu sorun. On farklı cevap alırsınız. Çoğu, mevcut çerçevelerinin hangi deseni sunduğunu anlatıyor.
Sadece üç tane var. Spektrum, daha fazla kontrolden daha fazla esnekliğe doğru uzanır.
- Kontrollü: Bileşenleri önceden oluşturursunuz. Ajan hangisini render edeceğini seçer.
- Bildirimsel: Ajan bir şema yayar. Uygulamanız bunu bileşenlere eşler.
- Açık Uçlu: Ajan ham HTML yazar. Uygulamanız bunu bir sanal alanda render eder.
2026'daki her Gen UI çerçevesi bu çizgi üzerinde bir yerde durur. Farklılıklar mimaridir, kozmetik değil. Her desen, ölçeklendiğinde uygulamanızı farklı bir şekilde bozar.
Farklı yığınlar denedim. Çoğu, bir deseni iyi kapsar. Aynı çalışma zamanında üçünü de desteklediği ve AG-UI üzerinde çalıştığı için CopilotKit'te karar kıldım. Aşağıdaki her şeyin üzerinde çalıştığı yığın bu.
Desen 1: Kontrollü, ön uç UI'ı sahiplenir
Çoğu ekibin başladığı yer burasıdır. Aynı zamanda çoğu ekibin takılıp kaldığı yer.
Bir React bileşenini önceden oluşturursunuz. Bunu bir araç adına bağlarsınız. Ajan o aracı seçer ve bileşen, ajanın argümanlarını prop olarak alarak sohbet içinde satır içi render edilir.
Bir ön uç kancası. Sıfır ajan kodu. Bu kadar.
1"use client";2import { z } from "zod";3import { useComponent } from "@copilotkit/react-core/v2";45const expenseChartSchema = z.object({6 title: z.string(),7 data: z.array(z.object({ label: z.string(), value: z.number() })),8});910function ExpenseChart({ title, data }: z.infer<typeof expenseChartSchema>) {11 return (12 <section className="rounded-xl border p-4">13 <h3 className="text-sm font-medium">{title}</h3>14 <ul className="mt-2 grid gap-1">15 {data.map((d) => (16 <li key={d.label} className="flex justify-between text-sm">17 <span>{d.label}</span>18 <span>${d.value}</span>19 </li>20 ))}21 </ul>22 </section>23 );24}2526export function ExpensesCopilot() {27 useComponent({28 name: "showExpenseChart",29 description: "Render a breakdown of expenses by category.",30 parameters: expenseChartSchema,31 render: ExpenseChart,32 });3334 return null;35}
Kanca, aracı CopilotKit'in çalışma zamanına kaydeder. Çalışma zamanı, bunu AG-UI üzerinden ajana duyurur. Ajan onu çağırdığında, argümanlar akar ve bileşeniniz satır içi render edilir. Yazılacak Python aracı, bağlanacak şema veya eklenecek API rotası yok.
Tasarım sisteminiz kontrolü elinde tutar.
Bu gider tablosu bir maket değil. AI Finansal Koç Ajanı gerçek bütçeler, tasarruf planları ve borç ödeme için benzer kartlar render eder.
Önce çıplak kancayı mı istiyorsunuz? 'use-generative-ui-examples.tsx' dosyası Generative UI Başlangıç Projesi içindedir.
Token vergisi
Kaydettiğiniz her bileşen, kullanıcı daha bir şey söylemeden ajanın bağlam penceresinde yer alır. Tipik bir araç açıklaması ve JSON şeması yaklaşık 400 token tutar. 25 bileşen, her dönüşte 10.000 token demektir. Bu vergiyi her istekte ödersiniz.
Ajan ayrıca yanlış bileşeni de seçer. Çok fazlası birbirine benzer. Pasta grafiği ve halka grafiği ikisi de "oranları gösterir." Tahmin eder.
Ajan tarafı durumu ne zaman eklenmeli
Paylaşılan durum, bir Python aracı yazmaya değer olduğu tek durumdur. Ajan, oturum durumuna yazar. UI'ın diğer kısımları abone olur ve ikinci bir LLM çağrısı olmadan yeniden render eder. Bir metriği sabitle, gösterge paneli güncellenir. Bir satır ekle, tablo yeniden çizilir.
1from google.adk.agents import LlmAgent2from google.adk.tools import ToolContext34def pin_metric(tool_context: ToolContext, label: str, value: float) -> dict:5 """Bir metriği kullanıcının panosuna sabitle."""6 pinned = tool_context.state.get("pinnedMetrics", [])7 tool_context.state["pinnedMetrics"] = pinned + [{"label": label, "value": value}]8 return {"status": "pinned"}910agent = LlmAgent(name="dashboard_agent", model="gemini-3.5-flash", tools=[pin_metric])
Ön uç, CopilotKit'in paylaşılan durum kancası aracılığıyla sabitlenmiş metrikleri okur. Sohbet bileşeni, aynı araç adı ön uç kancasına bağlı olduğu için hâlâ satır içi render edilir.
Sohbette bir metriği sabitle. Panel, ikinci bir model çağrısı olmadan yeniden çizilir. Bu, AI Pano Ajanı'dır.
AI Derin Araştırma Ajanı bunu bir adım öteye taşır. Plan, her arama, her dosya yazma, hepsi canlı kartlar olarak akar. Diğer her şey için ön uç kancası tüm hikayedir.
Kontrollü ne zaman kullanılmalı: On veya daha az yüksek değerli akış. Tasarım hassasiyeti önemlidir. İhtiyacınız olan kesin UI'ları bilirsiniz.
Ne zaman kullanılmamalı: Kod tabanınız, kullanım durumlarıyla doğrusal olarak büyür. 25 bileşen, her ajan dönüşünde 25 araç tanımı demektir.
Ne bozulur: Ajan yanlış bileşeni seçer. İki araç açıklaması anlamsal olarak örtüşür. 15 araçtan sonra, muhtemelen ikisi "verileri görüntüler" gibi okunur. Düzeltme: Görseli değil, kullanıcının amacını belirtecek şekilde açıklamaları yeniden yazın. "Kullanıcı bir bütünün parçalarını karşılaştırmak istediğinde kullan" ifadesi "bir pasta grafiği render eder" ifadesinden daha iyidir.
Desen 2: Bildirimsel (A2UI), ajan şema yayar
Çoğu üretim ajanı uygulamasının ihtiyaç duyduğu desen budur.
Ajan, UI'ı tanımlayan bir JSON şeması yayar. Uygulamanız, şema düğümlerini React'e (veya Svelte, Flutter, herhangi bir şeye) eşleyen bir bileşen kataloğuna sahiptir. Bir araç. Birçok UI.
A2UI standart standarttır. CopilotKit çalışma zamanını sağlar. ADK ajanı çalıştırır. AG-UI ise bağlantıdır.
Ajan aracı sırayla üç işlem döndürür: bir yüzey oluştur, bileşen ağacını it, veriyi it.
1def search_flights(flights: list[Flight]) -> dict[str, Any]:2 """Uçuşları ara ve zengin kartlar olarak görüntüle."""3 return {4 "a2ui_operations": [5 {"type": "create_surface", "surfaceId": SURFACE_ID, "catalogId": CATALOG_ID},6 {"type": "update_components", "surfaceId": SURFACE_ID, "components": FLIGHT_SCHEMA},7 {"type": "update_data_model", "surfaceId": SURFACE_ID, "data": {"flights": flights}},8 ]9 }
Bu gerçek fonksiyondur, sözde kod değil. Çalışma zamanı ara yazılımı, araç sonucundaki a2ui_operations kabını görür ve yüzeyleri ön uca iletir. Otel eklemek mi? Yeni şema dosyası. Farklı bir surface ID'ye sahip bir fonksiyon daha. Sıfır ek ön uç çalışması.
Sabit şema ve dinamik şema
Yukarıdaki bileşen ağacı flights.json dosyasında yaşar. Onu siz yazdınız. Ajan yalnızca verileri doldurur. Bu sabit bir şemadır.
Dinamik şema bunu tersine çevirir: ikincil bir LLM, konuşma bağlamına göre her dönüşte bileşen ağacını yazar. Sonunda aynı a2ui_operations kabı. Google ADK vitrini her ikisini de sunar.
Katalog sözleşmedir
Tanımlar, ajanın yaymasına izin verilen bileşenleri, prop'lar için Zod şemalarıyla birlikte listeler. Oluşturucular React'i doldurur. Yazım hataları boş ekranlar yerine derleme hataları haline gelir.
1const renderers: CatalogRenderers<TravelDefinitions> = {2 FlightCard: ({ props }) => (3 <article className="rounded-xl border p-4">4 <header className="flex justify-between">5 <span>{(props as any).airline}</span>6 <span>{(props as any).price}</span>7 </header>8 <div className="text-sm text-muted-foreground">9 {(props as any).origin} → {(props as any).destination} · {(props as any).departureTime}10 </div>11 </article>12 ),13};1415export const travelCatalog = createCatalog(travelDefinitions, renderers, {16 catalogId: "copilotkit://travel-catalog",17 includeBasicCatalog: true,18});
Her iki parça da Generative UI Başlangıç Projesi içinde, bağlı ve eşleşmiş halde bulunur. 'a2ui_fixed_schema.py' dosyasında search_flights, 'renderers.tsx' dosyasında FlightCard kataloğu. Uçuş isteyin. Kartların sohbete aktığını izleyin.
Düğmeler ve diğer etkileşimli bileşenler, şemada bir eylem taşır. Temel katalog, bunu onClick'e bağlar. Tıklama, AG-UI üzerinden ajana bir olay gönderir. Ajan, sırada ne render edeceğine karar verir. Sıfır tıklama işleyicisi.
Token matematiği
50 kart türü veya 500, ajan tek bir fonksiyon görür. Bileşen kütüphaneniz büyüdükçe dönüş başına token sayısı sabit kalır.
Herhangi bir işleme çerçevesine genişletilebilir çünkü sadece JSON'dur. Zaten AG-UI ile konuşan herhangi bir ajan, sıfırıncı günde A2UI'ı kullanabilir. Bunu bağlamak için ajan koduna dokunmazsınız.
Ödünleşim: LLM düzeni sahipler. Çıktı, kataloğunuz içinde çalıştırmadan çalıştırmaya değişir. Yasal bildirimler, pazarlama yüzeyleri veya tam piksel yerleşiminin önemli olduğu herhangi bir şey gönderiyorsanız, bu sizin kategoriniz değil.
Bildirimsel, uzun kuyruk için oluşturulmuş desendir. Panolar, sonuçlar, formlar, kartlar, widget'lar.
Bildirimsel ne zaman kullanılmalı: Önceden oluşturmak için zamandan daha fazla kullanım durumunuz var. Prototip aşamasının ötesinde token ekonomisini önemsiyorsunuz.
Ne bozulur: Özel bir FlightCard oluşturdunuz. Her uçuş, temel kataloğun genel kartı olarak render edilir. Konsolda hata yok. Ajan üzerindeki CATALOG_ID ile ön uçtaki createCatalog içindeki catalogId eşleşmiyor. Ön uç, ajanın hedeflediği kataloğu tanımaz, temel olana geri döner. Her iki taraftaki dizeleri tam olarak eşleştirin.
Desen 3: Açık Uçlu, katalog yok, kural yok
Üçüncü desen tam tersi uç noktadır. Katalog yok. Şema yok. Sadece boş bir tuval.
Bu kovada iki alt desen bulunur.
MCP Uygulamaları
Bir MCP sunucusu, ajanın yönlendirdiği UI yüzeylerini gösterir. Excalidraw, aklımda kalan örnektir. Ajan, tuvalin tam kontrolünü ele alır. Bağlamınızdan diyagramlar çizer. Tahtadaki her piksele sahiptir.
İstemci protokolünü sıfırdan uygulamak zordur, bu nedenle CopilotKit bir MCPAppsMiddleware ile birlikte gelir. Bunu ajanınıza ekleyin ve herhangi bir MCP Apps sunucusuna yönlendirin.
1const agent = new BuiltInAgent({2 model: "openai/gpt-5.5",3 prompt: "You are a helpful assistant.",4}).use(5 new MCPAppsMiddleware({6 mcpServers: [{ type: "http", url: "https://mcp.excalidraw.com/mcp", serverId: "my-server" }],7 }),8);
MCP Apps Vitrini'ni çalıştırın ve sohbet penceresinin içinde uçuş rezervasyonu yapıyor ve otel rezervasyonu yapıyorsunuz. Aynı ara yazılım, gerçek MCP sunucuları. Veya daha da ileri gidin.
AI MCP App Builder, ajanın bir E2B sanal alanına yepyeni bir uygulama yazmasına ve ardından onu canlı olarak render etmesine olanak tanır.
0:45
Sanal alan HTML'si
Ajan ham HTML yazar. Uygulamanız, oturumu ele geçirememesi için bunu sanal alan içindeki bir iframe içinde render eder.
Çalışma zamanı, bir HTML oluşturma aracı kaydeder ve bunu AG-UI üzerinden ajana gönderir. Ajan, istediği herhangi bir işaretleme ile onu çağırır. Ajan tarafında tanımlanacak bir HTML aracı yoktur. Çalışma zamanı onu enjekte eder.
Ajan tarafı talimatı gerçek iş yapıyor:
1canvas_agent = LlmAgent(2 name="canvas_agent",3 model="gemini-3.5-flash",4 instruction=(5 "Sen bir görselleştirme asistanısın. Kullanıcı görmek, "6 "çizmek veya herhangi bir şeyi görselleştirmek istediğinde, "7 "etkileşimli bir HTML UI oluştur. Yalnızca Tailwind sınıfları kullan. "8 "Harici yazı tipleri yok. Kullanıcı bir renk belirtmediği sürece "9 "nötr renklere bağlı kal."10 ),11)
Bu stil kuralları olmadan model, o hafta eğitim verilerinde en yüksek olan estetiğe varsayılan olarak döner. Onlarla birlikte, markanıza çoğu zaman yakın bir şey elde edersiniz. Her zaman değil.
Marka tutarsızlığı sorunu
Bir ajan için birincil UI olarak Açık Uçlu'yu kullanmayı denedim. Bir hafta içinde geri çektim.
Salı günü "Neo-brutalist". Çarşamba günü "iOS 4 klonu". İstekteki stil kuralları ajanı markanıza doğru yönlendirir. Bunu garanti etmezler. Marka sürekli değişiyordu. Ürün ciddiyetsiz görünüyordu.
Açık Uçlu işe yaramaz değil. Yanlış uygulanıyor.
Tek bir şey için doğru seçim: kullanıcının arayüzün nasıl göründüğünü umursamadığı ve bir daha asla görmeyeceği tek seferlik etkileşimler. "Bana elektronların nasıl çalıştığını göster." "Bana son 10 sorgumun garip bir çubuk grafiğini ver." "Bu API yanıtını görselleştir." Google AI genel bakışlarında gördüğünüz türden şeyler.
Açık Uçlu ne zaman kullanılmalı: Tek seferlik sorgular. Tek kullanımlık görselleştirmeler. Sanal alan deneyleri. Asla birincil yüzey olarak kullanmayın.
Ne bozulur: Iframe render edilir. Düğmelere tıklanmaz. Formlar gönderilmez. Sanal alan bayrakları çok sıkı veya tarayıcının reddedeceği şekilde çok gevşektir. Iframe sanal alanını, komut dosyalarına ve formlara izin verecek şekilde ayarlayın. Başka hiçbir şeye. Asla allow-same-origin'e izin vermeyin.
Nasıl seçilir
Kod yazmadan önce karar ağacını çalıştırın.
Tasarımcının bu akış için pikselli mükemmel maketleri var mı? Kontrollü.
Gönderilecek düzinelerce kart türü veya widget'ı mı var? Bildirimsel.
Kullanıcının bir daha asla görmeyeceği tek seferlik, tek kullanımlık görselleştirme mi? Açık Uçlu.
Karar veremiyor musunuz? Varsayılan olarak Bildirimsel'i seçin. En iyi 3 akış için Kontrollü'ye yükseltin. Asla varsayılan olarak Açık Uçlu'yu kullanmayın.
Zaten gönderim yapıyorsanız ve nerede olduğunuzdan emin değilseniz, oluşturma araçlarını sayın. 15'in üzerindeyse, Kontrollü'dedesiniz ve duvar yakındır. Bu hafta A2UI'ı bağlamaya başlayın.
Üç desen. Üç bahis.
Kontrollü size bahse girer. Önceden oluşturulmuş bileşenler, pikselli mükemmel. 25'ten sonra pahalı.
Bildirimsel şemaya bahse girer. Şema sözleşmedir. Ajan onu doldurur. Yatay olarak ölçeklenir.
Açık Uçlu modele bahse girer. Katalog yok, şema yok, ham HTML. Tek kullanımlık için iyi. İki kez gönderilen herhangi bir şey için kırılgan.
Hata yanlış deseni seçmek değil. Bir desen seçtiğinizi bilmemek.
Çoğu ekip, çerçeve Kontrollü'yü varsayılan olarak aldığı için Kontrollü'ye varsayılan olarak geçer. 25 bileşende duvara toslarlar ve Açık Uçlu'ya yönelirler çünkü demolarında ilgi çekici görünür. İkisi de bir karar değildi. İkisi de sürüklenmeydi.
Bilinçli seçim yapın. Deseni sorunla eşleştirin. Kesin olması gereken akışlar için Kontrollü. Uzun kuyruk için Bildirimsel. Tek kullanımlık için Açık Uçlu.
Açık Kaynak Generative UI Ajan Şablonları
Her üçü için de referans, awesome-llm-apps'in yeni Generative UI Ajanları bölümünde yaşıyor. İhtiyacınız olanı kopyalayın. İhtiyacınız olmayanı çıkarın.
Üretimde ajan gönderme, AG-UI ve ölçeklenen desenler hakkında daha fazlasını yayınlayacağım. Güncel kalmak için beni @Saboo_Shubham_ adresinde takip edin.
