Langsung ke konten utama
Artifacts sedang dalam beta. Mereka memerlukan paket Team atau Enterprise dan sesi yang masuk dengan /login. Lihat Availability untuk rangkaian lengkap persyaratan.
Artifact adalah halaman web interaktif langsung yang Claude Code terbitkan dari sesi Anda ke URL pribadi di claude.ai. Anda membukanya di browser, dan halaman tersebut diperbarui di tempat saat sesi berlanjut. Bagikan dari header halaman ketika Anda ingin rekan kerja melihatnya juga. Misalnya, gunakan artifact untuk membimbing reviewer melalui pull request dengan diff yang diberi anotasi, membangun dashboard dari data sesi, atau menyimpan timeline investigasi yang terisi saat Claude bekerja.
Artifact terbuka di browser di claude.ai/code/artifact. Header viewer menampilkan judul artifact acme-funnel-fix, tombol Share, dan avatar penulis. Menu Share terbuka dengan toggle Always share latest version, pemilih versi yang menunjukkan Sharing version 2, pemilih audiens Everyone at Acme, dan tombol Copy link. Di bawah header, halaman artifact menampilkan dua mockup mobile berdampingan, bagan corong, dan baris kartu metrik.
Halaman ini mencakup cara untuk:

Kapan menggunakan artifact

Gunakan artifact ketika teks terminal adalah medium yang salah untuk apa yang Claude hasilkan: output yang lebih mudah dilihat dan berinteraksi daripada dibaca baris demi baris. Claude membangun halaman dari apa pun yang dapat dijangkau sesi Anda, termasuk codebase Anda dan data yang ditariknya melalui tools yang terhubung, sehingga halaman dapat menampilkan hal-hal yang memerlukan paragraf untuk dijelaskan. Misalnya, minta Claude untuk:
  • Membimbing reviewer melalui pull request dengan diff yang diberi anotasi
  • Merender dashboard dari data yang sudah ditarik sesi
  • Meletakkan beberapa opsi desain atau implementasi berdampingan
  • Menyimpan timeline investigasi yang terisi saat tugas panjang berjalan
  • Mengirim tautan ke rekan kerja alih-alih menempel output ke Slack
Lihat What you can build untuk prompt yang cocok dengan masing-masing.

Apa yang bukan artifact

Artifact adalah tangkapan pekerjaan, bukan aplikasi. Ini adalah satu halaman yang mandiri tanpa backend, jadi tidak dapat menyimpan input formulir, memanggil API pada waktu tampilan, atau melayani beberapa rute. Untuk alat internal yang dihosting dengan backend, sebarkan di infrastruktur Anda sendiri. Lihat Page constraints untuk rangkaian lengkap batasan.

Buat artifact

Claude dapat menerbitkan artifact dengan sendirinya ketika output cocok untuk halaman, atau Anda dapat memintanya secara langsung. Untuk meminta, beri nama fitur atau jelaskan output visual yang Anda inginkan dalam bahasa biasa. Kandidat yang baik adalah apa pun yang lebih mudah dilihat daripada dibaca sebagai teks, seperti diff yang diberi anotasi, bagan, atau serangkaian opsi untuk dibandingkan. Prompt di bawah ini adalah dua contoh; lihat What you can build untuk pola lainnya.
Make an artifact that walks through this PR with the diff annotated inline.
Build a dashboard artifact of last week's deploy failures by service and keep it updated as you investigate.
Claude menulis halaman ke file HTML atau Markdown di proyek Anda, kemudian menerbitkannya. Sebelum menerbitkan artifact baru, Claude Code meminta izin; mungkin mengatakan sesuatu seperti Claude wants to publish "Deploy failures by service" (deploy-failures.html) to a private page on claude.ai. Menerbitkan ulang artifact yang sudah Anda setujui tidak akan meminta lagi. Pilih Yes untuk menerbitkan. Claude mencetak URL, dan browser Anda membuka ke halaman baru. Tekan Ctrl+] kapan saja untuk membuka kembali artifact terbaru dari terminal. Claude memilih judul artifact dan emoji untuk ikon tab browsernya. Keduanya muncul di galeri artifacts Anda di claude.ai dan di tautan bersama, jadi minta Claude untuk menggunakan judul atau ikon tertentu jika Anda menginginkannya. Untuk menghentikan browser membuka secara otomatis ketika artifact baru diterbitkan, atur CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 di lingkungan Anda. Jika Claude merespons bahwa tidak dapat menerbitkan, atau menulis file HTML lokal tanpa tautan, tool tidak diaktifkan untuk sesi Anda. Periksa persyaratan Availability.

Perbarui artifact

Minta Claude untuk merevisi halaman, atau biarkan tugas yang berjalan lama menerbitkan ulang saat membuat kemajuan. Claude mengedit file yang mendasar dan menerbitkan lagi ke URL yang sama.
Add a per-region breakdown below the summary chart and republish.
Siapa pun yang membuka halaman melihat pembaruan di tempat. Setiap penerbitan menjadi versi, dan dari kontrol Share di header halaman Anda dapat memilih versi mana yang dilihat viewer. Untuk memperbarui artifact dari sesi yang berbeda, berikan Claude URL artifact dan minta untuk merevisi. Tanpa URL, sesi baru selalu membuat artifact baru daripada memperbarui yang sudah ada.
Update https://claude.ai/code/artifact/5fbea6f3-... with today's numbers.

Bagikan artifact

Artifact baru hanya terlihat oleh Anda. Buka di browser Anda dan gunakan kontrol Share di header halaman untuk memberikan akses ke orang-orang tertentu di organisasi Anda, atau ke semua orang di dalamnya. Header menamai Anda sebagai penulis artifact, jadi siapa pun yang Anda bagikan dapat melihat siapa yang menerbitkan halaman. Ini juga menautkan ke galeri Anda di claude.ai/code/artifacts, yang mencantumkan setiap artifact yang telah Anda buat. Berbagi berhenti di organisasi Anda. Viewer harus masuk ke claude.ai sebagai anggota organisasi yang sama yang menerbitkan artifact, dan tidak ada opsi untuk membuat artifact dapat dilihat di luar organisasi. Untuk mengirim konten yang mendasar kepada seseorang di luar organisasi Anda, minta Claude untuk file HTML dan bagikan file tersebut secara langsung. Artifacts dapat dilihat, bukan diedit bersama. Orang yang Anda bagikan melihat setiap versi yang Anda terbitkan tetapi tidak dapat mengubah halaman; Anda tetap menjadi satu-satunya penulis.

Apa yang dapat Anda bangun

Artifact adalah satu halaman HTML, jadi apa pun yang dapat Anda ekspresikan dalam HTML, CSS, dan JavaScript inline berada dalam cakupan. Pola di bawah ini paling sering muncul.

Berjalan melalui perubahan

Minta halaman yang merender diff atau perubahan desain dengan anotasi di samping baris yang relevan, sehingga reviewer dapat membaca alasan Anda di samping kode alih-alih merekonstruksinya dari deskripsi.
Make an artifact that walks through this PR. Render the diff with margin annotations and color-code findings by severity.

Bandingkan alternatif

Minta beberapa varian di satu halaman sehingga Anda dapat mengevaluasinya satu sama lain. Ini berfungsi untuk tata letak, salinan, bentuk API, atau rencana implementasi.
Make an artifact with four distinctly different layouts for the settings panel. Vary density and grouping, and lay them out as a grid with a one-line tradeoff under each.

Sesuaikan dengan kontrol interaktif

Minta slider, toggle, atau bidang input yang terikat pada apa pun yang Anda sesuaikan, sehingga Anda dapat menjelajahi nilai secara langsung alih-alih menjelaskannya.
Build an artifact with sliders for the easing curve, duration, and delay so I can try values on this transition. Show the animation live as I move them.

Bawa hasil kembali ke sesi Anda

Artifact dapat bertindak sebagai editor ringan untuk keputusan yang kemudian Anda serahkan kembali ke Claude. Minta kontrol ekspor yang menghasilkan teks yang dapat Anda tempel ke terminal, sehingga hasil berinteraksi dengan halaman mengalir kembali ke sesi alih-alih tetap di halaman.
Make a triage board artifact with each open issue as a draggable card across Now, Next, Later, and Cut columns. Add a "Copy as prompt" button that gives me the final ordering to paste back here.

Lacak pekerjaan yang sedang berlangsung

Minta Claude untuk menjaga artifact tetap terkini saat tugas panjang berjalan, sehingga siapa pun dengan tautan dapat mengikuti tanpa membaca terminal.
Turn this migration plan into a checklist artifact. Check items off as you complete them and add a note for anything you skip.

Tingkatkan desain visual

Claude menerapkan skill desain bawaan ketika membangun artifact, sehingga halaman mendapatkan palet, tipografi, dan tata letak yang disengaja tanpa prompting tambahan. Skill itu juga mencari sistem desain yang ada di proyek Anda sebelum memilih miliknya sendiri. Untuk menjaga artifacts konsisten dengan branding produk Anda, catat token desain Anda di mana Claude dapat menemukannya, seperti CLAUDE.md proyek atau file tema di repositori Anda:
## Design system

- Colors: primary #1a4d8f, accent #f59e0b, surface #f8fafc
- Typography: Inter for body, JetBrains Mono for code
- Spacing: 8px scale, 6px border radius
Claude memperlakukan sistem desain Anda sebagai prioritas lebih tinggi daripada pilihannya sendiri, dan prompt Anda sebagai prioritas lebih tinggi daripada keduanya. Heading dan format di atas adalah contoh; daftar warna, font, dan spasi yang jelas apa pun berfungsi.

Batasan halaman

Setiap artifact adalah satu halaman yang mandiri. Claude Code membungkus file yang Anda terbitkan dalam shell dokumen HTML dan melayaninya di bawah Content Security Policy (CSP) yang ketat, yang membentuk apa yang dapat dilakukan halaman.
BatasanEfek
Tidak ada permintaan eksternalCSP memblokir skrip, stylesheet, font, dan gambar yang dimuat dari host lain, bersama dengan panggilan fetch, XHR, dan WebSocket. Claude menginline CSS dan JavaScript dan menyematkan gambar sebagai data URI sehingga halaman dirender tanpa permintaan eksternal apa pun.
Tidak ada backendArtifact adalah halaman statis. Tidak dapat menyimpan data yang dikirimkan melalui formulir, mengautentikasi viewer sendiri, atau memanggil API pada waktu tampilan.
Halaman tunggalTautan relatif tidak diselesaikan, karena tidak ada yang disebarkan bersama halaman. Untuk konten multi-bagian, Claude menggunakan jangkar dalam halaman daripada file terpisah.
Jenis file sumberFile yang diterbitkan harus .html, .htm, atau .md. File Markdown dirender sebagai HTML bergaya.
Ukuran yang direnderHalaman yang dirender harus 16 MiB atau lebih kecil. Gambar tertanam besar adalah penyebab umum ketika penerbitan gagal karena ukuran.
Menghasilkan artifact menggunakan token output seperti respons lainnya, dan halaman bergaya lebih intensif token daripada konten yang sama sebagai teks terminal. CSS inline, JavaScript untuk kontrol interaktif, dan terutama gambar yang disematkan sebagai data URI adalah kontributor utama. Untuk mengurangi biaya token artifact:
  • Lebih suka SVG, atau HTML dan CSS, untuk diagram daripada gambar raster tertanam
  • Hilangkan interaktivitas yang tidak Anda butuhkan
  • Buat halaman merangkum dataset besar daripada menginlinenya sepenuhnya

Ketersediaan

Artifacts memerlukan setiap kondisi di bawah. Ketika salah satu tidak terpenuhi, Claude menulis file HTML lokal atau mengatakan tidak dapat menerbitkan.
PersyaratanTersedia ketika
PaketTeam atau Enterprise. Pada paket Team, artifacts diaktifkan secara default. Pada paket Enterprise, admin mengaktifkannya di pengaturan admin claude.ai.
AutentikasiMasuk ke claude.ai dengan /login. Sesi menggunakan kunci API, gateway token, atau kredensial penyedia cloud tidak dapat menerbitkan.
Penyedia modelAnthropic API. Tidak tersedia di Amazon Bedrock, Google Cloud Vertex AI, atau Microsoft Foundry.
Kebijakan organisasiKunci enkripsi yang dikelola pelanggan (CMEK), HIPAA, dan Zero Data Retention tidak diaktifkan untuk organisasi.
PermukaanClaude Code CLI, atau aplikasi desktop Claude versi 1.13576.0 atau lebih baru. Dimatikan secara default di konteks Agent SDK, GitHub Action, dan MCP-server, dan ketika CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC diatur.

Nonaktifkan artifacts

Untuk mematikan artifacts untuk sesi Anda sendiri terlepas dari pengaturan organisasi Anda, gunakan salah satu dari:
MetodePengaturan
File pengaturan"disableArtifact": true
Variabel lingkunganCLAUDE_CODE_DISABLE_ARTIFACT=1
Aturan izinTambahkan Artifact ke permissions.deny

Kelola artifacts untuk organisasi Anda

Admin pada paket Team dan Enterprise mengontrol artifacts dari pengaturan admin claude.ai. Konten artifact disimpan di infrastruktur yang dioperasikan Anthropic dan hanya terlihat oleh anggota terautentikasi dari organisasi penerbit.

Aktifkan atau nonaktifkan artifacts

Untuk mengaktifkan atau menonaktifkan artifacts untuk seluruh organisasi, buka Settings > Claude Code > Capabilities dan gunakan toggle Artifacts. Pada paket Enterprise dengan kontrol akses berbasis peran, Anda dapat membatasi artifacts ke peran tertentu: buka Settings > Roles, edit peran, dan atur izin Artifacts di bawah grup Claude Code.

Atur kebijakan retensi

Untuk mengatur berapa lama artifacts disimpan sebelum penghapusan otomatis, buka Settings > Data & privacy controls. Anda dapat mengatur periode retensi terpisah untuk artifacts yang masih pribadi untuk penulis mereka dan artifacts yang telah dibagikan.

Tinjau log audit

Penerbitan, berbagi, dan menghapus artifact masing-masing muncul di log audit organisasi Anda di bawah jenis acara claude_artifact_*, keluarga yang sama digunakan untuk artifacts yang dibuat dalam percakapan claude.ai.

Daftar putih domain viewer

Viewer di claude.ai memuat setiap artifact dari asal *.claudeusercontent.com yang disandboxkan. Jika organisasi Anda membatasi akses jaringan keluar, tambahkan domain itu ke daftar putih Anda bersama claude.ai. Lihat Network access requirements untuk daftar lengkap.

Daftar dan hapus artifacts dengan Compliance API

Compliance API menyediakan endpoint untuk mencantumkan artifacts organisasi Anda, mengambil konten versi tertentu, dan menghapus artifact:
MetodeEndpoint
GET/v1/compliance/code/artifacts
GET/v1/compliance/code/artifacts/{artifact_id}/versions/{version_id}
DELETE/v1/compliance/code/artifacts/{artifact_id}
Untuk skema permintaan dan respons, lihat referensi Compliance API.