Sohbet Kutularının Sonu: Vercel AI SDK ve Generative UI (Üretken Arayüz) ile Dinamik SaaS Geliştirme Patternleri

Yapay zeka entegrasyonlarında büyük bir kırılma anının tam ortasındayız. Bugüne kadar geliştirdiğimiz tüm yapay zeka araçlarında senaryo hep aynıydı: Kullanıcı bir prompt yazar, sistem API üzerinden dil modeline gider ve ekrana düz bir metin ya da Markdown çıktısı basılır. Ancak dürüst olalım; modern bir web uygulamasında kullanıcının karşısına dakikalarca akan düz yazılar çıkarmak artık demode kalıyor. Kullanıcılar chatbot pencerelerinde kaybolmak değil, doğrudan işlerini çözecek interaktif araçlar görmek istiyor. İşte Generative UI (Üretken Arayüz) mimarisi tam bu noktada devreye yerleşiyor. Bu rehberde, yapay zekanın düz metin yazmayı bırakıp çalışma zamanında canlı canlı dinamik arayüz bileşenleri oluşturmasını sağlayan yeni nesil sistemleri ve mantığını inceliyoruz.

Geleneksel web tasarımı, yıllardır statik bileşenlerin önceden belirlenmiş veri tabanı modelleriyle beslenmesi üzerine kuruluydu. Bir kullanıcının göreceği dashboard, aylar öncesinden yapılan UI/UX toplantılarında tasarlanır, front-end ekipleri tarafından kodlanır ve veri tabanından gelen API çıktılarına göre render edilirdi. Yapay zeka hayatımıza girdiğinde de bu statik yapıyı ilk etapta kıramadık. Dil modellerini sadece daha akıllı içerik üreten metin motorları olarak konumlandırdık. Ancak yapay zekanın asıl gücü, sadece kelimeleri tahmin etmek değil, kullanıcının o anki niyetini anlayarak dinamik yapılar inşa edebilmesidir. İşte bu yüzden sohbet kutularının dar sınırlarından çıkıp, arayüzün kendisini yapay zekanın komutlarıyla anlık olarak şekillendirdiğimiz bir döneme geçiş yapıyoruz.

Generative UI Nedir ve Nasıl Çalışır?

Generative UI, büyük dil modellerinin ürettiği verileri sadece kelime veya paragraf olarak değil, ön yüzde doğrudan tarayıcının yorumlayabileceği yapısal şemalar olarak sunmasıdır. Klasik yapılarda modelden gelen cevabı string yani düz metin olarak alıp ekrana basarken, üretken arayüz mimarisinde modelin Function Calling yani araç çağırma yeteneğini kullanırız. Bu yetenek, yapay zekanın ne zaman bir metin yazacağını, ne zaman ise yapılandırılmış bir veri paketi üreteceğini kendisinin seçmesine olanak tanır.

Süreç temel olarak şu adımlarla işler: Kullanıcı doğal dille bir talepte bulunur. Örneğin: “Bana bu ayki sunucu harcamalarımı grafik olarak göster.” Dil modeli bu isteği analiz eder ve düz metin üretmek yerine, arka planda önceden tanımladığımız bir fonksiyon şemasını tetikler. Model, parametreleri doldurulmuş temiz bir JSON objesi üretir. Ön yüz katmanı bu JSON objesini yakalar ve kullanıcının karşısına anlık olarak bir tablo ya da canlı bir grafik çizer. Buradaki kritik nokta, yapay zekanın kodu çalışma zamanında baştan yazmamasıdır; sistem bizim önceden hazırladığımız güvenli ve fonksiyonel React bileşenlerini dil modelinin ürettiği ham verilerle o an canlı olarak besler.

Bu çalışma modeli, yapay zeka ajanlarının otonom yeteneklerini görsel bir boyuta taşır. Kullanıcı sisteme bir hedef verdiğinde, ajan arka planda onlarca alt görevi yerine getirirken ekranda sadece “Görev tamamlanıyor” yazısı dönmez. Ajan, tamamladığı her aşamayı, çektiği her veriyi kullanıcıya özel dinamik ilerleme çubukları, check-list panelleri veya veri tabloları halinde parça parça arayüze aktarır. Kullanıcı böylece yapay zekanın düşünce sürecini statik bir log yazısı yerine yaşayan, tıklanabilir ve manipüle edilebilir bir arayüz üzerinden izleme şansına sahip olur.

Mimari Altyapı: Bileşenler ve LLM Entegrasyonu

Bu sistemi sıfırdan kurmak eskiden devasa bir durum yönetimi ve web socket trafiği gerektiriyordu. Günümüzde ise React Server Components ve akış teknolojileri sayesinde istemci ile sunucu arasındaki köprü çok daha optimize kurulabiliyor. Sunucu tarafında çalışan dil modeli veriyi parça parça gönderirken, ön yüzdeki bileşen de eş zamanlı olarak yüklenme durumunu dinamik olarak güncelleyebiliyor. Kullanıcı henüz modelin yanıtı tamamlanmadan arayüzün iskelet yapısını görmeye başlıyor ve veri geldikçe grafikler veya tablolar gözünün önünde şekilleniyor.

Bu alanda dünyada iki büyük kütüphane ekosistemi domine ediyor: Vercel AI SDK ve CopilotKit. Her iki kütüphane de temelde dil modellerinin çıktılarını arayüz elementleriyle evlendirmeyi kolaylaştırıyor. Vercel AI SDK daha çok performanslı, minimalist ve Next.js Server Components uyumlu altyapılara odaklanırken; CopilotKit ise uygulamanın içine derinlemesine gömülü, kullanıcının mevcut ekranındaki tüm verileri okuyabilen ve uygulama içi butonları tetikleyebilen gelişmiş co-pilot ajanları oluşturmanıza olanak tanıyor. Hangi kütüphane seçilirse seçilsin, temel felsefe front-end geliştiriciyi karmaşık veri transferi kodları yazmaktan kurtarıp doğrudan arayüzün esnekliğine odaklamaktır.

Geliştiriciler için bu mimarinin en büyük avantajı, katı bileşen bağımlılıklarından kurtulmaktır. Geleneksel yapılarda bir sayfada hangi bileşenin nerede duracağı conditional rendering yani mantıksal koşullarla belirlenir. Eğer veri varsa X bileşenini göster, hata varsa Y bileşenini göster gibi onlarca satır kod yazılır. Generative UI modelinde ise koşulları front-end kodu değil, dil modelinin kendisi belirler. Sunucudan dönen veri paketi hangi UI bileşeninin çağrılacağını kendi içinde taşıdığı için front-end mimarisi tamamen modüler ve genişletilebilir bir hal alır. Yeni bir özellik eklemek istediğinizde sadece o bileşeni sunucu tarafındaki yapay zeka fonksiyon listesine kaydetmeniz yeterli olur.

Uygulamalı Mantık: Yapay Zekaya Canlı Grafik Çizdirmek

Teoriyi bir kenara bırakıp, bir Mikro-SaaS projesinde bu yapıyı arka planda nasıl kuracağımıza bakalım. Senaryomuzda kullanıcının finansal veya teknik bir maliyet verisi talep ettiğini ve yapay zekanın ona düz yazı yazmak yerine canlı bir grafik çizdiğini varsayıyoruz. Bu kurguda sistemin hatasız çalışması için arka planda güçlü bir veri doğrulama şeması inşa etmek gerekir.

Sunucu katmanında, model tetiklendiğinde arayüze doğrudan React bileşenini besleyecek bir fonksiyon tanımlarız. Model OpenAI veya Anthropic servislerinden birini kullanarak gelen promptu işler. Eğer gelen prompt bir maliyet analizi içeriyorsa, sistem standart metin üretmeyi anında durdurur. Zod benzeri veri şeması doğrulayıcıları kullanarak harcama verilerini etiket ve sayısal değer olarak içeren katı bir veri dizisine dönüştürür. Yapay zeka modeli bu şemanın dışına çıkamaz, uydurma veri üretemez veya şemada olmayan hatalı bir parametre gönderemez. Bu sayede front-end tarafında bileşenin kırılma riski sıfıra indirilir.

// ADIM 1: Zod ile Katı Veri Şemasının Tanımlanması (Sunucu)
import { z } from 'zod';

export const GrafikSemasi = z.object({
  baslik: z.string(),
  veriler: z.array(
    z.object({
      ay: z.string(),
      maliyet: z.number()
    })
  )
});

// ADIM 2: Vercel AI SDK Fonksiyon Çağrısı (Tool) Tanımı
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';
import { GrafikSemasi } from './schema';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4o-mini'),
    messages,
    tools: {
      maliyetGrafigiCiz: {
        description: 'Kullanıcının maliyetlerini grafik olarak listeler.',
        parameters: GrafikSemasi,
        execute: async (veriler) => veriler,
      },
    },
  });

  return result.toDataStreamResponse();
}

// ADIM 3: Ön Yüzde Canlı React Bileşeni Oluşturma (İstemci)
'use client';

import { useChat } from 'ai/react';
import { SunucuMaliyetGrafigi } from './components/Grafik';

export default function GenerativeUI() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/chat',
  });

  return (
    <div className="chat-container">
      {messages.map((m) => (
        <div key={m.id} className="message-box">
          <p><strong>{m.role === 'user' ? 'Kullanıcı:' : 'AI:'}</strong> {m.content}</p>

          {m.parts?.map((part, index) => {
            if (part.type === 'tool-invocation') {
              const { toolName, state } = part.toolInvocation;

              if (toolName === 'maliyetGrafigiCiz') {
                if (state === 'call') {
                  return <p key={index} className="loading">⏳ Grafik hazırlanıyor...</p> 
                }

                if (state === 'result') {
                  const { result } = part.toolInvocation;
                  return (
                    <div key={index} className="generative-ui-card">
                      <h3>{result.baslik}</h3>
                      <SunucuMaliyetGrafigi data={result.veriler} />
                    </div>
                  );
                }
              }
            }
            return null;
          })}
        </div>
      ))}
      
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} placeholder="Maliyetlerimi grafik yap..." />
        <button type="submit">Gönder</button>
</div> ); }

Ön yüz tarafında ise bu dizi verisini alan standart bir grafik kütüphanesi, gelen veriyi milisaniyeler içinde sütun grafiğine dökerek kullanıcının önüne getirir. Kullanıcı chatbot ekranında donuk bir yazı yerine, üzerine geldiğinde değerleri değişen, filtreleme yapılabilen interaktif bir panelle karşılaşır. Eğer kullanıcı grafikteki bir veriyi beğenmeyip “Bu ayki sunucu harcamalarını çıkarıp grafiği tekrar düzenle” derse, yapay zeka bir önceki state verisini hafızasında tutarak sadece ilgili datayı diziden eler ve grafiği saniyeler içinde ön yüzde yeniden çizer. Bu döngü, kullanıcının veriyle olan etkileşimini bambaşka bir boyuta taşır.

Teknik ve Finansal Avantajları: API Faturalarını Nasıl Etkiler?

Generative UI modellerine geçmek ilk bakışta daha fazla token tüketimi gibi görünebilir çünkü modele çıktı şemalarını net şekilde dikte etmek ve ondan JSON formatında veri almak zorundayız. Şemaların sisteme bindirdiği bu ek token yükü, ilk istek anında maliyeti ufak bir miktar artırıyor gibi durabilir. Ancak madalyonun diğer yüzüne baktığımızda, uzun vadede bu mimari hem kullanıcı deneyimini iyileştirir hem de gereksiz prompt tekrarlarının önüne geçerek toplam altyapı maliyetini ciddi oranda düşürür.

Klasik chatbot arayüzlerinde kullanıcı aradığı net sonuca ulaşmak için modelle uzun uzadıya konuşmak zorundadır. Model her seferinde bir önceki konuşma geçmişini de bağlam penceresine (context window) dahil ederek yeni yanıtlar üretir. Bu durum, konuşma uzadıkça her mesajda katlanarak artan devasa bir token faturasına yol açar. Generative UI modelinde ise kullanıcı aradığı veriyi tek bir interaktif ekranda, tüm detaylarıyla görebildiği için ek sorular sormaya ihtiyaç duymaz. Bilgiye ulaşmak adına chatbot ile dakikalarca süren ve her seferinde tüm geçmişi modele gönderen o pahalı döngülerden tek hamlede kurtulmuş oluruz. Finansal olarak bakıldığında, tek seferlik kaliteli ve yapılandırılmış bir çıktı üretmek, verimsiz ve uzun sohbet geçmişlerini finanse etmekten çok daha ekonomiktir.

Ayrıca semantik optimizasyonlar ve akıllı sunucu mimarileri sayesinde, üretken arayüzlerin ürettiği JSON şemaları front-end tarafında kolayca cache mekanizmalarına dahil edilebilir. Eğer bir kullanıcı aynı gün içinde benzer bir analiz raporunu tekrar isterse, sistem dil modelini sıfırdan tetiklemek yerine ön bellekteki yapısal UI şemasını çağırarak API faturasını sıfıra indirir. Düz metin çıktılarda bu tarz bir semantik önbellekleme yapmak oldukça zorken, yapılandırılmış şemalarda maliyet optimizasyonu yapmak çocuk oyuncağı haline gelir.

Geleceğin SaaS Arayüzleri Nasıl Olacak?

Sohbet kutuları yapay zeka devriminin ilk adımıydı ancak kesinlikle son adımı değil. Geleceğin mikro girişimleri ve SaaS projeleri, statik menülerden arındırılmış, tamamen kullanıcının o anki davranışına göre şekillenen dinamik panellerden oluşacak. Uygulama arayüzleri, yapay zeka ajanlarının anlık kararlarına göre genişleyip daralabilen akışkan birer tuvale dönüşüyor. Bu yeni tasarım paradigması, geleneksel kullanıcı deneyimi kurallarını da baştan yazıyor. Artık tek tip bir arayüz tasarlayıp binlerce kullanıcının buna adapte olmasını beklemek yerine, her kullanıcının kendi yetkinliğine ve ihtiyacına göre anlık olarak üretilen kişiselleştirilmiş arayüz çağı yaşanıyor.

Yazılım dünyasındaki bu treni kaçırmamak adına şimdiden projelerde modern entegrasyon kütüphaneleriyle küçük denemelere başlamak büyük önem taşıyor. İlk etapta projenizin sadece küçük bir kısmını, örneğin raporlama veya filtreleme alanlarını Generative UI modeline geçirmek, sistemin kararlılığını test etmek açısından en güvenli yoldur. Bu dönüşüm, sizi sadece geleceğin yazılım mimarisine hazırlamakla kalmayacak, aynı zamanda kullanıcılarınıza Türkiye’de ve dünyada henüz çok az platformun sunabildiği büyüleyici bir deneyim yaşatarak projenizi rakiplerinizin fersah fersah önüne geçirecektir.