- Mengimplementasikan secara langsung fitur pembuatan materi visual interaktif yang dirilis Claude
- Generative UI yang secara otomatis membuat materi seperti chart, diagram, dan visualisasi, bukan sekadar respons teks sederhana
- Visualisasi algoritme: binary search, BFS/DFS, sorting, dll.
- Animasi 3D: adegan interaktif berbasis WebGL/CSS3D
- Chart dan diagram: pie chart, bar chart, network diagram, dll.
- Widget dan simulasi: form, grafik matematika, alat interaktif, dll.
- Semua elemen visual dirender di dalam sandbox iframe untuk memastikan keamanan dan isolasi
- Mendukung tema terang/gelap otomatis, animasi progresif, dan penyesuaian ukuran responsif
- Menghasilkan konten visual interaktif secara real-time berbasis CopilotKit dan LangGraph
- Disusun dengan struktur monorepo berbasis Turborepo
apps/app: frontend berbasis Next.js 16, React 19, Tailwind 4apps/agent: agen Python yang menggunakan LangGraph dan middleware CopilotKit
- Cara kerja
- Pengguna memasukkan prompt melalui UI chat CopilotKit
- Agen menentukan bentuk respons yang tepat: teks, pemanggilan tool, atau komponen visual
- Hook
widgetRenderer di frontend menerima HTML lalu merendernya ke iframe
- Setelah Skeleton loading, dilakukan fade-in yang halus serta penyesuaian tinggi otomatis
- Menyediakan matriks keputusan visualisasi
- Berdasarkan jenis permintaan, sistem otomatis memilih teknologi yang sesuai seperti SVG, HTML, Chart.js, Three.js, D3.js, dll.
- Contoh: penjelasan proses menggunakan Flowchart, perbandingan data memakai Bar chart, representasi 3D memakai Three.js
- Lisensi MIT
3 komentar
Jadi, caranya adalah merender HTML yang dihasilkan di dalam
iframe.Claude baru saja merilis fitur ini belum lama, tetapi sudah langsung diimplementasikan sebagai open source.
Menarik juga melihat Claude ada di daftar kontributor, haha.
Claude yang membantu mengimplementasikan persis fitur yang dirilis Claude..
Katanya, kalau melakukan commit menggunakan Claude Code, secara default nama akan otomatis tercantum sebagai kontributor.