- Claude Artifacts, HTML, CSS ve JavaScript kullanarak etkileşimli tek sayfalı uygulamalar oluşturmayı; sonuçları Claude arayüzü içinde görmeyi ve daha sonra iyileştirmeyi sağlayan bir özellik.
- Yakın zamanda Claude etkinlik geçmişini analiz için SQLite'a dönüştürdüğümde, geçen hafta Claude Artifacts'ı beklediğimden çok daha fazla kullandığımı fark ettim.
- Bu özelliği, sorunları doğrudan çözmek veya prototipler üretmek için faydalı bir araç olarak kullanıyorum.
[Claude Artifacts ile yaptığım projeler]
Jina Reader ile URL to Markdown kullanımı
- Jina Reader API'yi çağırarak bir web sayfasının tüm metnini Markdown'a dönüştüren bir web arayüzü geliştirdim
- URL girişi → Jina Reader API ile Markdown üretimi → Markdown çıktısı ve "Copy" düğmesi sunumu
- Mobil Safari'de sayfanın tüm metnini bir LLM'e kopyala-yapıştır yapmanın zor olması sorununu çözdü
WASM içinde SQLite demosu
- SQLite'ın WASM derlemesiyle ilgili bir Hacker News sohbeti sayesinde NPM'deki @sqlite.org/sqlite-wasm paketini keşfettim
- Çalışıp çalışmadığını doğrulamak için basit, etkileşimli bir demo geliştirdim
URL çıkarma aracı
- Bir web sayfası metninden bağlantılı URL'leri çıkarmak istiyordum
- Zengin metin HTML yapıştırmasını kabul eden ve HTML ayrıştırıcısı kullanarak bağlantıları çıkaran bir artifact oluşturdum
Pano görüntüleyici
- Tarayıcı Clipboard API'sini kullanarak çeşitli içerik türlerini yapıştırıp bilgilerini incelemek için bir hata ayıklama aracı geliştirdim
- Düz metin, rich text, dosyalar, görseller vb. kopyalayıp yapıştırarak tarayıcıda hangi bilgilerin kullanılabildiğini kontrol edebiliyorsunuz
Pyodide REPL
- CSP başlığında https://cdn.jsdelivr.net/pyodide/ adresini fark ettim
- Bunun, Anthropic geliştirme ekibinin Pyodide'ı (WebAssembly'ye derlenmiş Python) artifact içinde yüklenebilir olacak şekilde bilerek ayarladığına işaret ettiğini düşündüm
- Çalıştığını kanıtlamak için basit bir demo geliştirdim
Fotoğraf makinesi ayar simülatörü
- JavaScript ile kamera ayarlarını simüle etmenin mümkün olup olmadığını merak ettim, ancak hatalar vardı ve sonuçlar çok etkileyici değildi
- Fabric.js kütüphanesini keşfettim
LLM fiyat hesaplayıcısı
- Google Gemini ile video scraping denemesinin parçası olarak bir fiyat hesaplayıcısı geliştirdim
- Gemini'nin ucuz fiyatlandırmasıyla ilgili kendi hesaplarıma güvenmediğim için bunu yaptım
YAML to JSON dönüştürücü
- YAML söz diziminin bazı yönlerini hatırlamak için, YAML girdisini anında JSON'a dönüştüren bir araç geliştirdim
OpenAI Audio
- OpenAI'nin yeni Audio API'sini keşfettim
- Mikrofon erişim izni isteyen, ses kaydeden, bunu base64 olarak kodlayıp OpenAI API'sine gönderen bir web sayfası geliştirdim
- Claude Artifacts doğrudan harici ana makinelere API isteği gönderemiyor, ancak çalışan bir sürüm geliştirdikten sonra bunu başka bir barındırmaya taşıyıp tamamlamak mümkün
QR kod çözücü
- QR kod içeren slaytların gösterildiği bir toplantıda, QR kodları normal URL'lere dönüştürmenin bir yoluna ihtiyacım vardı
- Claude Artifacts kullanarak hızlıca bir QR kod çözücü geliştirdim
Görsel dönüştürücü ve sayfa indirici
- Hacker News'te biri, fotoğraflar sayfaya sürüklendiğinde bunları base64 URL olarak içine gömen ve "HTML olarak kaydet" ile galeri içeren bağımsız bir sayfa elde edilmesini sağlayan bir araç fikri ortaya attı
- Mobil telefonda "HTML olarak kaydet" mümkün olmadığında işe yarayan bir "download link" özelliği eklemeyi önerdi ve bunun prototipini geliştirdim
HTML Entity Escaper
- Telefonda bir metin parçasındaki HTML entity'lerini escape etmem gerektiği için Claude'dan bir araç yapmasını istedim
text-wrap-balance-nav
- Terence Eden'dan ilham alarak
text-wrap: balance CSS özelliğini denedim
- Claude'dan slider ve checkbox içeren bir nav bar örneği üretmesini istedim
ARES fonetik alfabe dönüştürücüsü
- HAM radyo iletişiminde gönüllü olarak görev yaparken fonetik alfabeyi karıştırmaktan endişe ettiğim için Claude'dan bir araç yapmasını istedim
[Claude Artifacts'ın avantajları ve sınırları]
- Yazar, bir haftada 14 proje üretecek kadar artifact'leri yoğun biçimde kullanıyor
- 20 Haziran'daki çıkışından beri bunu kullanıyor ve şu anda günde birkaç kez yeni etkileşimli artifact'ler üretiyor
- Claude Artifacts, merakı gidermek; hızlı prototipleme ve sorun çözme için faydalı bir araç
- Araçların çoğu 5 dakika içinde yapılabiliyor
- Daha karmaşık olan OpenAI Audio aracı bile ilk sürümde 12 dakika, ikinci iterasyonda 9 dakika olmak üzere toplam sadece 21 dakika sürdü
- Ancak API çağrıları, form gönderimi ve harici sayfa bağlantıları gibi özelliklerin sınırlı olması hayal kırıklığı yaratıyor
- Öğrendiklerine dayanarak kendi artifact alternatifini yapmayı planlıyor
- Sonuç olarak artifact kullanımını tavsiye ediyor
- Eğer artifact kullanmıyorsanız, bu yazı sayesinde nedenini anlayabilmenizi umuyor
- Benim için artifact'ler şu anda LLM tabanlı en sevdiğim araçlardan biri
1 yorum
Hacker News görüşleri
Araçları mevcut kod tabanına entegre etmenin zor olduğuna dair görüşler var. Bağımsız bir sayfa olarak yapılabiliyor, ancak mevcut kod tabanıyla uyumlu hale getirmek için kod inceleme ve düzeltmelere çok zaman harcanıyor. Kodu doğrudan yazmak daha iyi bir seçenek.
2000'lerin başında web geliştirmeyi bırakıp web işine odaklanmıştı, ancak artık LAMP kullanarak yaratıcı işler yapabildiği için mutlu. Örneğin, istediği bir pazarlama sitesini 20 dakika içinde yayına alabiliyor.
LLM'leri yerel kod tabanıyla birlikte kullanmanın en iyi yoluna dair blog yazıları veya "en iyi uygulamalar" aranıyor. Toplulukta tavsiye edilebilecek kaynaklar olması bekleniyor.
İçinde bulunduğumuz çağın inanılmaz olduğuna dair bir görüş var. Hafta sonunda Rust öğrenmeye başladı ve ChatGPT 4 gerçek zamanlı destek veren harika bir öğretmen rolü üstleniyor.
Anthropic, WeChat benzeri bir süper uygulama konumuna yaklaşıyor. Yayınlanan artifact'leri kenar çubuğunda kolayca gösterebilecek bir yönteme ihtiyaç var. Elon bu modele çok ilgi duyduğu için, xAI Claude'un özelliklerine sahip olursa o yöne ilerleyecektir.
Anthropic'in tanıttığı yeni paradigma, içeriğin barındırılıyor olması. LLM çıktısı, kullanıcıların kullanabileceği kendi kendine barındırılan bir uygulamaya dönüşüyor. Bu, kişisel bir site kurmaktan çok da farklı değil.