Dari chat jadi aplikasi mini: canvas dan artefak interaktif

Canvas dan artefak adalah fitur yang membuat AI menaruh hasil kerjanya di panel tersendiri di samping chat, berupa dokumen, dasbor, atau alat interaktif kecil. Hasilnya bisa diedit, dibuka lagi, dan dibagikan lewat tautan. Claude menyebutnya artifacts, Cursor menyebutnya Canvases. Cocok untuk prototipe dan alat internal kecil, belum untuk aplikasi utuh.

Tesis artikel ini: artefak paling berguna sebagai tahap antara. Ia mengisi celah antara jawaban teks yang hilang di riwayat chat dan aplikasi sungguhan yang butuh server, login, dan perawatan. Kalau kamu memperlakukannya sebagai produk jadi, kamu akan menabrak batasnya. Kalau kamu memperlakukannya sebagai sketsa yang bisa diklik, ia menghemat banyak waktu.

Yang perlu diluruskan dulu

Istilahnya mudah tertukar. Canvas dan artefak di sini berarti hal yang sama secara konsep: hasil kerja AI yang dirender sebagai halaman sendiri, terpisah dari aliran chat. Tiap vendor punya nama dan aturan berbeda, jadi yang saya bahas hanya yang bisa saya cek di dokumentasi resmi.

Salah kaprah yang lebih berbahaya: artefak dianggap "aplikasi yang sudah jadi". Dokumentasi Claude Code tentang artefak menyebutnya terang-terangan sebagai satu halaman mandiri tanpa backend. Backend adalah bagian server yang menyimpan data, memeriksa login, dan menjalankan logika di belakang layar.

Catatan jujur. Artikel ini ditulis 2 November 2026 dari pusat bantuan Claude, dokumentasi Claude Code, serta dokumentasi dan changelog Cursor. ChatGPT juga punya fitur bernama canvas, tetapi halaman bantuan resminya tidak bisa saya buka saat menulis. Jadi detail fitur ChatGPT canvas sengaja tidak saya bahas dan statusnya belum terverifikasi di artikel ini. Fitur di ketiga produk berubah cepat, jadi cek ulang halaman sumber sebelum mengambil keputusan.

Artikel ini untuk kamu yang sudah rutin memakai Claude atau Cursor dan ingin hasil kerja AI lebih dari sekadar teks. Pebisnis pemula yang ingin menguji ide aplikasi tanpa menyewa developer juga termasuk. Kalau kamu mencari panduan membangun aplikasi produksi dengan database dan pembayaran, artikel ini bukan tempatnya.

Dari jawaban teks ke halaman yang bisa diklik

Bayangkan kamu minta AI membuat kalkulator harga jasa. Di chat biasa, kamu mendapat blok kode panjang. Kamu harus menyalinnya, menyimpannya, lalu membukanya sendiri. Setelah lima pertanyaan lanjutan, versi terbaru tenggelam di antara versi lama.

Artefak memotong langkah itu. Menurut pusat bantuan Claude, artefak adalah apa pun yang Claude buat untuk kamu tunjukkan ke orang lain: desain, presentasi, dokumen, dasbor, atau alat interaktif kecil. Ia terbuka di jendela sendiri di samping percakapan. Kamu bisa mengeditnya, kembali ke sana nanti, dan membagikannya.

Claude memutuskan membuat artefak bila kontennya memenuhi beberapa syarat. Kontennya cukup besar dan berdiri sendiri, biasanya lebih dari 15 baris. Kemungkinan besar akan kamu edit, pakai ulang, atau rujuk lagi. Ia juga bisa dipahami tanpa membaca chat di sekitarnya.

Ada tiga perubahan yang paling terasa bedanya:

• Hasil punya rumah. Semua artefak tersimpan di tab Artifacts di sidebar Claude, jadi bisa dicari dari percakapan mana pun.
• Revisi terjadi di tempat. Kamu minta perubahan lewat chat, atau mengedit langsung pada artefak dari template seperti Docs dan Slides.
• Berbagi cukup dengan tautan. Artefak dimulai privat, lalu bisa kamu bagikan bila sudah siap.

Dua contoh yang bisa dicek

Claude artifacts

Fitur ini paling luas cakupannya. Membuat artefak di chat tersedia di paket Free, Pro, Max, Ultra, Team, dan Enterprise. Syaratnya, pengaturan "Cloud code execution and file creation" harus menyala di Settings > Capabilities. Di tata letak Settings yang baru, namanya "Create and edit files". Untuk Team dan Enterprise, pengaturannya ada di Organization settings. Artefak yang dibuat di chat sebelum 16 September 2026 kini disebut legacy artifacts: tetap berfungsi dan bisa dibagikan, tetapi kamu tidak bisa membuat yang baru dengan format lama.

Ada beberapa template sebagai titik awal: Docs, Slides, dan Design untuk semua paket. Dashboards masih beta dan hanya untuk paket berbayar. Motion juga beta dan hanya untuk Team serta Enterprise.

Bagian yang paling menarik untuk vibe coding adalah artefak yang memanggil Claude. Vibe coding adalah cara membuat aplikasi dengan mendeskripsikan keinginan dalam bahasa sehari-hari lalu membiarkan AI menulis kodenya. Artefak semacam ini menjadi aplikasi mini: pengguna bisa bertanya, membuat konten, atau bermain, dan Claude menanggapi isian mereka. Klaim Anthropic: tidak perlu API key, tidak ada biaya untuk pembuatnya, dan pemakaian dihitung ke batas paket tiap pengguna yang membuka. Pengguna masuk dengan akun Claude mereka sendiri, dan artefak baru meminta izin dulu saat pertama kali ingin memakai Claude.

Dua kemampuan lain hanya ada di paket berbayar. Artefak bisa terhubung ke aplikasi yang sudah kamu sambungkan ke Claude, seperti Asana, Google Calendar, dan Slack. Artefak juga bisa menyimpan data antarsesi, misalnya untuk jurnal atau pelacak.

Di Claude Code, artefak berbentuk halaman web interaktif di URL privat yang terus diperbarui selama sesi berjalan. Contoh pemakaiannya menurut dokumentasi resmi: penjelasan pull request dengan diff beranotasi, dasbor dari data sesi, atau linimasa investigasi.

Cursor Canvases

Cursor datang dari arah developer. Dokumentasi Canvases menyebut canvas sebagai artefak interaktif yang dirender di samping chat, berisi bagian, angka ringkas, dan tabel. Cursor membuatnya ketika kamu minta dasbor, analisis, audit, atau laporan, atau ketika ia menilai tampilan visual lebih cocok.

Canvas disimpan dan bisa dijalankan ulang dengan data baru. Ini yang membedakannya dari tangkapan layar. Kamu juga bisa mengemas pola canvas yang sering dipakai ke dalam skill, yaitu paket instruksi supaya Cursor menghasilkan tata letak yang sama setiap kali diminta.

Pada changelog 16 Oktober 2026, Cursor mengumumkan bahwa cloud agent kini bisa membuat canvas sebagai bagian dari pekerjaannya. Cloud agent adalah agen yang berjalan di mesin virtual milik Cursor, bukan di laptopmu. Canvas yang sudah jadi bisa dibagikan ke tim lewat tautan.

Pendapat saya: Cursor Canvases paling masuk akal untuk tim yang sudah hidup di dalam repositori kode, misalnya laporan audit dependensi atau ringkasan kualitas kode mingguan. Untuk orang awam yang ingin membuat alat kecil bagi pelanggan, Claude artifacts lebih dekat ke kebutuhan itu.

Batas yang jarang dibahas

Demo artefak selalu terlihat mulus. Batasnya baru terasa ketika kamu ingin orang lain memakainya sungguhan.

Tidak ada backend. Menurut dokumentasi Claude Code, artefak yang diterbitkan dari sesi Claude Code adalah halaman statis. Ia tidak bisa melayani banyak rute dan tidak bisa mengautentikasi penontonnya sendiri. Untuk alat internal yang butuh backend, Anthropic menyarankan deploy di infrastruktur sendiri. Halamannya juga dibatasi Content Security Policy, aturan keamanan browser yang membatasi sumber luar. Gambar eksternal diblokir, skrip hanya boleh dari lima host CDN publik, dan permintaan jaringan hanya boleh ke asal halaman itu sendiri serta host Google Fonts.

Penyimpanan kecil dan hanya teks. Penyimpanan data artefak Claude dibatasi 20 MB per artefak dan hanya menerima teks, tanpa gambar atau file. Ada dua jenis: pribadi, yang hanya terlihat oleh tiap pengguna, dan bersama, yang dilihat semua orang.

Koneksi aplikasi milik masing-masing. Setiap orang menyambungkan aplikasinya sendiri, bahkan saat membuka artefak yang dibagikan. Ini aman untuk privasi, tetapi berarti dasbor Slack buatanmu tidak otomatis menampilkan data Slack-mu ke rekan kerja.

Berbagi di Cursor terbatas pada tim. Tautan canvas memberi akses baca saja ke cuplikan tampilan, dan hanya anggota tim yang sama yang bisa membukanya. Fitur berbagi butuh paket berbayar dan keanggotaan tim. Privacy Mode versi lama juga memblokirnya, dan admin bisa mematikannya untuk seluruh organisasi.

Kode dari orang lain. Di paket Free sampai Ultra, Claude mengizinkan kamu menyalin kode legacy artifact publik milik orang lain sebagai titik awal versimu sendiri. Pusat bantuannya sendiri memperingatkan agar hanya melakukannya dengan artefak dari orang yang kamu percaya. Perlakukan seperti file dari pengirim tak dikenal.

Kapan artefak cukup, kapan perlu aplikasi sungguhan

Saya sarankan satu pertanyaan sederhana: siapa pemilik datanya, dan berapa lama data itu harus hidup? Jawaban itu biasanya sudah menentukan pilihan.

Keputusan saya: mulai dari artefak, tetapi tulis rencana keluar sejak awal. Artefak adalah cara tercepat menguji apakah orang benar-benar memakai alatmu. Begitu ada pengguna yang menyimpan data penting di sana, itu sinyal untuk mulai merancang aplikasi sungguhan.

Jebakan yang paling mudah terjadi adalah melompati tahap perencanaan. Misalnya kamu langsung minta "buatkan aplikasi booking", mendapat artefak yang tampak jadi, lalu baru sadar data booking di penyimpanan pribadi tiap pengunjung tidak bisa dibaca admin. Masalahnya ada pada definisi kebutuhan, bukan pada AI-nya.

Ringkasan dan langkah berikutnya

Checklist sebelum membagikan artefak

• Tahu artefak ini dibuka orang dalam tim saja atau publik
• Sudah cek apakah artefak memakai penyimpanan pribadi atau bersama
• Tidak ada data sensitif pelanggan yang tersimpan di penyimpanan bersama
• Pengguna tahu mereka perlu menyambungkan aplikasi masing-masing bila artefak memakai koneksi
• Sudah menulis kapan alat ini harus dipindah ke aplikasi sungguhan
• Untuk artefak buatan orang lain, sumbernya sudah dipercaya

Cheat sheet

Sebelum minta AI membuat artefak, rumuskan dulu fitur inti dan alur penggunanya. AI MVP Generator di eduwebmu bisa membantumu memetakan fitur inti dan alur pengguna dari ide aplikasimu. Bawa hasilnya ke Claude sebagai bahan prompt, dan tandai fitur mana yang cukup di artefak serta mana yang nanti butuh backend.