Generative UI pazarı 2026 yılında 1,8 milyar USD seviyesine ulaşmış ve Vercel AI SDK, CopilotKit ve Thesys gibi framework’lerin GitHub yıldız büyümesi 2025’te %385’i aşmıştır. Generative UI (üretken arayüz), LLM’in metin yanıt yerine doğrudan React/Vue komponentleri üreterek dinamik, etkileşimli arayüzler oluşturduğu yeni bir paradigmadır. Ancak Nielsen Norman Group 2025 araştırması “tam üretken” UI’larda kullanıcı testlerinin %40 confusion oranı verdiğini, “guided generative” yaklaşımlarınsa %85+ adoption sağladığını göstermektedir — boundary’i doğru çizmek bu teknolojinin başarısının anahtarıdır.
Bu rehberde generative UI ekosisteminin tüm boyutlarını detaylı inceliyoruz:
- Generative UI nedir ve geleneksel UI’dan farkları
- Vercel AI SDK, CopilotKit, Thesys karşılaştırma matrisi
- “Tam üretken” vs “guided üretken” yaklaşımları ve trade-off’lar
- React entegrasyon best practice ve streaming UI
- Tool calling, structured output ve component library boundary
- Performance, token maliyeti ve latency optimizasyonu
- Production’a alma checklist’i ve gözlemlenebilirlik
Generative UI Nedir ve Geleneksel UI’dan Nasıl Farklıdır?
Generative UI, büyük dil modellerinin (LLM) kullanıcı girdisine yanıt olarak metin değil, doğrudan UI komponentleri ürettiği bir yaklaşımdır. Geleneksel chat arayüzlerinde LLM “Pazartesi günü hava 22°C olacak” diye yazılı cevap verirken, generative UI’da aynı sorgu interaktif bir hava durumu kartı, grafik veya 5 günlük tahmin tablosu olarak render edilir. Vercel 2025 State of AI raporuna göre generative UI kullanan uygulamalarda kullanıcı engagement oranı ortalama %58 artmaktadır.
Generative UI ile geleneksel UI’ın temel farkları:
- Statik vs dinamik: Geleneksel UI tasarım anında, generative UI runtime’da oluşur
- Component selection: LLM hangi komponentin uygun olduğuna karar verir
- Veri-driven: API yanıtına göre UI yapısı şekillenir
- Kişiselleştirme: Kullanıcı bağlamına göre farklı arayüz
- Streaming: Komponentler parça parça yüklenir (React Server Components)
Generative UI’nın 2 Yaklaşımı: Tam Üretken vs Guided
2026 itibarıyla generative UI’da iki temel ekol oluşmuştur. Nielsen Norman Group 2025 AI UX raporu bu iki yaklaşımın kullanıcı testindeki performansını detaylı belgelemiştir.
| Kriter | Tam Üretken (Full Generative) | Guided Üretken |
|---|---|---|
| Yaklaşım | LLM HTML/JSX direkt üretir | LLM component library’den seçim yapar |
| Esneklik | Sınırsız | Tanımlı component setiyle sınırlı |
| Kullanıcı confusion oranı | %40 | %8 |
| Adoption oranı | %55 | %85+ |
| Token maliyeti | Yüksek (2.500-8.000 token/yanıt) | Orta (450-1.200 token) |
| Latency | 3-8 saniye | 0,8-2,5 saniye |
| Brand consistency | Düşük | Yüksek (design system’e bağlı) |
| Güvenlik | XSS riski yüksek | Düşük (whitelisted) |
Boundary’i doğru çizmek anahtardır: LLM “ne göstereceğine” değil, “hangi komponenti seçip hangi propslarla render edeceğine” karar vermelidir.
Vercel AI SDK: React/Next.js için Üretken UI Standardı
Vercel AI SDK, generative UI alanında 2026’nın de-facto standardı haline gelmiştir. Vercel AI SDK 5.x sürümü React Server Components (RSC) ile entegre çalışır, streaming UI desteği sunar ve OpenAI, Anthropic, Google, Mistral, Groq gibi 15+ provider’a tek API’den erişim sağlar.
Vercel AI SDK’nın teknik göstergeleri:
- GitHub yıldız sayısı: 18.500+ (Ocak 2026)
- Haftalık npm download: 2,4 milyon
- Desteklenen provider sayısı: 15+ (OpenAI, Anthropic, Google, Mistral, vb.)
- Streaming chunk latency: 80-180ms (TTFT)
- useChat hook ile entegrasyon süresi: 30 dakika MVP
- RSC ile bundle size azaltımı: %45 (client-side render’a kıyasla)
CopilotKit: Embed Edilebilir AI Copilot Framework’ü
CopilotKit, uygulamaların kendi içine “copilot” deneyimi entegre etmek için geliştirilmiş framework’tür. CopilotKit 2025 dokümantasyonuna göre framework, kullanıcı UI durumuna erişebilen, formları otomatik dolduran, multi-step task’leri yürüten copilot’lar geliştirmek için yapı taşları sunar. SAP Build Code ve Microsoft Copilot Studio gibi enterprise platformlarda CopilotKit-benzeri patternler kullanılmaktadır.
CopilotKit’in mimari unsurları:
- CopilotProvider: Uygulama düzeyinde state ve context yönetimi
- useCopilotAction: AI’ın çağırabileceği fonksiyonların tanımı
- useCopilotReadable: Mevcut UI state’in AI’a “okutulması”
- CopilotTextarea: AI-augmented metin editörü
- CopilotSidebar: Tüm uygulamadan erişilebilir asistan
- Generative UI render: Action’ların sonucu özel komponent olarak
Thesys: Headless Generative UI Engine
Thesys, generative UI alanında 2025 sonlarında öne çıkan ve “headless” yaklaşım sunan yeni bir platformdur. Thesys dokümantasyonu, framework-agnostic (React, Vue, Svelte) çalışan ve component library’ye bağlı kalmadan generative UI render edebilen mimari sunar. ThoughtWorks Technology Radar Vol. 31 “headless generative UI” pattern’ini “assess” kategorisinde değerlendirmiştir.
Thesys ve benzeri platformların farkı:
- Framework-agnostic: React/Vue/Svelte’de aynı API
- Design system bağımsızlığı: Mevcut component library üzerine giydirilir
- JSON-based UI spec: LLM JSON üretir, render katmanı dönüştürür
- Token tasarrufu: JSX yerine JSON ile %35-45 token azalır
- Multi-LLM routing: Görev karmaşıklığına göre model seçimi
3 Framework Karşılaştırma Matrisi 2026
Vercel AI SDK, CopilotKit ve Thesys farklı kullanım senaryolarında baskın çıkar. Aşağıdaki karşılaştırma matrisi danışmanlık projelerinde framework seçim kararlarını desteklemek için kullanılmaktadır.
| Kriter | Vercel AI SDK | CopilotKit | Thesys |
|---|---|---|---|
| Birincil use case | Chat UI + generative UI | Embed edilmiş copilot | Headless UI rendering |
| Framework | React/Next.js odaklı | React odaklı | Multi-framework |
| Streaming | RSC + useChat | State sync ile | JSON streaming |
| Learning curve | Düşük (1-2 gün) | Orta (3-5 gün) | Orta-yüksek (5-8 gün) |
| Provider sayısı | 15+ | 10+ | 8+ |
| Token maliyeti | Orta | Yüksek (state context) | Düşük (-%35-45) |
| Enterprise uyum | Yüksek | Çok yüksek | Yüksek |
| Tipik aylık LLM bütçesi | 500-3.500 USD | 1.200-8.000 USD | 350-2.200 USD |
LLM tabanlı uygulama geliştirme yazımız generative UI’ın daha geniş bağlamını sunar.
Tool Calling ve Structured Output: Boundary’nin Teknik Karşılığı
Generative UI’ın güvenli çalışması için LLM çıktısının tahmin edilebilir olması gerekir. Tool calling ve structured output (JSON schema) bu tahmin edilebilirliği sağlayan iki ana mekanizmadır. OpenAI Function Calling, Anthropic Tool Use ve Google Gemini Function Calling API’leri benzer mimari sunar.
Boundary’i çizmenin teknik adımları:
- Component whitelist: LLM’in çağırabileceği komponentler tanımlanır
- Zod/JSON Schema: Her komponentin prop tipleri katı şemada
- Validation katmanı: LLM çıktısı schema’ya karşı doğrulanır
- Fallback UI: Geçersiz çıktıda generik metin yanıtı
- XSS sanitization: İçerik DOMPurify ile temizlenir
- Rate limiting: Kullanıcı başına dakikalık 10-30 istek
Performance ve Maliyet Optimizasyonu
Generative UI’da en sık atlanan boyut maliyet ve latency yönetimidir. Gartner 2025 Enterprise AI Cost raporuna göre generative UI uygulamalarının %38’i ilk 3 ayda LLM token bütçesini %200+ aşmaktadır. Optimizasyon stratejileri:
- Model routing: Basit görev için Haiku/Mini, karmaşık için Sonnet/Opus
- Prompt caching: System prompt + component schema cache (Anthropic %90 indirim)
- Streaming TTFT: İlk token 250ms altında hedef
- Embedding cache: Sık sorulan sorgular için vektör cache
- Component memoization: Aynı prop’lar için re-render önlenir
- Edge runtime: Vercel Edge, Cloudflare Workers ile coğrafi yakınlık
Generative UI Üretiminde Tipik Sorunlar ve Çözüm Yaklaşımları
Generative UI olgunlaşan ama hâlâ deneysel olan bir alandır. Production’a alma sürecinde tasarım, güvenlik ve maliyet üzerinde sürpriz hatalar yaşanabilir. Aşağıdaki sorunlar, kurumsal generative UI projelerinde tekrar eden örüntülerdir:
- Tam üretken yaklaşım takıntısı: LLM’e tüm HTML’i ürettirme isteği, %40 kullanıcı confusion oranı
- Design system kopukluğu: Brand renkleri, spacing, typography’nin LLM tarafından bozulması
- XSS açıkları: LLM çıktısının doğrudan dangerouslySetInnerHTML ile render edilmesi
- Token maliyet patlaması: System prompt cache yapılmadan her isteğin tam fiyatlanması
- Latency şikayetleri: 3+ saniyelik bekleme süreleri, kullanıcı vazgeçişi
- Hallucination handling: LLM’in olmayan komponent çağırması, fallback’siz hata
React ve Next.js geliştirme rehberimizde generative UI’ın altyapısı olan modern frontend pratiklerini detaylandırdık. UX tasarım yazımız generative UI’da kullanıcı zihinsel modeline değinir.
Sık Sorulan Sorular
Generative UI ile geleneksel chat UI arasındaki fark nedir?
Geleneksel chat UI’da LLM yalnızca metin yanıt üretir; kullanıcı “Pazartesi hava nasıl?” sorduğunda “22°C, parçalı bulutlu” gibi bir cümle alır. Generative UI’da ise LLM aynı sorguya interaktif bir hava durumu kartı, 5 günlük tahmin grafiği veya saatlik tablo render edecek komponent çağrısı yapar. Vercel 2025 raporuna göre generative UI kullanan uygulamalarda kullanıcı engagement %58 artar. Modern uygulamalar generative UI’ı chat’in evrimi olarak değerlendirir.
Vercel AI SDK, CopilotKit ve Thesys arasında hangisini seçmeliyim?
Seçim use case’e bağlıdır: Standalone chat veya AI-native uygulama için Vercel AI SDK (React/Next.js stack, 1-2 günlük learning curve, 15+ provider). Mevcut bir SaaS uygulamaya copilot eklemek için CopilotKit (state sync, action calling, embed deneyimi). Multi-framework projeler veya token maliyeti kritik olan senaryolar için Thesys (JSON-based, %35-45 token tasarrufu). Aylık LLM bütçesi açısından Thesys (350-2.200 USD), Vercel (500-3.500 USD), CopilotKit (1.200-8.000 USD) sıralanır.
Generative UI güvenlik riskleri nelerdir?
En önemli risk LLM çıktısının doğrudan dangerouslySetInnerHTML ile render edilmesi sonucu oluşan XSS açıklarıdır. Tam üretken yaklaşımda LLM kötü amaçlı script üretebilir. Çözüm; component whitelist (LLM yalnızca tanımlı komponentleri çağırabilir), Zod/JSON Schema validation, DOMPurify ile içerik sanitization ve katı CSP (Content Security Policy) başlıklarıdır. Ayrıca rate limiting (kullanıcı başına dakikalık 10-30 istek), prompt injection koruması ve veri sızıntısı için context isolation gerekir. Guided generative yaklaşım, tam üretken yaklaşıma kıyasla XSS riskini %95 azaltır.
Generative UI’da token maliyeti nasıl kontrol edilir?
Generative UI uygulamalarının %38’i ilk 3 ayda LLM bütçesini %200+ aşar. Maliyet optimizasyon stratejileri: model routing (basit görev için GPT-4o-mini/Claude Haiku, karmaşık için Sonnet/Opus), prompt caching (Anthropic’te %90 indirim), embedding cache (sık sorgular için), component schema’sının system prompt’a optimize edilmesi ve guided generative yaklaşımla (JSON output) tam üretkene göre %60+ token tasarrufu. Tipik bir orta ölçek SaaS’ta aylık 1.500-5.000 USD LLM bütçesi normal kabul edilir.
Generative UI ne zaman tercih edilmemeli?
Generative UI; (1) yüksek frekanslı, deterministik UI ihtiyacı olan görevlerde (e-ticaret checkout, finansal işlemler), (2) latency-kritik real-time arayüzlerde (trading, gaming), (3) sıkı brand consistency gerektiren marketing landing’lerde, (4) erişilebilirlik (WCAG AAA) garantisi gereken kamu uygulamalarında tercih edilmemelidir. Bu senaryolarda geleneksel UI öngörülebilirlik ve performans açısından üstündür. Generative UI; keşif (exploration), kişiselleştirme, içerik üretimi ve karmaşık veri keşfi senaryolarında %85+ adoption sağlar.
Sonuç
Generative UI 2026 itibarıyla deneysel paradigmadan üretim teknolojisine dönüşmüş, Vercel AI SDK, CopilotKit ve Thesys gibi olgun framework’lerle desteklenen bir alandır. 1,8 milyar USD’lik pazarın hızlı büyümesi ve %385 GitHub yıldız artışı potansiyeli gösterir; ancak Nielsen Norman Group’un belgelediği %40 confusion oranı, “tam üretken” yerine “guided üretken” yaklaşımın stratejik üstünlüğünü ortaya koyar. Başarılı generative UI; component whitelist + Zod schema + structured output ile boundary’i net çizen, model routing + prompt caching ile token maliyetini %50+ azaltan, RSC + streaming ile sub-saniye latency hedefleyen ve XSS sanitization + CSP ile güvenliği katmanlayan bir mimari yaklaşım gerektirir.
Ömer ÖNAL
Mayıs 17, 2026Generative UI’da 2026’nın gözlemlediğim trendi, ‘tam üretken’ yerine ‘guided üretken’ — tamamen LLM’in karar verdiği UI’lar hâlâ kullanıcı testlerinde %40 confusion oranı veriyor; ama component library içinden seçim yapan, sadece kompozisyon kararı veren LLM uygulamaları %85+ adoption alıyor. Boundary’i doğru çizmek anahtar.