Generative UI (Üretken Arayüz) Nedir?

Büyük dil modellerinin (LLM) kullanıcılarla etkileşim kurma biçimi kökten değişiyor. Kullanıcı arabirimleri artık tasarımcılerin önceden çizdiği statik ekranlardan ibaret değil. Generative UI, yapay zekanın kullanıcının niyetine (intent) göre çalışma zamanında (runtime) dinamik, interaktif ve işlevsel arayüz bileşenleri üretmesidir.

Geleneksel sohbet arayüzlerinde yapay zeka kullanıcıya sadece metin veya Markdown formatında yanıtlar döner. Üretken arayüz mimarisinde ise sistem, kullanıcının girdisine göre anlık olarak bir buton, bir grafik, bir veri formu veya canlı bir finansal tablo render eder. Bu dönüşümün teorik temellerini ve ilk adımlarını daha önce incelediğimiz Sohbet Kutularının Sonu: Vercel AI SDK ve Generative UI rehberinde ele almıştık. Şimdi bu mimariyi production ortamında ölçeklenebilir kılacak tasarım kalıplarına odaklanacağız.

Statik Arayüzlerden Dinamik Bileşenlere Geçiş

Geleneksel yazılım geliştirme süreçlerinde kullanıcı senaryoları önceden tahmin edilir. Her butonun nereye gideceği, hangi formun hangi veriyi toplayacağı deterministik olarak kodlanır. Ancak otonom ajanların (AI Agents) yönettiği sistemlerde kullanıcı adımları öngörülemezdir.

• Metin Arayüzlerinin Yetersizliği: Kullanıcıya karmaşık bir veri analizi sonucunu metinle anlatmak bilişsel yükü artırır.
• Server-Driven UI (SDUI) Farkı: Geleneksel SDUI sistemlerinde sunucu hangi bileşenin çizileceğine karar verir ancak kurallar katıdır. Generative UI modelinde ise bileşenin içeriği ve işlevi tamamen LLM’in anlık kararına bağlıdır.
• Hibrit Model İhtiyacı: Başarılı bir uygulama için tüm arayüzü yapay zekanın üretmesine izin verilmez. Sabit bir tasarım sistemi (Design System) şablon olarak sunulur ve LLM bu şablonların içini doldurur.

Mimarinin Üç Temel Sütunu

Güvenilir bir üretken arayüz mimarisi kurmak için üç ana bileşenin senkronize çalışması gerekir. Bu bileşenler sistemin kararlılığını sağlar.

• Bileşen Kataloğu (Component Registry): İstemci tarafında (Client-side) önceden tanımlanmış, stillendirilmiş ve güvenli React bileşenlerinin havuzudur. LLM sıfırdan kod yazmaz; bu havuzdaki hazır bileşenleri çağırır.
• Şema Doğrulama (Zod Validation): Yapay zekanın ürettiği yapılandırılmış verilerin (JSON) uygulamanın veri modeliyle eşleşmesini denetleyen güvenlik katmanıdır.
• UI Akışı (UI Streaming): Kullanıcının yanıtı beklerken ekranın donmasını engelleyen, bileşenleri parça parça ekrana yansıtan veri aktarım modelidir.

Next.js Sunucu ve İstemci Sınırları (Server/Client Boundaries)

Generative UI akışını Next.js App Router mimarisinde kurgularken, sunucu (Server Components) ve istemci (Client Components) arasındaki sınırların net çizilmesi gerekir. LLM çağrıları ve API anahtarları sunucu tarafında gizlenirken, interaktif bileşenler istemci tarafında hidrasyon (hydration) sürecine dahil olur.

• Sunucu Tarafı (React Server Components – RSC): Vercel AI SDK’in streamUI fonksiyonu burada çalışır. Büyük dil modeline gönderilen prompt ve araç tanımlamaları (tools) bu katmandadır. Sunucu, LLM’den gelen fonksiyon çağrısına göre doğru React bileşenini seçer ve istemciye stream eder.
• İstemci Tarafı (Client Components): Sohbet arayüzünü tutan ana ekran "use client" direktifiyle işaretlenir. useChat veya useActions hook’ları sunucudan gelen UI akışını yakalar. Gelen bileşen interaktif bir buton veya form ise, istemci tarafındaki state yapısıyla anında etkileşime girer.
• Suspense ve Yükleme Durumları: LLM veriyi üretirken veya sunucu bileşeni hazırlarken arayüzün kırılmaması için React <Suspense> mimarisi kullanılır. Model çıktı üretirken ekranda bir iskelet (skeleton) arayüz belirmesi bu katman sayesinde sağlanır.

Vercel AI SDK ile streamUI Kod Örneği

Aşağıdaki kod bloğu, sunucu tarafında çalışan ve modelin ürettiği fonksiyon çağrısını doğrudan bir istemci bileşenine dönüştüren temel işleyiş mimarisini göstermektedir:

import { streamUI } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';
import { WeatherCard } from '@/components/weather';

async function handleUserRequest(prompt) {
  const result = await streamUI({
    model: openai('gpt-4o'),
    prompt: prompt,
    tools: {
      showWeather: {
        description: 'Kullanıcıya hava durumu kartını gösterir.',
        parameters: z.object({
          city: z.string(),
          temperature: z.number(),
          condition: z.enum(['sunny', 'rainy', 'cloudy'])
        }),
        generate: async function* ({ city, temperature, condition }) {
          return <WeatherCard city={city} temp={temperature} status={condition} />;
        }
      }
    }
  });
  return result.value;
}

Kritik Arayüz Kalıpları: Propose ve Verify

Üretken arayüzlerde en büyük risk, yapay zekanın kullanıcı adına yanlış işlemler yapmasıdır. Örneğin finansal bir transfer veya veri silme işlemi doğrudan otonom olarak gerçekleştirilmemelidir. Bu problemi çözmek için Propose/Verify tasarım kalıbı uygulanır.

1. Öneri Aşaması (Propose): Yapay zeka kullanıcının niyetini anlar ve ekrana bir “İşlem Onay Kartı” render eder. Bu kartın içinde transfer miktarı, alıcı adı ve bir “Onayla” butonu yer alır.
2. Doğrulama Aşaması (Verify): İşlem ancak kullanıcı o dinamik butona fiziksel olarak tıkladığında tetiklenir. Böylece kritik aksiyonlarda kontrol tamamen insanda kalır.

Durum Yönetimi (State Management) ve Hata Sınırları

Dinamik olarak üretilen bileşenlerin uygulamanın genel durumuyla konuşabilmesi gerekir. Eğer üretilen bir form alanına veri giriliyorsa, bu veri uygulamanın ana context yapısına güvenli bir şekilde aktarılmalıdır.

• Hata Sınırları (Error Boundaries): LLM hatalı veya eksik bir JSON parametresi ürettiğinde uygulamanın tamamen çökmesini engellemek için her dinamik bileşen bir ErrorBoundary ile sarılmalıdır. Bileşen yüklenemezse sistem otomatik olarak güvenli bir metin tabanlı yanıta geri dönmelidir.
• Geri Alınabilirlik (Idempotency): Kullanıcı sohbet geçmişinde yukarı kaydırma yaptığında eski dinamik bileşenler yeniden render edilmeli, o anki durumları dondurulmalıdır.

SaaS Girişimlerinde Generative UI Dönüşümü

Koltuk başına abonelik modellerinin yerini ajan ekonomisine bıraktığı yazılım dünyasında, Generative UI mimarisi SaaS projelerine büyük bir rekabet avantajı sağlar. Kullanıcılar artık karmaşık paneller arasında kaybolmak yerine, sadece ihtiyaç duydukları anda karşılarına çıkan minimalist arayüzlerle etkileşime geçerler. Bu durum kullanıcı elde tutma (retention) oranlarını artırırken, karmaşık arayüz geliştirme süreçlerinin getirdiği teknik borçları da azaltır.