Bagikan keluaran sesi sebagai artifacts
Artifacts mengubah pekerjaan Claude Code menjadi halaman interaktif langsung di URL pribadi yang dapat Anda bagikan di dalam organisasi Anda.
{/* plan-availability: feature=artifacts plans=team,enterprise providers=anthropic */}
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.
Halaman ini mencakup cara untuk:
- Memutuskan kapan menggunakan artifact
- Membuat, memperbarui, dan membagikan artifact
- Menerapkan pola prompting untuk halaman yang lebih kaya
- Menerapkan sistem desain Anda sendiri sehingga artifacts cocok dengan branding produk Anda
- Memahami batasan halaman dan persyaratan ketersediaan
- Menonaktifkan atau mengelola artifacts untuk organisasi Anda
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.
| Batasan | Efek |
|---|---|
| Tidak ada permintaan eksternal | CSP 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 backend | Artifact adalah halaman statis. Tidak dapat menyimpan data yang dikirimkan melalui formulir, mengautentikasi viewer sendiri, atau memanggil API pada waktu tampilan. |
| Halaman tunggal | Tautan relatif tidak diselesaikan, karena tidak ada yang disebarkan bersama halaman. Untuk konten multi-bagian, Claude menggunakan jangkar dalam halaman daripada file terpisah. |
| Jenis file sumber | File yang diterbitkan harus .html, .htm, atau .md. File Markdown dirender sebagai HTML bergaya. |
| Ukuran yang dirender | Halaman 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.
| Persyaratan | Tersedia ketika |
|---|---|
| Paket | Team atau Enterprise. Pada paket Team, artifacts diaktifkan secara default. Pada paket Enterprise, admin mengaktifkannya di pengaturan admin claude.ai. |
| Autentikasi | Masuk ke claude.ai dengan /login. Sesi menggunakan kunci API, gateway token, atau kredensial penyedia cloud tidak dapat menerbitkan. |
| Penyedia model | Anthropic API. Tidak tersedia di Amazon Bedrock, Google Cloud Vertex AI, atau Microsoft Foundry. |
| Kebijakan organisasi | Kunci enkripsi yang dikelola pelanggan (CMEK), HIPAA, dan Zero Data Retention tidak diaktifkan untuk organisasi. |
| Permukaan | Claude 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:
| Metode | Pengaturan |
|---|---|
| File pengaturan | "disableArtifact": true |
| Variabel lingkungan | CLAUDE_CODE_DISABLE_ARTIFACT=1 |
| Aturan izin | Tambahkan 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:
| Metode | Endpoint |
|---|---|
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.
Sumber daya terkait
- Jelajahi pola prompting dan alur kerja yang berpasangan dengan artifacts
- Ubah prompt artifact yang Anda gunakan kembali menjadi skill sehingga Anda dapat memanggilnya sebagai perintah
- Hubungkan server MCP sehingga Claude dapat menarik data langsung ke artifact