Jawaban singkat untuk pertanyaan yang paling sering diajukan pembaca tentang topik ini.
Artifact adalah halaman interaktif di claude.ai yang diterbitkan langsung dari sesi. Ini batasan yang membentuknya dan di mana ia diam-diam tidak jalan.
Matthews Wong
Software Engineer
Ringkasan Utama
Artifact Claude Code adalah halaman web interaktif yang diterbitkan dari sesi Anda ke URL privat di claude.ai, dan diperbarui di tempat selama sesi berlanjut. Ia satu halaman mandiri tanpa backend, disajikan di bawah content security policy yang ketat, dan satu-satunya jalannya ke data luar saat dilihat adalah memanggil connector MCP.
Saya sudah dua puluh menit menjelaskan empat kemungkinan layout untuk sebuah panel setelan lewat prosa, dan orang yang membacanya tetap minta saya tunjukkan saja. Wajar. Berikutnya saya minta keempat layout itu dalam satu halaman dengan satu baris trade-off di bawah masing-masing, kirim link-nya, dan keputusannya kembali dalam sembilan puluh detik.
Itulah seluruh alasan memakai artifact, dan bagian menariknya justru batasannya, bukan konsepnya. Tulisan ini membahas apa yang sengaja bukan artifact, cara menerbitkan dan memperbarui termasuk kesalahan yang melahirkan duplikat, content security policy yang membentuk apa yang bisa dilakukan halaman itu, model connector di mana akun tiap penonton sendiri yang melakukan panggilan, komentar dan Claude membalasnya, serta kondisi ketika fiturnya diam-diam tidak ada.
Pakai artifact ketika teks terminal adalah medium yang salah: keluaran yang lebih enak dilihat dan disentuh ketimbang dibaca baris demi baris. Claude menyusun halamannya dari apa pun yang bisa dijangkau sesi itu, termasuk basis kode Anda dan data yang ditarik lewat tool tersambung, jadi ia bisa menunjukkan hal yang butuh berparagraf untuk dijelaskan.
Ia bukan tempat men-deploy tool internal. Satu halaman mandiri, tanpa backend, jadi ia tidak bisa menyimpan isian form atau melayani banyak rute. Kalau yang Anda gambarkan punya database di belakangnya, yang Anda butuhkan adalah infrastruktur sendiri dan ini benda yang salah untuk dipaksakan. Garisnya jelas dan lebih baik dihormati ketimbang dilawan.
Claude menulis halamannya ke sebuah file HTML atau Markdown di proyek Anda lalu menerbitkannya, dengan meminta izin pada kali pertama. Menerbitkan ulang artifact yang sudah Anda setujui tidak bertanya lagi, dan tiap penerbitan menjadi satu versi yang bisa Anda pilih lewat kontrol berbagi.
# Ask for one directly, or let Claude offer.
Make an artifact that walks through this PR with the diff
annotated inline and findings colour-coded by severity.
Build a dashboard artifact of last week's deploy failures by
service and keep it updated as you investigate.
# Finding and updating one later:
/artifacts # every artifact you own and every one shared
# o open in the browser
# c copy the link
# Enter attach it to THIS session
Ctrl+] # reopen the most recent artifact from this session
# Updating from a DIFFERENT session needs the URL or an attach.
# Without either, a new session creates a NEW artifact rather
# than updating the one you meant.
Update https://claude.ai/code/artifact/5fbea6f3-… with today's numbers.
CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 # stop the browser openingKesalahan yang mahal adalah memperbarui dari sesi baru. Tanpa URL-nya atau tanpa melampirkannya, sesi baru justru membuat artifact baru alih-alih memperbarui yang Anda maksud — dan sekarang ada dua, satunya tidak dipegang link-nya oleh siapa pun. Melampirkannya dari daftar artifact di awal sesi cuma satu ketukan tombol dan mencegahnya sepenuhnya.
Memahami content security policy-nya menjelaskan hampir semua hal soal rupa artifact. Tidak ada CDN, tidak ada script eksternal, tidak ada fetch ke API Anda — jadi semuanya di-inline, dan halamannya dibangun dari apa yang bisa diungkapkan HTML, CSS dan JavaScript inline sendirian.
# One self-contained page, served under a strict CSP.
External requests Nothing from outside except Google Fonts and
connector data. Scripts, stylesheets, fonts and
images from other hosts are blocked, along with
fetch, XHR and WebSockets. So CSS and JS are
inlined and images embedded as data URIs.
No backend Cannot store form input or authenticate viewers.
Its only route to outside data at view time is
calling MCP connectors.
Single page Relative links do not resolve — nothing is
deployed alongside it. Multi-section content
uses in-page anchors.
File types .html, .htm or .md. Markdown renders as styled HTML.
Rendered size 16 MiB or smaller. Large embedded images are
the usual cause of a size failure.
# Token cost is real: a styled page costs more output than the
# same content as terminal text. Prefer SVG or HTML and CSS over
# embedded raster images, drop interactivity you do not need, and
# have the page summarise large datasets rather than inline them.Sebuah halaman bisa memanggil connector MCP setiap kali seseorang membukanya, jadi ia menampilkan data terkini ketimbang cuplikan dari sesi yang membangunnya. Modelnya tidak biasa dan layak dipahami benar, karena ia menghasilkan perilaku yang mengagetkan orang pada kali pertama.
Bagaimana panggilan connector sebenarnya diselesaikan:
| Sifat | Artinya |
|---|---|
| Tiap penonton memakai connector miliknya sendiri | Dua orang yang membuka dashboard sama bisa melihat data berbeda, tergantung apa yang bisa dijangkau akun masing-masing. Halamannya tidak pernah melihat kredensial siapa pun |
| Penonton menyetujui akses lebih dulu | claude.ai bertanya ke tiap penonton sebelum panggilan connector pertama halamannya; menolak berlaku untuk pemuatan halaman itu |
| Aksi juga memakai akun penontonnya | Kontrol yang mengirim pesan atau memperbarui issue bertindak sebagai siapa pun yang menekannya |
Ada dua konsekuensinya. Artifact yang bersandar pada connector tidak bisa dibagikan ke link publik di paket mana pun — di Pro dan Max, di mana publik adalah satu-satunya pilihan berbagi, artinya ia tetap privat untuk Anda. Dan penonton yang tidak punya connector-nya melihat bagian kosong, bukan pesan error, jadi minta Claude menaruh teks cadangan di tiap bagian hidup yang menyebut connector yang dibutuhkannya.
Berbagi di dalam organisasi Anda membuat orang bisa berkomentar di halamannya, dan Claude bisa membaca serta membalas thread itu. Artifact publik sama sekali tidak menerima komentar — untuk menjadikan artifact yang sudah berkomentar itu publik, thread-nya harus dihapus dulu. Setelah sesi Anda menerbitkan sebuah artifact, ia mengawasi komentar selama sesinya berjalan, dan apa yang terjadi ketika satu komentar masuk tergantung mode izin Anda:
Ada tiga cara menghentikan Claude membalas sendiri dan ketiganya bertahan selama waktu yang berbeda, dan itu desain yang sungguh dipertimbangkan. Satu interupsi menghentikannya di mana-mana, dan ia melanjut lagi pada sebuah artifact ketika Anda menerbitkan artifact itu lagi. Menghentikan task-nya di daftar task menghentikannya untuk artifact itu selama sisa sesi, dan menerbitkan ulang tidak menyalakannya kembali. Dan pintasan mematikan semua agent latar menghentikannya di mana-mana selama sisa sesi. Pilih yang cocok dengan seberapa permanen maksud Anda.
Artifact butuh semua syaratnya terpenuhi, dan ketika satu tidak, Claude menulis file HTML lokal atau bilang ia tidak bisa menerbitkan alih-alih menjelaskan syarat mana yang gagal. Daftarnya layak diketahui karena dua di antaranya adalah konfigurasi yang orang pakai untuk alasan lain.
# Turn artifacts off for your own sessions, three ways:
{ "disableArtifact": true } // settings file
CLAUDE_CODE_DISABLE_ARTIFACT=1 // environment
{ "permissions": { "deny": ["Artifact"] } } // permission rule
# Where they are silently unavailable, and Claude writes a local
# HTML file or says it cannot publish instead:
#
# an API key, gateway token or cloud-provider credential —
# the session must be backed by a claude.ai account
# Amazon Bedrock, Google Cloud's Agent Platform, Microsoft Foundry
# organisations with CMEK, HIPAA, or Zero Data Retention
# Agent SDK, GitHub Action and MCP-server contexts (off by default)
# CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC is setDi paket Team dan Enterprise, kendali tingkat organisasinya lebih rinci daripada satu sakelar, dan salah satunya berpihak ke arah konservatif secara bawaan:
Kebiasaan yang layak dibentuk adalah meminta artifact setiap kali Anda memergoki diri sedang menjelaskan sesuatu yang visual lewat prosa — sebuah perbandingan, penelusuran diff, papan berisi pilihan. Batasannya menjaganya tetap jujur: satu halaman, tanpa backend, semuanya di-inline, yang mencegahnya melenceng jadi aplikasi yang di-hosting seadanya. Dan kalau Anda memang akan membagikan halaman yang bersandar pada connector, taruh teks cadangannya sejak awal, karena mode gagalnya adalah bagian yang tampak rusak, bukan yang menjelaskan dirinya.
Sumber & bacaan lanjutan