🚀 open-intelligent-ui Nedir ve Hangi Problemi Çözüyor?
Yapay zekâ ekosisteminde son dönemin en büyük paradigma değişimlerinden biri, düz metin yanıtlarının yerini interaktif arayüzlere bırakması oldu. ChatGPT'nin kullanıcılarına sunduğu; bir seyahat planı istendiğinde sadece yazı dökmek yerine etkileşimli bir harita, fotoğraflar ve düzenlenebilir bir rota sunma yeteneği (Intelligent UI), kullanıcı deneyimini bambaşka bir boyuta taşıdı. Ancak bu tarz karmaşık ve akışkan arayüzleri kendi uygulamalarında görmek isteyen geliştiriciler için bugüne kadar güçlü, standartlaştırılmış ve açık kaynaklı alternatifler oldukça kısıtlıydı.
İşte tam bu noktada devreye giren open-intelligent-ui, thesysdev ekibi tarafından OpenUI standardı üzerine inşa edilmiş bağımsız bir açık kaynak projesi olarak karşımıza çıkıyor. Projenin temel amacı, ChatGPT'nin kapalı kutu akıllı arayüz deneyimini open-source bileşenlerle yeniden üretmek ve herhangi bir geliştiricinin bu altyapıyı kendi SaaS ürünlerine, panellerine veya özel yapay zekâ asistanlarına entegre etmesini sağlamaktır. Sabit şablonlar yerine modelin anlık olarak kurguladığı bir arayüz mantığı sunarak statik sohbot devrini kapatıyor.
⚡ Öne Çıkan Özellikler ve Mimari Yapı
Teknik açıdan oldukça zengin bir ekosisteme sahip olan proje, modelin OpenUI Lang 1.0 dilini akışlı (streaming) olarak göndermesine ve uygulamanın da bu veriyi modelin kendi düzenlediği bir ilkel bileşenler (primitives) kütüphanesiyle render etmesine dayanıyor. Hiçbir yerleşim (layout) bileşenlerde sabitlenmemiş durumda; her şey anlık akışa göre şekilleniyor.
Projenin sunduğu zengin bileşen kütüphanesi şu katmanlardan oluşuyor:
- Yerleşim ve Düzen:
Col,Row,Box(arka plan, yarıçap, kenarlık, boyutlar ve flex yapıları),Grid,Card,Carousel,Popover,DividerveSpacer. - Gelişmiş Medya ve Veri Görselleştirme: Dinamik görsel arama (
SearchImage), harita entegrasyonları için MapLibre GL destekliMapveMapMarkerbileşenleri, çubuk/çizgi/pasta gibi tüm formları kapsayanChartmodülü ve gömülüYouTubeoynatıcıları. - İnteraktif Kontroller ve Formlar: Girdi alanları, düğmeler, kaydırıcılar (slider), tarih seçiciler, sayaçlar ve her ifadesi farklı değişkenleri okuyabilen dinamik form yapısı.
- Çizim ve Kod Çalıştırma: Öz nitelikleri durum yönetimiyle (state) hareket edebilen SVG çizim araçları ve tam anlamıyla sanal bir iframe içinde çalışan
HtmlView(oyunlar ve kanvaslar için).
Ayrıca projede yer alan 59'dan fazla jenerik @functions fonksiyonu sayesinde, yapay zekâ yanıtı kendi içinde listeleri filtreleyebilir, sayısal hesaplamalar yapabilir, döviz veya birim dönüşümleri gerçekleştirebilir ve karmaşık veri setlerini (dashboard verileri) anlık olarak gruplayıp pivot tabloya dönüştürebilir.
💡 Neden Radarımıza Girdi? (Editör Notu)
Weezir Radar ekibi olarak bu projeyi mercek altına almamızın en büyük nedeni, Üretken Arayüz (Generative UI) kavramının artık sadece dev teknoloji şirketlerinin tekelinden çıkıp bağımsız geliştiricilerin eline geçmesini sağlamasıdır. OpenAI API desteğiyle çalışan ve Next.js/React ekosistemine kusursuz uyum sağlayan bu yapı, modern web uygulamalarının geleceğine ışık tutuyor.
Geliştiricilerin kendi projelerinde ChatGPT benzeri bir "akıllı arayüz" deneyimi yaratmak için haftalarca özel arayüz kodlaması gerekmiyor; open-intelligent-ui kütüphanesindeki zengin primitifler ve OpenUI standartları sayesinde bu süreç devasa ölçüde kısalıyor. UI/UX kalitesi, karanlık/aydınlık tema token geçişleri ve akışkan veri işleme yeteneğiyle açık kaynak dünyasında hak ettiği yıldız sayısının çok daha fazlasını hak eden ilham verici bir mühendislik çalışması.
🛠️ Nasıl Denenir, Fiyatlandırma ve Kaynaklar
Projeyi yakından incelemek, canlı demosunu test etmek veya kendi yerel ortamınızda ayağa kaldırmak tamamen ücretsiz ve açık kaynak kodludur (MIT lisansı ile sunulmaktadır).
Canlı demoyu deneyimlemek ve projenin kod deposuna ulaşmak için aşağıdaki bağlantıları kullanabilirsiniz:
- Canlı Demo: OpenUI Intelligent UI Demo
- GitHub Deposu: github.com/thesysdev/open-intelligent-ui
Projeyi yerelde çalıştırmak için Next.js altyapısına sahip depoyu klonlayıp gerekli API anahtarlarını (.env) tanımlamanız ve standart bağımlılık kurulum adımlarını (`npm install` / `npm run dev`) izlemeniz yeterlidir.