OpenUI: Modelin arayüzü JSON yerine satır satır yazdığı açık format

Kaynak kodu olmayan uygulamalar

Videodaki deneme şöyle: Bir masaüstü gibi görünen ekranda boş uygulama simgeleri var. Birine “hesap makinesi” yazıyorsun, model o anda arayüzü üretiyor ve ekrana akıtıyor. Hesap makinesi gerçekten çalışıyor. “Kahve dükkânı bulucu” yazınca harita ve liste çıkıyor. Hiçbir uygulamanın önceden yazılmış kodu yok.

Bu bir oyuncak, ama arkasındaki fikir ciddi: üretken arayüz (generative UI). Modelin cevap olarak metin yerine arayüz parçası döndürmesi. Bu fikri ve AG-UI, A2UI gibi protokolleri CopilotKit yazısında anlatmıştık. Bu yazı başka bir soruya odaklanıyor: Model o arayüzü hangi formatta yazmalı?

OpenUI ne?

OpenUI, Thesys şirketinin geliştirdiği, MIT lisanslı açık kaynak bir proje. Kendini bir arayüz kütüphanesi olarak değil, bir standart olarak tanımlıyor. Bileşenleri sen getiriyorsun: shadcn, Material ya da kendi tasarım sistemin. Hazır bir bileşen kütüphanesi de var ama kullanmak zorunlu değil. React, Vue, Svelte ve Angular için resmi paketleri var.

Akış dört adımlı:

1. Modelin kullanabileceği bileşenleri tanımlıyorsun (prop’ları Zod şemasıyla).
2. OpenUI bu listeden bir sistem talimatı (system prompt) üretiyor.
3. Model cevabını OpenUI Lang denen formatta yazıyor.
4. Tarayıcıdaki renderer bu çıktıyı geldikçe okuyup senin bileşenlerine çeviriyor.

Model sadece senin tanımladığın bileşenleri kullanabiliyor. Ayrıştırıcı (parser) geçersiz parçaları atıp gerisini çiziyor. Modellerin olmayan bir bileşen uydurması sık rastlanan bir hata olduğu için bu önemli.

Neden JSON değil?

Arayüzü tarif etmenin akla gelen ilk yolu JSON. Ama JSON iç içe bir yapı. Klasik bir ayrıştırıcı, son kapanan paranteze kadar bekler. Üstelik her bileşende "component", "props", "children" gibi anahtarlar tekrar tekrar yazılıyor. Model bunların her birine token harcıyor, sen de her token için bekliyorsun.

OpenUI Lang satır tabanlı. Her satır isim = Bileşen(...) biçiminde tek bir bileşen tanımlıyor, mesela root = Stack([chart]). Argümanlar sırayla veriliyor, anahtar adı tekrarlanmıyor. Renderer her satırı geldiği anda işliyor: Önce iskelet beliriyor, veri sonra doluyor.

json-render ve A2UI ile farkı

Rakipler de akışı çözmüş durumda, o yüzden asıl fark hız ve token sayısı:

• json-render (Vercel Labs, Apache 2.0): Bileşen kataloğuna bağlı JSON üretiyor ve bunu küçük yamalar (patch) hâlinde akıtıyor. React, Vue, Svelte, React Native, PDF, e-posta ve video için renderer’ı var.
• A2UI (Google, Apache 2.0): Ajanın arayüzü kod değil veri olarak tarif ettiği bir protokol. Bileşenler düz bir liste hâlinde, birbirine kimlikle bağlanıyor. Flutter, Angular ve Lit gibi istemcilerde çalışıyor. OpenUI’ın ayrıca A2UI mesajlarının içinde OpenUI Lang taşıyan bir paketi de var.

Thesys’in kendi ölçümüne göre OpenUI Lang, aynı ekranlar için json-render’dan yaklaşık %58, A2UI’dan %52 daha az token üretiyor. Kabaca yarı yarıya. Bunların üreticinin kendi testi olduğunu unutma.

Nerede işe yarıyor, nerede takılıyor?

En mantıklı kullanım, sohbetin içinde küçük arayüzler: bir grafik, bir form, her soru için aynı seçenek kartı yerine soruya uygun bir giriş alanı. Tam uygulama üretmek ise henüz uzak. Videodaki geliştirici önce çok hızlı bir çıkarım servisinde açık bir model denemiş. Model bozuk uygulamalar üretmiş, servis de sürekli istek sınırına takılmış. Sonunda daha yavaş ama tutarlı bir modele geçmiş. Videoya göre deneme üretime hazır değil. Geliştiricinin önerisi de akıllıca: Güvenli bir arka uç sabit kalsın, sadece ön yüz anlık üretilsin ve kullanıcıya özel bir sandbox’ta çalışsın.

Düşün

• Uygulamandaki hangi ekran, her kullanıcı için aynı kalmak yerine soruya göre şekil alsa daha iyi olurdu?
• Modelin çizebileceği bileşenleri sınırlamak güvenlik sağlıyor ama esnekliği azaltıyor. Çizgiyi nereye çekerdin?

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