Akış (Streaming) Arayüzleri Tasarlamak

Akan yanıt, modern yazılımda en az tasarlanmış yüzeydir. Çoğu ekip bir TypeScript fetch hook'u yazdı, bir div'e bağladı ve buna ürün tasarımı dedi. Sonuç: arayüz taklidi yapan bir daktilo.

Streaming, metnin ekrana düşmesi değildir. Ritmi, duraklamaları, kaydırma davranışı, kesme imkanları ve güven sinyalleri olan bir etkileşim modelidir. Sadece girdiyi tasarlayan ekip ürünün yarısını yayınlamıştır. Çıktı bölgesi diğer yarıdır ve AI ürünlerinin kullanıcıyı kaybettiği yer çoğunlukla burasıdır.

Bu yazı operasyonel versiyon. Streaming UI gerçekte nedir, iyi olanların hepsinin taşıdığı beş katman, gerçek ürün analizleri, canlıda yüzeyleri öldüren anti-pattern'ler ve yayın öncesi bir denetim.

Streaming UI bir yüzeydir, fetch döngüsü değil

Streaming UI, model çalışırken kullanıcının geri okuduğu bölgenin tamamıdır. Görünen metin yalnızca bir parçasıdır. Kadans, imleç, kaydırma davranışı, yapısal taahhütler, kesme kontrolleri ve akış sonrası durum geri kalanıdır.

Yüzeyin ölçülebilir özellikleri var. İlk token'a kadar geçen süre. Token kadansı. Yapısal taahhüt. Kesme gecikmesi. Tamamlanma sinyali. Akış sonrası imkanlar. Bunlardan birini yok sayarsanız akış, tasarlanmış bir bileşen değil, bir API'nin yan etkisi olur.

Cursor, Claude, v0, Lovable, Linear AI, Raycast AI. Hiçbiri streaming'i ham token çıktısı olarak ele almıyor. Her biri yapılandırılmış bir yüzey sunuyor. Çıta bu.

Harika bir streaming yüzeyinin beş katmanı

Kullanıcının deneyimlediği sırayla beş katman. Dörtten azını taşıyan bir streaming UI eksiktir.

İlk token süresi, boşluğun geri bildirime dönüştüğü andır. Token ritmi, akış çalışmaya başladığında nasıl hissettirdiğidir. Yapısal taahhüt, yüzeyin listeleri, tabloları ve kodu yeniden akıtmadan (re-flow) nasıl ele aldığıdır. Kesme ve düzenleme, kullanıcının kaçış kapısıdır. Tamamlanma, akışın bittiği ve çıktının etkileşimli hale geldiği andır. Birini atlarsanız akış o katmandan başlayarak çürür.

Katman 1: İlk token süresi

İlk 200 milisaniye, kullanıcının yüzeye güvenip güvenmeyeceğine karar verir. Gerçek bir geri bildirim sinyaliyle 200 ms altı anlık hissettirir. Geri bildirimsiz 800 ms'yi geçerse kullanıcı ürünün bozuk olduğuna çoktan karar vermiştir.

Seçenekler somut. Çıktı bölgesini önceden ayıran bir skeleton placeholder. Yanıp sönen bir imleç. Yazıyor noktaları. İçerikten 300 ms önce düşen "İşte" gibi bilinen bir ifadeden oluşan akış öneki.

ChatGPT'nin üç noktası dürüst olduğu için işe yarıyor. Claude'un gradyan nabzı bunun yükseltilmiş hali: sahte içerik vaat etmeden yüzeyin canlı olduğunu söyleyen yumuşak, animasyonlu bir bant. Cursor ince bir imleç çizgisi ve ne olduğunu adlandıran bir durum çipi çiziyor. Her durumda kullanıcı 200 ms içinde bir şeye bakıyor.

Boşluk başarısızlıktır. 600 ms asılı kalan boş bir bölge kullanıcıya AI'ın beklenip geçilmesi gereken bir şey olduğunu öğretir. Modeli yayınlamadan önce imleci yayınlayın.

Katman 2: Token ritmi

Ham token akışları titrektir. Dört token, sonra yirmi, sonra bir yayan bir model, altta yatan iletim iyi olsa bile arızalı bir terminal gibi görünür. Ritim bir tasarım kararıdır.

Çözüm, yumuşatılmış bir kadans. Gelen token'ları 30 ila 60 milisaniye tamponlayın, sonra sabit bir hızda render edin. Kullanıcı dakikada 250 ila 400 kelime okur, yani hedef, sıçramadan okuma hızında ya da hemen üstünde düşen bir akış. Claude bu disiplini erken yayınladı.

Vercel'in v0'daki streaming UI primitive'leri aynı fikri taşıyor: ağı görsel güncellemeden ayıran bir render döngüsü. API'den gelen token akışı bir katman. Görsel akış başka bir katman. İkisi asla aynı olmamalı.

İmleç önemli. Son render edilen token'ı takip eden, yumuşak bir solma izi bırakan imleç gözü sabitler. O olmadan kullanıcının gözü akışın nerede olduğunu aramak için sağa sola atlar. Cursor'ın composer'daki imlecinin adaşlığı tesadüf değil.

Katman 3: Yapısal taahhüt

En zor katman. Düz metin kolay. Yanıtın ortasında bir listeye, tabloya, kod bloğuna ya da grafiğe taahhüt eden akış, çoğu yüzeyin kırıldığı yerdir.

Saf versiyon, streaming olarak markdown. Renderer her chunk'ı ayrıştırır, yerleşim her işlemede yeniden akar, liste yeniden numaralanır, kod bloğu akışın ortasında font değiştirir, sayfa zıplar. Her reflow dikkate vurulan bir vergidir.

Doğru versiyon, yapı algılanabilir olduğu anda ona taahhüt eder, sonra içeriği yeniden akış olmadan taahhüt edilmiş yerleşime akıtır. İlk tire düştüğü anda liste yer ayırır. Üçlü backtick görüldüğünde kod bloğu bir monospace panel ayırır. Tablo sütun sayısını hemen belirler. Cursor'ın diff streaming'i ders kitabı örneği. Diff paneli yerleşimi ayırır, dosya yolları önce düşer, tek tek satırlar önceden ayrılmış satırlara akar. v0'ın seçime duyarlı streaming'i aynı deseni tuval tarafında sunuyor.

Linear AI'ın yapılandırılmış önerileri, kullanıcıya hiç "yükleniyor" durumu göstermeden taahhüdü yayınlıyor. Öneri tiplenmiş bir nesne olarak düşer, alanlar bağımlılık sırasıyla dolar, iş akışı asla bloke olmaz. Linear iş yayınlar, diğerleri transkript.

Katman 4: Kesme ve düzenleme

Kesmesi olmayan bir streaming UI düşmancadır. Kullanıcı modelin zaten yanlış olduğunu bildiği bir şeyi yazmasını izliyor ve tek çıkış sekmeyi kapatmak. Ürün değil. Token sayacı olan bir rehine krizi.

Durdur düğmesi yüzeydeki en ucuz, en yüksek kaldıraçlı öğedir. 100. token'dan sonra değil, birinci token'dan itibaren görünür. Claude, Cursor, ChatGPT ve v0'ın hepsi bir tane sunuyor. Çoğu ev yapımı sohbet arayüzü unutuyor.

Kesme tabandır. Düzenleme tavandır. Çoğu ekibin henüz hak etmediği desen canlı düzenleme: kullanıcı akışın ortasında prompt'u revize eder ve yüzey yeniden yönlenir. Cursor'ın streaming sırasındaki kabul et ve reddet'i yayınlanmış en yakın versiyon. Kullanıcı diff'i düştükçe okur, işe yarayan kısımları kabul eder, yaramayanları reddeder. Bu gerçek bir etkileşim döngüsü.

ChatGPT'nin yeniden oluştur'u tam zıttı. Düğme önceki yanıtın üzerine yazar, kullanıcı beğendiği versiyonu kaybeder. Üzerine yazan yeniden oluşturma yıkıcıdır. Dal (branch) olarak yeniden oluşturma tasarımdır. Claude'un geçmiş yüzeyi dalı sunuyor.

Katman 5: Tamamlanma ve akış sonrası

Akışın bittiği an bir tasarım anıdır. Çoğu ürün bunu hiçbir şey olarak görür. Akış durur, imleç kaybolur, kullanıcı bir metin duvarına bakıp sırada ne yapacağını düşünür.

Claude'un artifact somutlaşması altın standart. Akan metin sessiz bir tamamlanma sinyali alır ve artifact paneli aynı vuruşta akış önizlemesinden etkileşimli yüzeye geçer. Kullanıcı "okumayı bitirmiş" değil, artık "artifact'in içinde." Geçişin kendisi her şey.

v0'ın önizleme geçişi tasarım tarafındaki versiyon. Akan kod biter, canlı önizleme iframe'i son build ile yeniden yüklenir, deploy düğmesi belirir. Üç durum, tek geçiş, ölü hava yok.

Cursor'ın diff'ten kabul etmeye geçişi üçüncü desen. Akış biter, diff düzenlenebilir kalır, kabul et ve reddet durur, kullanıcı söyleyene kadar dosya commit edilmez. Akış bitti, karar bitmedi. Bu ayrım, yüzeyi bir sohbet kaydı yerine bir araç gibi hissettiren şey.

Kötü versiyon akışı bitirir ve hiçbir şey sunmaz. İmleç söner, metin orada durur, kullanıcı gerçekten kullanmak için metni başka bir araca kopyalar. Bir modelin eklendiği kopyala-yapıştır hattı.

Gerçek ürün analizleri

Cursor composer-streaming artı diff-somutlaştırma çalıştırır. Composer planı akıtır, diff paneli yamayı akıtır, kabul et ve reddet canlı kalır, akış sonrası durum kullanıcının sahip olduğu bekleyen bir diff'tir. Her katman vuruyor.

Claude yumuşatılmış token ritmi ve artifact paneli geçişi sunar. İlk token'dan önce gradyan nabzı, sabit kadans, tamamlanmada artifact somutlaşması, dallanan konuşma geçmişi. Yüzey tasarlanmış hissettiriyor çünkü her geçiş tasarlandı.

v0 canlı önizlemeli, seçim güdümlü streaming sunar. Kullanıcı tuvalin bir bölgesine tıklar, prompt kendini kapsamlandırır, akış kod olarak düşer ve önizleme iframe'de yer değiştirir. Tamamlanma bir deploy düğmesine devredilir.

ChatGPT temel çizgi. Üç nokta geri bildirimiyle token streaming, üzerine yazan yeniden oluşturma, yakın zamanda eklenen buradan dallan. Kategori varsayılanı, çıta değil.

Vercel AI Playground, Lovable, Anthropic Computer Use, Raycast AI ve GitHub Copilot Workspace her biri dilimler sunuyor. Vercel model seçiciyi akış sırasında canlı gösteriyor. Lovable akıştan uygulamaya desenini işletiyor, kullanıcı uygulamasının gerçek zamanlı kurulmasını izliyor. Computer Use ekran görüntülerini ve akıl yürütme izini paralel akıtıyor. Raycast bir komut paleti mikro yüzeyine akıtıyor. Copilot Workspace kontrol noktalarıyla önce planla sonra uygula streaming'i sunuyor.

Beş kural

1. 200 milisaniyenin altında geri bildirim gösterin. Bir imleç, bir nabız, bir yazıyor noktası, bir akış öneki. Boşluk dışında her şey.
2. Kadansı yumuşatın. Ağ akışını tamponlayın, okuma hızında render edin, imleci sabitleyin. Titreme bir ağ koşulu değil, tasarım hatasıdır.
3. Yapıyı reflow olmadan taahhüt edin. Bir liste, tablo veya kod bloğu algılanır algılanmaz yerleşimi ayırın. Asla yeniden akıtmayın.
4. Durdur düğmesini 100. token'dan önce yayınlayın. Görünür. Erişilebilir. Tek tık. İstisna yok.
5. Akıştan sonraki anı akış kadar özenle tasarlayın. Tamamlanma bir devir teslimdir. Devir teslim üründür.

Canlıda akışları öldüren anti-pattern'ler

Ölü spinner. Model kapalı bir render katmanının arkasında akarken bir spinner döner. Spinner'ı silin. Akışı yayınlayın.

Token titremesi. Ham token çıktısı, tampon yok, kadans patlamalar ve duraklamalar arasında yanıp söner. Yumuşatın.

Kullanıcıyla savaşan otomatik kaydırma. Kullanıcı önceki bir paragrafı okurken sayfa akışı takip etmek için otomatik kayar. Manuel kaydırmayı algılayın, kullanıcı yeniden demir atana kadar otomatik kaydırmayı duraklatın. Claude ve Cursor bunu hallediyor.

Durdur düğmesi yok hatası. Kesme bir ayarlar menüsünün içine gömülü, ya da yalnızca 30 saniye sonra beliriyor, ya da hiç yok. Birinci token'dan itibaren görünür olsun.

Biten ve kullanıcıyı bakakalan akış. Tamamlanma sinyali yok, sonraki adım yok. Akış sonrasını tasarlayın.

Yıkıcı yeniden oluşturma. Yeni yanıt eskisinin üzerine yazar, kullanıcı beğendiği versiyonu kaybeder. Yeniden oluşturmayı dal olarak yapın, asla üzerine yazma olarak değil.

Streaming olarak ham markdown. Renderer her chunk'ta reflow yapar, sayfa zıplar. Yapıyı bir kez taahhüt edin, ayrılmış yerleşime akıtın.

Düzeltmeler küçük. Onları yayınlayan yüzeyler 2026 gibi hissettiriyor. Yayınlamayanlar, 2026 modeline bağlanmış 2022 sohbet kenar çubukları gibi.

Streaming yüzeyi denetimi

Bunları herhangi bir AI streaming yüzeyinde yayından önce çalıştırın.

1. İlk geri bildirim. Yüzey, gönderimden sonraki 200 milisaniye içinde bir şey gösteriyor mu?
2. Kadans. Token akışı okuma hızına yumuşatılmış mı, yoksa ham ağ titremesi mi?
3. Yapısal taahhüt. Yüzey, içerik gelmeden önce listeler, tablolar ve kod blokları için yerleşim ayırıyor mu?
4. Durdur imkanı. Durdur düğmesi ilk token'dan itibaren, tek tıkla görünür mü?
5. Düzenleme imkanı. Kullanıcı akışın ortasında revize edebiliyor, kabul edebiliyor veya reddedebiliyor mu?
6. Tamamlanma tasarımı. Akışın bittiği an gerçek bir sonraki adıma devrediyor mu?
7. Akış sonrası artifact. Çıktı akıştan sonra etkileşimli mi, yoksa donmuş bir transkript mi?

Yedisini de geçen yüzey tasarlanmış bir bileşen gibi hissettirir. Üç ya da daha fazlasında kalan yüzey, bir model eklenmiş konsol logu gibi hissettirir. Aradaki fark, AI-native ürün tasarımını sonradan eklenmiş AI'dan ayıran şeydir.

Streaming yüzeylerini bu kadar özenle yayınlayan ekipler, girdi tarafında prompt yüzeylerini gerçek bileşenler olarak ele alan ve sistem düzeyinde AI gecikmesi için tasarım yapan aynı ekipler. Akan çıktı okunmayı hak etsin diye bunu boş durumlar, ajan UI desenleri ve güven sinyalleri ile eşleştirin.

SSS

Streaming UI tasarımı nedir?

Streaming UI tasarımı, model üretirken AI çıktısının ekranda nasıl göründüğünü şekillendirme disiplinidir. İlk token süresini, token kadansını, yapısal taahhüdü, kesme imkanlarını ve akış sonrası artifact'i kapsar. Streaming UI, metinle dolan bir textarea değildir. Ölçülebilir özellikleri olan tasarlanmış bir yüzeydir ve şu an kazanan ürünler onu böyle ele alıyor.

Token streaming neden farklı ürünlerde farklı hissettiriyor?

Çünkü kadans bir tasarım kararıdır, ağ sonucu değil. Ham token akışı titrer. Tamponlanmış, yumuşatılmış akış okuma hızında düşer. Claude, ağı görsel güncellemeden ayıran bir render döngüsüyle kadansı yumuşatıyor. ChatGPT ham iletime daha yakın çalışıyor. Aynı model sınıfı, farklı yüzey hissi.

En yaygın streaming UI hatası nedir?

Görünür bir durdur düğmesi olmadan akış yayınlamak. Kullanıcı modelin yanlış olduğunu bildiği bir şeyi yazmasını izliyor ve çıkış yolu yok. Diğer yaygın hatalar: ölü spinner'lar, kullanıcıyla savaşan otomatik kaydırma, yıkıcı yeniden oluşturma, her chunk'ta reflow yapan ham markdown ve hiçbir yere devretmeyen bir tamamlanma. Her biri küçük bir yüzey değişikliğiyle düzeltilebilir.

Akışı tuval gibi inşa edin

Akan çıktı bölgesi yeni tuval. AI ürünleri, bu yüzeyin ilk 800 milisaniyede nasıl hissettirdiğiyle ve 30 saniyelik bir yanıt boyunca nasıl okunur kaldığıyla yaşar ya da ölür. Çoğu ekip bunu daktilo gibi ele alıyor. Çıtayı yayınlayan ekipler altyapı gibi ele alıyor.

Beş katmanı yayınlayın. Denetimi çalıştırın. Anti-pattern'lerden kaçının. Öbür taraftan çıkan ürün, araç taklidi yapan bir sohbet kenar çubuğu yerine gerçekten bir araç gibi hissettirir.

Streaming yüzeylerini üstüne eklenmiş token döngüleri yerine tam bileşenler olarak yayınlayan bir ekip istiyorsanız, Brainy'yi tutun. AI-native ürün arayüzünü uçtan uca tasarlıyoruz, ilk token'dan akış sonrası artifact'e kadar, ilk kullanıcı gönder'e basmadan önce güven sinyalleri ve kesme imkanları yerleştirilmiş olarak.