Artifacts: Oturum çıktılarını paylaşılabilir sayfalar olarak yayınlama
Artifacts, Claude Code'un çalışmasını canlı, etkileşimli web sayfalarına dönüştürür. Bu sayfalar kuruluşunuz içinde paylaşabileceğiniz özel bir URL'de yayınlanır.
Not: Artifacts beta aşamasındadır. Team veya Enterprise planı ve /login ile oturum açılmış bir oturum gerektirir. Tam gereksinimler için Kullanılabilirlik bölümüne bakın.
Bir artifact, Claude Code'un oturumunuzdan claude.ai üzerinde özel bir URL'ye yayınladığı canlı, etkileşimli bir web sayfasıdır. Tarayıcıda açarsınız ve oturum devam ettikçe sayfa yerinde güncellenir. Bir takım arkadaşınızın da görmesini istediğinizde sayfa başlığından paylaşabilirsiniz.
Örneğin, bir artifact'i şunlar için kullanabilirsiniz: bir pull request'i açıklamalı diff'lerle inceleyen birine göstermek, oturum verilerinden bir pano oluşturmak veya Claude çalışırken doldurulan bir araştırma zaman çizelgesi tutmak.
Bu sayfa şunları kapsar:
- Artifact'i ne zaman kullanacağınıza karar verme
- Artifact oluşturma, güncelleme ve paylaşma
- Daha zengin sayfalar için prompting kalıpları uygulama
- Ürününüzün markasıyla uyumlu artifact'ler için kendi tasarım sisteminizi uygulama
- Sayfa kısıtlamalarını ve kullanılabilirlik gereksinimlerini anlama
- Kuruluşunuz için artifact'leri devre dışı bırakma veya yönetme
Artifact ne zaman kullanılır (When to use an artifact)
Bir artifact'i, terminal metninin Claude'un ürettiği çıktı için yanlış ortam olduğu durumlarda kullanın: satır satır okumaktansa bakması ve etkileşim kurması daha kolay olan çıktılar. Claude, kod tabanınız ve bağlı araçlarınız aracılığıyla çektiği veriler dahil olmak üzere oturumunuzun erişebildiği her şeyden sayfayı oluşturur, böylece sayfa paragraflarla açıklanması gereken şeyleri gösterebilir.
Örneğin, Claude'dan şunları isteyin:
- Bir pull request'i açıklamalı diff'lerle incelemesi
- Oturumun zaten çektiği verilerden bir pano oluşturması
- Birkaç tasarım veya uygulama seçeneğini yan yana göstermesi
- Uzun bir görev çalışırken doldurulan bir araştırma zaman çizelgesi tutması
- Çıktıyı Slack'e yapıştırmak yerine bir takım arkadaşına bağlantı göndermesi
Bunların her biriyle eşleşen prompt'lar için "Ne oluşturabilirsiniz" bölümüne bakın.
Artifact ne değildir (What an artifact is not)
Bir artifact, çalışmanın bir yakalamasıdır, bir uygulama değildir. Tek bir kendi kendine yeten sayfadır ve arka ucu yoktur; bu nedenle form girdisi depolayamaz, görüntüleme zamanında API çağıramaz veya birden çok rota sunamaz. Arka ucu olan barındırılan bir dahili araç için, bunun yerine kendi altyapınıza dağıtın. Tam sınırlar için "Sayfa kısıtlamaları" bölümüne bakın.
Artifact oluşturma (Create an artifact)
Claude, çıktı bir sayfaya uygun olduğunda kendi başına bir artifact yayınlayabilir veya doğrudan bir tane isteyebilirsiniz. İstemek için, özelliği adlandırın veya istediğiniz görsel çıktıyı düz bir dille tanımlayın. İyi bir aday, metin olarak okumaktansa görmesi daha kolay olan herhangi bir şeydir: açıklamalı bir diff, bir grafik veya karşılaştırılacak bir dizi seçenek gibi.
Aşağıdaki prompt'lar iki örnektir; daha fazla kalıp için "Ne oluşturabilirsiniz" bölümüne bakın.
Bu PR'yi diff'leri satır içinde açıklamalı olarak gösteren bir artifact yap.
Geçen haftanın servislere göre dağıtım hatalarının bir pano artifact'ini oluştur ve araştırırken güncel tut.
Claude sayfayı projenizde bir HTML veya Markdown dosyasına yazar, ardından yayınlar. Yeni bir artifact yayınlamadan önce Claude Code izin ister; şöyle bir şey söyleyebilir: "Claude, 'Servislere göre dağıtım hataları' (deploy-failures.html) dosyasını claude.ai'de özel bir sayfaya yayınlamak istiyor." Daha önce onayladığınız bir artifact'i yeniden yayınlamak tekrar sormaz. Evet'i seçerek yayınlayın.
Claude URL'yi yazdırır ve tarayıcınız yeni sayfaya açılır. En son artifact'i terminalden yeniden açmak için istediğiniz zaman Ctrl+] tuşuna basın.
Claude, artifact'in başlığını ve tarayıcı sekmesi simgesi için bir emoji seçer. Her ikisi de claude.ai'deki artifact galerinizde ve paylaşılan bağlantılarda görünür, bu nedenle belirli bir başlık veya simge istiyorsanız Claude'dan bunu kullanmasını isteyin.
Yeni bir artifact yayınlandığında tarayıcının otomatik olarak açılmasını durdurmak için ortamınızda CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 ayarlayın.
Claude yayınlayamadığını söylerse veya bağlantı olmadan yerel bir HTML dosyası yazarsa, araç oturumunuz için etkinleştirilmemiştir. Kullanılabilirlik gereksinimlerini kontrol edin.
Artifact güncelleme (Update an artifact)
Claude'dan sayfayı revize etmesini isteyin veya uzun süren bir görevin ilerledikçe yeniden yayınlamasına izin verin. Claude temel dosyayı düzenler ve aynı URL'ye yeniden yayınlar.
Özet grafiğin altına bölgelere göre bir döküm ekle ve yeniden yayınla.
Sayfayı açık olan herkes güncellemeyi yerinde görür. Her yayın bir sürüm olur ve sayfa başlığındaki Paylaş kontrolünden izleyicilerin hangi sürümü göreceğini seçebilirsiniz.
Farklı bir oturumdan bir artifact'i güncellemek için Claude'a artifact'in URL'sini verin ve revize etmesini isteyin. URL olmadan, yeni bir oturum mevcut bir artifact'i güncellemek yerine her zaman yeni bir artifact oluşturur.
https://claude.ai/code/artifact/5fbea6f3-... adresini bugünün rakamlarıyla güncelle.
Artifact paylaşma (Share an artifact)
Yeni bir artifact yalnızca size görünür. Tarayıcınızda açın ve sayfa başlığındaki Paylaş kontrolünü kullanarak kuruluşunuzdaki belirli kişilere veya herkese erişim verin. Başlık sizi artifact'in yazarı olarak adlandırır, böylece paylaştığınız herkes sayfayı kimin yayınladığını görebilir. Ayrıca, oluşturduğunuz her artifact'i listeleyen claude.ai/code/artifacts adresindeki galerinize bağlantı verir.
Paylaşım kuruluşunuzda durur. İzleyiciler, artifact'i yayınlayan kuruluşun bir üyesi olarak claude.ai'de oturum açmalıdır ve artifact'i kuruluş dışında görüntülenebilir yapma seçeneği yoktur. İçeriği kuruluşunuz dışındaki birine göndermek için Claude'dan HTML dosyasını isteyin ve dosyayı doğrudan paylaşın.
Artifact'ler görüntülenebilir, birlikte düzenlenebilir değildir. Paylaştığınız kişiler yayınladığınız her sürümü görür ancak sayfayı değiştiremez; yalnızca siz yazar olarak kalırsınız.
Ne oluşturabilirsiniz (What you can build)
Bir artifact tek bir HTML sayfasıdır, bu nedenle HTML, CSS ve satır içi JavaScript ile ifade edebileceğiniz her şey kapsam dahilindedir. Aşağıdaki kalıplar en sık karşınıza çıkar.
Bir değişikliği incelemek (Walk through a change)
İlgili satırların yanında açıklamalar bulunan bir diff veya tasarım değişikliği oluşturan bir sayfa isteyin, böylece inceleyenler gerekçenizi kodun yanında okuyabilir, bir açıklamadan yeniden oluşturmak zorunda kalmaz.
Bu PR'yi inceleyen bir artifact yap. Diff'i kenar boşluğu açıklamalarıyla oluştur ve bulguları ciddiyete göre renk kodla.
Alternatifleri karşılaştırmak (Compare alternatives)
Bir sayfada birkaç varyant isteyin, böylece bunları birbirine karşı değerlendirebilirsiniz. Bu, düzenler, metin, API şekilleri veya uygulama planları için çalışır.
Ayarlar paneli için dört farklı düzene sahip bir artifact yap. Yoğunluk ve gruplamayı değiştir ve her birinin altında tek satırlık bir değerlendirme ile bir ızgara olarak düzenle.
Etkileşimli kontrollerle ayarlama (Tune with interactive controls)
Ayarladığınız şeye bağlı kaydırıcılar, geçişler veya giriş alanları isteyin, böylece değerleri tanımlamak yerine doğrudan keşfedebilirsiniz.
Yumuşatma eğrisi, süre ve gecikme için kaydırıcılar içeren bir artifact oluştur, böylece bu geçişte değerleri deneyebilirim. Onları hareket ettirdikçe animasyonu canlı göster.
Sonucu oturuma geri getirme (Bring the result back to your session)
Bir artifact, daha sonra Claude'a geri verdiğiniz bir karar için hafif bir düzenleyici görevi görebilir. Terminale yapıştırabileceğiniz metin üreten bir dışa aktarma kontrolü isteyin, böylece sayfayla etkileşimin sonucu sayfada kalmak yerine oturuma geri akar.
Her açık sorunu Şimdi, Sonra, Daha Sonra ve Kes sütunlarında sürüklenebilir bir kart olarak gösteren bir triyaj panosu artifact'i yap. Bana buraya yapıştırmam için son sıralamayı veren "Prompt olarak kopyala" butonu ekle.
Devam eden çalışmayı izleme (Track work in progress)
Uzun bir görev çalışırken Claude'dan bir artifact'i güncel tutmasını isteyin, böylece bağlantıya sahip olan herkes terminali okumadan takip edebilir.
Bu geçiş planını bir kontrol listesi artifact'ine dönüştür. Tamamladıkça maddeleri işaretle ve atladığın her şey için bir not ekle.
Görsel tasarımı iyileştirme (Improve the visual design)
Claude, bir artifact oluştururken yerleşik bir tasarım becerisi uygular, böylece sayfalar ekstra prompt'lama olmadan kasıtlı bir palet, tipografi ve düzen alır. Bu beceri ayrıca kendi tasarımını seçmeden önce projenizde mevcut bir tasarım sistemi arar.
Artifact'lerin ürününüzün markasıyla tutarlı olması için tasarım token'larınızı Claude'un bulabileceği bir yere kaydedin; örneğin projenin CLAUDE.md dosyasına veya deponuzdaki bir tema dosyasına:
## Design system
- Colors: primary #1a4d8f, accent #f59e0b, surface #f8fafc
- Typography: Inter for body, JetBrains Mono for code
- Spacing: 8px scale, 6px border radius
Claude, tasarım sisteminizi kendi seçimlerinden daha yüksek öncelikli, prompt'unuzu ise her ikisinden de daha yüksek öncelikli olarak ele alır. Yukarıdaki başlık ve biçim bir örnektir; renkler, yazı tipleri ve boşlukların herhangi bir net listesi işe yarar.
Sayfa kısıtlamaları (Page constraints)
Her artifact tek bir kendi kendine yeten sayfadır. Claude Code yayınladığınız dosyayı bir HTML belge kabuğuna sarar ve katı bir İçerik Güvenlik Politikası (CSP) altında sunar; bu da sayfanın neler yapabileceğini şekillendirir.
| Kısıtlama | Etki |
|---|---|
| Harici istek yok | CSP, başka bir sunucudan yüklenen script'leri, stil sayfalarını, yazı tiplerini ve görselleri, ayrıca fetch, XHR ve WebSocket çağrılarını engeller. Claude, CSS ve JavaScript'i satır içine alır ve görselleri data URI olarak gömer, böylece sayfa hiçbir harici istek olmadan oluşturulur. |
| Arka uç yok | Artifact statik bir sayfadır. Form aracılığıyla gönderilen verileri depolayamaz, izleyicileri kendisi doğrulayamaz veya görüntüleme zamanında API çağıramaz. |
| Tek sayfa | Göreceli bağlantılar çözümlenmez çünkü sayfanın yanında başka bir şey dağıtılmaz. Çok bölümlü içerik için Claude ayrı dosyalar yerine sayfa içi bağlantılar kullanır. |
| Kaynak dosya türleri | Yayınlanan dosya .html, .htm veya .md olmalıdır. Markdown dosyaları stillendirilmiş HTML olarak oluşturulur. |
| Oluşturulan boyut | Oluşturulan sayfa 16 MiB veya daha küçük olmalıdır. Büyük gömülü görseller, bir yayının boyut nedeniyle başarısız olmasının olağan nedenidir. |
Bir artifact oluşturmak, diğer yanıtlar gibi çıktı token'ları kullanır ve stillendirilmiş bir sayfa, aynı içeriğin terminal metni olmasından daha fazla token tüketir. Satır içi CSS, etkileşimli kontroller için JavaScript ve özellikle data URI olarak gömülü görseller ana katkıda bulunanlardır.
Bir artifact'in token maliyetini azaltmak için:
- Diyagramlar için gömülü raster görseller yerine SVG veya HTML ve CSS tercih edin
- İhtiyacınız olmayan etkileşimliliği atlayın
- Sayfanın büyük veri kümelerini tamamen satır içine almak yerine özetlemesini sağlayın
Kullanılabilirlik (Availability)
Artifact'ler aşağıdaki koşulların her birini gerektirir. Bir koşul karşılanmadığında, Claude yerel bir HTML dosyası yazar veya yayınlayamadığını söyler.
| Gereksinim | Mevcut olduğu durum |
|---|---|
| Plan | Team veya Enterprise. Team planlarında artifact'ler varsayılan olarak açıktır. Enterprise planlarında bir yönetici bunları claude.ai yönetici ayarlarından etkinleştirir. |
| Kimlik doğrulama | /login ile claude.ai'de oturum açılmış olmalı. API anahtarı, ağ geçidi token'ı veya bulut sağlayıcı kimlik bilgisi kullanan oturumlar yayınlayamaz. |
| Model sağlayıcı | Anthropic API. Amazon Bedrock, Google Cloud Vertex AI veya Microsoft Foundry'de kullanılamaz. |
| Kuruluş politikası | Müşteri tarafından yönetilen şifreleme anahtarları (CMEK), HIPAA ve Sıfır Veri Saklama (Zero Data Retention) kuruluş için etkinleştirilmemiş olmalıdır. |
| Yüzey | Claude Code CLI veya Claude masaüstü uygulaması sürüm 1.13576.0 veya üzeri. Agent SDK, GitHub Action ve MCP-sunucu bağlamlarında ve CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC ayarlandığında varsayılan olarak kapalıdır. |
Artifact'leri devre dışı bırakma (Disable artifacts)
Kuruluş ayarınızdan bağımsız olarak kendi oturumlarınız için artifact'leri kapatmak için aşağıdakilerden herhangi birini kullanın:
| Yöntem | Ayar |
|---|---|
| Ayarlar dosyası | "disableArtifact": true |
| Ortam değişkeni | CLAUDE_CODE_DISABLE_ARTIFACT=1 |
| İzin kuralı | permissions.deny listesine Artifact ekleyin |
Kuruluşunuz için artifact'leri yönetme (Manage artifacts for your organization)
Team ve Enterprise planlarındaki yöneticiler, artifact'leri claude.ai yönetici ayarlarından kontrol eder. Artifact içeriği Anthropic tarafından işletilen altyapıda depolanır ve yalnızca yayınlayan kuruluşun kimliği doğrulanmış üyelerine görünür.
Artifact'leri etkinleştirme veya devre dışı bırakma (Enable or disable artifacts)
Tüm kuruluş için artifact'leri etkinleştirmek veya devre dışı bırakmak için Ayarlar > Claude Code > Yetenekler'e gidin ve Artifact'ler geçişini kullanın. Rol tabanlı erişim kontrolü olan Enterprise planlarında, artifact'leri belirli rollere de kapsamlandırabilirsiniz: Ayarlar > Roller'e gidin, bir rolü düzenleyin ve Claude Code grubu altında Artifact'ler iznini ayarlayın.
Saklama politikası belirleme (Set a retention policy)
Artifact'lerin otomatik silinmeden önce ne kadar süre saklanacağını belirlemek için Ayarlar > Veri ve gizlilik kontrolleri'ne gidin. Yazarına özel kalan artifact'ler ve paylaşılmış artifact'ler için ayrı saklama süreleri belirleyebilirsiniz.
Denetim günlüğünü inceleme (Review the audit log)
Bir artifact'i yayınlama, paylaşma ve silme işlemlerinin her biri, kuruluşunuzun denetim günlüğünde claude_artifact_* olay türleri altında görünür; bu, claude.ai sohbetlerinde oluşturulan artifact'ler için kullanılanla aynı ailedir.
Görüntüleyici alan adını beyaz listeye ekleme (Allowlist the viewer domain)
claude.ai'deki görüntüleyici, her artifact'i korumalı bir *.claudeusercontent.com kaynağından yükler. Kuruluşunuz giden ağ erişimini kısıtlıyorsa, bu alan adını claude.ai ile birlikte beyaz listenize ekleyin. Tam liste için Ağ erişim gereksinimleri bölümüne bakın.
Uyumluluk API'si ile artifact'leri listeleme ve silme (List and delete artifacts with the Compliance API)
Uyumluluk API'si, bir kuruluşun artifact'lerini listeleme, belirli bir sürümün içeriğini alma ve bir artifact'i silme uç noktaları sağlar:
| Yöntem | Uç nokta |
|---|---|
| GET | /v1/compliance/code/artifacts |
| GET | /v1/compliance/code/artifacts/{artifact_id}/versions/{version_id} |
| DELETE | /v1/compliance/code/artifacts/{artifact_id} |
İstek ve yanıt şemaları için Uyumluluk API referansına bakın.
İlgili kaynaklar (Related resources)
- Artifact'lerle eşleşen prompting kalıplarını ve iş akışlarını keşfedin
- Yeniden kullandığınız bir artifact prompt'unu bir beceriye (skill) dönüştürün, böylece onu bir komut olarak çağırabilirsiniz
- Claude'un bir artifact'e canlı veri çekebilmesi için MCP sunucuları bağlayın
Örnek kullanım senaryosu
Bir e-ticaret ekibinde çalıştığınızı ve geçen haftaki ödeme başarısızlıklarını araştırdığınızı varsayalım. Claude Code oturumunuzda /login ile claude.ai'de oturum açtınız ve logları analiz ettiniz. Şimdi bulgularınızı ekibinizle paylaşmak istiyorsunuz.
Claude'a şu prompt'u verin: "Geçen haftanın ödeme başarısızlıklarını servislere göre gösteren bir pano artifact'i oluştur. Her servis için başarısızlık sayısı, ortalama gecikme ve son 24 saatteki trendi gösteren bir grafik ekle."
Claude, "Ödeme Başarısızlıkları Panosu" adlı bir artifact oluşturmak istediğini söyler. Evet'i seçerek onaylayın.
Tarayıcınızda açılan sayfada, her servis için metrik kartları ve bir trend grafiği görürsünüz. Sayfa başlığındaki Paylaş butonuna tıklayın.
Paylaş menüsünden "Acme Ekibi"ni seçin ve bağlantıyı kopyalayın. Bağlantıyı Slack'te ekibinizle paylaşın.
Araştırmaya devam ederken Claude'a şunu söyleyin: "Panoya bölgelere göre döküm ekle ve yeniden yayınla." Claude sayfayı günceller; Slack'teki bağlantıyı açık tutan ekip üyeleri güncellemeyi yerinde görür.
Araştırma bittiğinde, son artifact sürümünü ekibin referansı için paylaşılmış halde bırakın. Artifact, kuruluş politikasına göre otomatik olarak silinecektir.