- Claude Artifacts adalah fitur yang memungkinkan pembuatan aplikasi satu halaman interaktif menggunakan HTML, CSS, dan JavaScript, melihat hasilnya di dalam antarmuka Claude, lalu menyempurnakannya lebih lanjut.
- Setelah baru-baru ini mengonversi riwayat aktivitas Claude menjadi SQLite untuk dianalisis, penulis menemukan bahwa selama seminggu terakhir ia menggunakan Claude Artifacts jauh lebih sering dari yang diperkirakan.
- Fitur ini dimanfaatkan sebagai alat yang berguna untuk menyelesaikan masalah secara langsung atau membuat prototipe.
[Proyek yang Dibuat dengan Claude Artifacts]
Memanfaatkan URL to Markdown with Jina Reader
- Mengembangkan web UI yang memanggil Jina Reader API untuk mengubah seluruh teks halaman web menjadi Markdown
- Input URL → menghasilkan Markdown melalui Jina Reader API → menampilkan Markdown dan menyediakan tombol "Copy"
- Menyelesaikan masalah sulitnya menyalin/menempel seluruh teks halaman ke LLM di Safari mobile
Demo SQLite in WASM
- Menemukan paket @sqlite.org/sqlite-wasm di NPM setelah percakapan di Hacker News tentang build WASM dari SQLite
- Mengembangkan demo interaktif sederhana untuk memastikan apakah itu bekerja
Alat Ekstraksi URL
- Ingin mengekstrak URL yang ditautkan dari teks halaman web
- Membuat artifact yang menerima tempelan HTML rich-text dan menggunakan parser HTML untuk mengekstrak tautan
Penampil Clipboard
- Mengembangkan alat debugging yang menggunakan Browser Clipboard API untuk menempelkan berbagai jenis konten dan memeriksa informasinya
- Menyalin/menempel teks biasa, rich text, file, gambar, dan lainnya lalu memeriksa informasi yang tersedia di browser
Pyodide REPL
- Menemukan https://cdn.jsdelivr.net/pyodide/ di header CSP
- Ini mengisyaratkan bahwa tim pengembang Anthropic sengaja mengatur agar Pyodide (Python yang dikompilasi ke WebAssembly) dapat dimuat di artifact
- Mengembangkan demo sederhana untuk membuktikan bahwa itu berfungsi
Simulator Pengaturan Kamera Foto
- Penasaran apakah simulasi pengaturan kamera bisa dilakukan dengan JavaScript, tetapi ada bug dan hasilnya tidak terlalu mengesankan
- Menemukan library Fabric.js
Kalkulator Harga LLM
- Mengembangkan kalkulator harga sebagai bagian dari eksperimen scraping video menggunakan Google Gemini
- Dibuat karena penulis tidak sepenuhnya percaya pada perhitungannya sendiri tentang harga Gemini yang murah
Konverter YAML ke JSON
- Mengembangkan alat yang mengubah YAML menjadi JSON secara real time saat YAML dimasukkan, untuk mengingat kembali aspek tertentu dari sintaks YAML
OpenAI Audio
- Menjelajahi Audio API baru dari OpenAI
- Mengembangkan halaman web yang meminta izin akses mikrofon, merekam audio, mengenkodenya ke base64, lalu mengirimkannya ke OpenAI API
- Claude Artifacts tidak bisa langsung melakukan permintaan API ke host eksternal, tetapi setelah versi yang berfungsi dikembangkan, itu bisa dipindahkan ke hosting lain untuk diselesaikan
Dekoder Kode QR
- Dalam sebuah rapat yang menampilkan slide berisi kode QR, penulis membutuhkan cara untuk mengubah kode QR menjadi URL biasa
- Dengan Claude Artifacts, dekoder kode QR dapat dikembangkan dengan cepat
Konverter Gambar dan Pengunduh Halaman
- Di Hacker News, seseorang mengusulkan ide alat yang memungkinkan foto dijatuhkan ke halaman, lalu dibenamkan sebagai URL base64 sehingga saat "Save as HTML" dilakukan, pengguna mendapatkan halaman mandiri berisi galeri
- Juga diusulkan fitur "download link" yang berguna ketika tidak bisa melakukan "Save as HTML" di ponsel, lalu dibuat prototipenya
HTML Entity Escaper
- Karena perlu melakukan escape HTML entity pada potongan teks di ponsel, penulis meminta Claude membuatkan alatnya
text-wrap-balance-nav
- Bereksperimen dengan properti CSS
text-wrap: balance terinspirasi oleh Terence Eden
- Meminta Claude membuat contoh nav bar dengan slider dan checkbox
Konverter Alfabet Fonetik ARES
- Saat menjadi relawan dukungan operasi komunikasi radio HAM, penulis khawatir akan salah menggunakan alfabet fonetik, sehingga meminta Claude membuatkan alat
[Kelebihan dan Keterbatasan Claude Artifacts]
- Penulis memanfaatkan artifacts secara besar-besaran, sampai membuat 14 proyek hanya dalam seminggu
- Sejak dirilis pada 20 Juni, fitur ini terus digunakan, dan kini penulis membuat artifact interaktif baru beberapa kali sehari
- Claude Artifacts berguna untuk memuaskan rasa ingin tahu, membuat prototipe cepat, dan sebagai alat pemecahan masalah
- Sebagian besar alat bisa dibuat dalam waktu kurang dari 5 menit
- Bahkan alat OpenAI Audio yang lebih kompleks pun hanya memerlukan total 21 menit: 12 menit untuk versi pertama dan 9 menit untuk iterasi kedua
- Namun, penulis juga kecewa dengan keterbatasannya, seperti pembatasan pada pemanggilan API, pengiriman formulir, dan tautan ke halaman eksternal
- Berdasarkan apa yang dipelajari, penulis berencana membuat alternatif artifact versinya sendiri
- Kesimpulannya, penggunaan artifacts direkomendasikan
- Jika Anda belum menggunakan artifacts, semoga tulisan ini membantu Anda memahami alasannya
- Bagi penulis, artifacts saat ini adalah salah satu alat berbasis LLM favoritnya
1 komentar
Komentar Hacker News
Ada pendapat bahwa mengintegrasikan alat ke codebase yang sudah ada itu sulit. Memang bisa dibuat sebagai halaman terpisah, tetapi agar kompatibel dengan codebase yang ada, dibutuhkan banyak waktu untuk meninjau dan memperbaiki kode. Menulis kode sendiri adalah pilihan yang lebih baik.
Saya berhenti dari pengembangan web pada awal 2000-an dan fokus pada bisnis web, tetapi sekarang senang karena bisa melakukan pekerjaan kreatif dengan LAMP. Misalnya, saya bisa meluncurkan situs pemasaran yang saya inginkan dalam waktu kurang dari 20 menit.
Sedang mencari tulisan blog atau "praktik terbaik" tentang cara terbaik menggunakan LLM bersama codebase lokal. Saya berharap ada materi yang direkomendasikan komunitas.
Ada pendapat bahwa zaman sekarang sungguh menakjubkan. Baru mulai belajar Rust akhir pekan ini, dan ChatGPT 4 berperan sebagai guru hebat yang membantu secara real-time.
Anthropic semakin mendekati status super app seperti WeChat. Dibutuhkan cara agar artifact yang dipublikasikan bisa dengan mudah ditampilkan di sidebar. Karena Elon sangat tertarik pada model ini, jika xAI memiliki kemampuan seperti Claude, mereka akan bergerak ke arah itu.
Paradigma baru yang diperkenalkan Anthropic adalah bahwa konten di-host. Output dari LLM dijadikan aplikasi self-hosted yang bisa digunakan konsumen. Ini tidak jauh berbeda dari membangun situs pribadi.