- Claude'un sunduğu etkileşimli görsel içerik üretimi özelliğini birebir hayata geçiriyor
- Basit metin yanıtları yerine grafikler, diyagramlar ve görselleştirmeler gibi içerikleri otomatik üreten bir Generative UI
- Algoritma görselleştirme: ikili arama, BFS/DFS, sıralama vb.
- 3D animasyonlar: WebGL/CSS3D tabanlı etkileşimli sahneler
- Grafikler ve diyagramlar: pasta grafik, çubuk grafik, ağ diyagramı vb.
- Widget'lar ve simülasyonlar: form'lar, matematik grafikleri, etkileşimli araçlar vb.
- Tüm görsel öğeler sandbox iframe içinde render edilerek güvenlik ve yalıtım sağlanıyor
- Otomatik açık/koyu tema, kademeli animasyon ve duyarlı yeniden boyutlandırma desteği
- CopilotKit ve LangGraph tabanlı olarak konuşmalı görsel içerik gerçek zamanlı üretiliyor
- Turborepo tabanlı monorepo yapısı ile oluşturulmuş
apps/app: Next.js 16, React 19, Tailwind 4 tabanlı frontendapps/agent: LangGraph ve CopilotKit middleware kullanan Python ajanı
- Nasıl çalışıyor
- Kullanıcı, CopilotKit sohbet arayüzü üzerinden prompt giriyor
- Ajan, metin, araç çağrısı veya görsel bileşenlerden hangisinin uygun yanıt biçimi olduğuna karar veriyor
- Frontend'deki
widgetRenderer hook'u HTML alıp bunu iframe olarak render ediyor
- Skeleton loading sonrasında yumuşak bir fade-in uygulanıyor ve otomatik yükseklik ayarı yapılıyor
- Görselleştirme karar matrisi sunuyor
- İstek türüne göre SVG, HTML, Chart.js, Three.js, D3.js gibi uygun teknolojiler otomatik seçiliyor
- Örneğin süreç açıklamaları için Flowchart, veri karşılaştırmaları için Bar chart, 3D gösterimler için Three.js kullanılıyor
- MIT lisansı
3 yorum
Üretilen HTML'i
iframeiçinde render etme yöntemiymiş.Claude bu özelliği çıkaralı daha çok olmamıştı, hemen açık kaynak olarak da uygulanmış.
Katkıda bulunanlar arasında Claude’un olması da ayrıca eğlenceli olmuş haha Claude’un çıkardığı özelliği birebir uygulamaya yardımcı olan Claude..
Claude Code kullanarak commit yapınca, varsayılan ayarda contributor olarak otomatik eklenip göründüğünü söylüyorlar.