Claude Code Artifacts: Terbitkan Halaman dari Sesi

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.

Rekaman pekerjaan, bukan aplikasi

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.

Menerbitkan, memperbarui, dan jebakan duplikat

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 opening

Batasannya adalah desainnya

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.

Data hidup, lewat akun penontonnya

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:

Komentar, dan Claude menjawabnya

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:

• Kalau mode Anda membiarkan Claude memposting tanpa bertanya, ia membaca thread-nya lalu membalas, dan menyunting artifact-nya ketika komentarnya minta perubahan.
• Kalau memposting butuh persetujuan, Anda diberi tahu ada komentar menunggu lalu ditanya dua kali — sekali untuk membaca thread-nya, sekali untuk memposting.
• Di plan mode ia berhenti sepenuhnya sampai Anda keluar dari plan mode dan memintanya.

Di mana ia diam-diam tidak tersedia

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 set

Apa yang dikendalikan administrator

Di paket Team dan Enterprise, kendali tingkat organisasinya lebih rinci daripada satu sakelar, dan salah satunya berpihak ke arah konservatif secara bawaan:

• Berbagi publik mati secara bawaan, jadi anggota hanya berbagi di dalam organisasi sampai seorang Owner menyalakannya. Mematikannya lagi memblokir link publik yang sudah ada tanpa mengubah audiens tiap artifact.
• Panggilan connector dari artifact punya sakelarnya sendiri, terpisah dari sakelar artifact itu sendiri.
• Retensinya bisa diatur, dengan periode terpisah untuk artifact yang masih privat milik penulisnya dan artifact yang sudah dibagikan.
• Menerbitkan, membagikan dan menghapus masing-masing muncul di audit log, dan sebuah compliance API bisa mendaftar, mengambil dan menghapus artifact lintas organisasi.

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.