Artifacts estão disponíveis nos planos Pro, Max, Team e Enterprise e exigem uma sessão conectada com
/login. Consulte Disponibilidade para o conjunto completo de requisitos.
Quando usar um artifact
Use um artifact quando o texto do terminal é o meio errado para o que Claude produziu: saída que é mais fácil de visualizar e interagir do que ler linha por linha. Claude constrói a página a partir de qualquer coisa que sua sessão possa alcançar, incluindo sua base de código e dados que ela extrai através de suas ferramentas conectadas, portanto a página pode mostrar coisas que levariam parágrafos para descrever. Por exemplo, peça a Claude para:- Guiar um revisor através de um pull request com diffs anotados
- Renderizar um dashboard a partir de dados que a sessão já extraiu
- Dispor várias opções de design ou implementação lado a lado
- Manter uma linha do tempo de investigação que se preenche enquanto uma tarefa longa é executada
- Enviar a um colega um link em vez de colar saída no Slack
- Publicar um quadro de status que extrai dados atualizados através de conectores MCP cada vez que alguém o abre
O que um artifact não é
Um artifact é uma captura de trabalho: uma página única e autossuficiente sem backend, portanto não pode servir múltiplas rotas. Para uma ferramenta interna hospedada com um backend, implante-a em sua própria infraestrutura. Veja Restrições de página para o conjunto completo de limites.Criar um artefato
Claude pode publicar um artefato por conta própria quando a saída é adequada para uma página, ou você pode solicitar um diretamente. Para solicitar, nomeie o recurso ou descreva a saída visual que deseja em linguagem simples. Um bom candidato é qualquer coisa mais fácil de ver do que de ler como texto, como um diff anotado, um gráfico ou um conjunto de opções para comparar. Os prompts abaixo são dois exemplos; consulte O que você pode construir para mais padrões.- Modo Auto: o classificador revisa a publicação em vez de solicitar a você, para que Claude possa publicar uma página sem você ver um prompt. Qual modo suas sessões começam depende do seu plano; consulte o modo de permissão inicial.
- Modos Manual e Aceitar edições: Claude Code solicita permissão; pode dizer algo como
Claude wants to publish deploy-failures.html, uploading it to claude.ai (Anthropic's servers) to host as the page "Deploy failures by service", private to you until you share it. Selecione Sim para publicar.
- Claude declara uma capacidade de tempo de execução para a página, como chamadas de conector ou downloads de arquivo
- Você compartilhou publicamente
- Você compartilhou com pessoas específicas ou sua organização com a versão mais recente escolhida como a versão que os visualizadores veem
Ctrl+] a qualquer momento para reabrir o artefato mais recente da sessão.
Claude escolhe o título do artefato e um emoji, e ambos aparecem em sua galeria de artefatos no claude.ai e em links compartilhados. Claude também pode escolher um ícone de aba do navegador que corresponda ao que a página é, como um gráfico ou um calendário. Peça a Claude por um título, emoji ou ícone de aba específico se desejar um.
Para impedir que o navegador abra automaticamente quando um novo artefato é publicado, defina CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 em seu ambiente.
Se Claude responder que não pode publicar, ou escrever um arquivo HTML local sem um link, a ferramenta não está habilitada para sua sessão. Verifique os requisitos de Disponibilidade.
Atualizar um artefato
Peça ao Claude para revisar a página, ou deixe uma tarefa de longa duração republicar conforme faz progresso. Claude edita o arquivo subjacente e publica novamente para a mesma URL./artifacts. Sem nenhum dos dois, uma nova sessão cria um novo artefato em vez de atualizar um.
Encontre um artefato novamente
Execute/artifacts no Claude Code para listar todos os artefatos que você possui e todos os artefatos compartilhados com você. Selecione um e pressione o para abri-lo no seu navegador ou c para copiar seu link. Pressione Enter para anexá-lo à sessão atual; antes da v2.1.216, Enter o abria no seu navegador. Claude Code lê a lista da sua conta claude.ai, portanto funciona em uma nova sessão e após /clear, quando o link saiu do terminal. Requer Claude Code v2.1.208 ou posterior.
Compartilhar um artefato
Um novo artefato é visível apenas para você. Para compartilhá-lo, abra o artefato no seu navegador e use o controle Compartilhar no cabeçalho da página. O cabeçalho também vincula à sua galeria em claude.ai/code/artifacts, que lista todos os artefatos que você criou. Os visualizadores em sua organização podem ver quem publicou a página: em um artefato compartilhado dentro de sua organização, seu nome está no menu de título, e em um artefato público está no cabeçalho da página para visualizadores conectados em sua organização. Um visualizador que abre um link público sem se conectar, ou de fora de sua organização, vê o rótuloO conteúdo é gerado pelo usuário e não verificado. em vez de seu nome.
Quem você pode compartilhar depende do seu plano:
- Dentro de sua organização: nos planos Team e Enterprise, conceda acesso a pessoas específicas em sua organização, ou a todos nela. Os visualizadores se conectam ao claude.ai como membros de sua organização para ver a página.
- Publicamente: compartilhe um link que qualquer pessoa na internet possa abrir, sem necessidade de conexão ao claude.ai. Nos planos Pro e Max, um link público é a única maneira de compartilhar um artefato. Nos planos Team e Enterprise, o compartilhamento público está desativado até que um Proprietário o ative para a organização.
Deixar alguém editar com você
As pessoas com quem você compartilha são visualizadores por padrão: elas veem cada versão que você publica, mas não podem alterar a página. Nos planos Team e Enterprise, você também pode tornar alguém um editor. Na caixa de diálogo de compartilhamento, adicione uma pessoa e mude sua função de visualizador para editor. Um editor publica novas versões da mesma forma que você atualiza o artefato de outra sessão: ele fornece ao Claude a URL do artefato, ou o anexa de/artifacts, e Claude extrai o conteúdo atual e republica com suas alterações. Todos com a página aberta veem cada atualização ao vivo.
Ler um artefato compartilhado com você
Quando alguém compartilha um artefato com você, você pode fazer com que Claude o leia: forneça a Claude sua URL ou anexe-o de/artifacts.
Claude lê uma página que outra pessoa escreveu da mesma forma que lê uma página da web com WebFetch: ele obtém um resumo do que foi solicitado em vez da página bruta, e o resumo relata instruções escritas na página em vez de transmiti-las. Claude Code também salva o código-fonte completo da página em um arquivo local, que Claude pode abrir quando precisa do conteúdo exato, como para republicar o artefato como um editor.
Coletar comentários em um artefato
Quando você compartilha um artefato dentro de sua organização, as pessoas com as quais você o compartilha podem deixar comentários na página, e você pode fazer com que Claude leia esses comentários e responda a eles. Você precisa do Claude Code v2.1.221 ou posterior e de um plano Team ou Enterprise, porque apenas um artefato que você compartilha dentro de sua organização recebe comentários. Claude lê os comentários em dois casos:- Você pede a Claude para lê-los: forneça a Claude a URL do artefato e peça pelos comentários. Claude lista cada thread e marca os comentários que alguém que pode editar o artefato enviou para ele.
- Alguém que pode editar o artefato envia um comentário para Claude: em uma thread na página, ele envia um comentário com Send to Claude, ou menciona
@claudeem um. De qualquer forma, ele ativa a thread.
Comments aren't available while this Artifact is shared publicly. Para mudar um artefato que já tem threads de comentários para um link público, delete as threads primeiro.
Para pedir os comentários você mesmo, forneça a Claude a URL:
- Você está executando Claude Code v2.1.221 ou posterior.
- Você não está em sua primeira sessão desde que instalou Claude Code ou atualizou de uma versão anterior à v2.1.221. Nessa primeira sessão após uma instalação ou atualização, Claude pode não conseguir ler comentários ainda; inicie uma nova sessão e peça novamente.
- Você não desativou a busca de feature-flag.
Deixar Claude responder a comentários por conta própria
Depois que sua sessão publica um artefato, Claude Code observa esse artefato em busca de comentários enquanto a sessão é executada. Quando alguém que pode editar o artefato envia um comentário para Claude, ele chega à sua sessão imediatamente, e Claude pode ler a thread e responder sem você pedir. Você precisa do Claude Code v2.1.228 ou posterior. Se você desativou a busca de feature-flag, Claude Code não observa comentários. Seu modo de permissão decide o que Claude faz quando um comentário enviado chega:- Claude responde por conta própria: quando seu modo de permissão permite que Claude poste a resposta sem pedir a você, Claude lê a thread e responde, e edita o artefato quando o comentário pede uma alteração. Você vê
Auto-replied to comment thread on Artifact: <name>ouAuto-edited Artifact: <name> in response to a comment thread. - Claude espera por você: fora do plan mode, quando postar a resposta precisaria de sua aprovação, você vê
Comments are waiting on Artifact: <name>. Claude então pede sua aprovação para ler a thread, e novamente para postar a resposta. - Claude pausa no plan mode: você vê
Comments are waiting on Artifact: <name>, e Claude não responde até você sair do plan mode e pedir a ele para ler e responder.
Comments are waiting on Artifact: <name> uma vez, e Claude retoma conforme os comentários dessa hora envelhecem.
Execute /tasks para ver cada artefato que sua sessão está observando, listado como uma tarefa de atualizações ao vivo. Você pode impedir que Claude responda por conta própria de qualquer uma destas formas:
- Pressione Ctrl+C uma vez em um prompt ocioso: Claude pausa de responder em cada artefato que sua sessão está observando. As respostas começam novamente depois que você envia sua próxima mensagem.
- Pare a tarefa em
/tasks: Claude para de responder nesse artefato até você pedir a ele para retomar as respostas lá. Publicar o artefato novamente não inicia as respostas novamente, e a parada ainda se aplica quando você retoma a sessão mais tarde. - Pressione
Ctrl+X Ctrl+Kduas vezes em 3 segundos: o atalho que para cada subagente de fundo em execução também para Claude de responder em cada artefato pelo resto da sessão. Pedir a Claude para retomar as respostas não desfaz essa parada.
Extrair dados ao vivo com conectores MCP
Um artefato pode chamar conectores MCP cada vez que alguém o visualiza, para que a página mostre dados atuais em vez de um instantâneo da sessão que a construiu. Chamadas de conectores de artefatos estão disponíveis nos planos Pro, Max, Team e Enterprise e exigem Claude Code v2.1.209 ou posterior. Em versões anteriores, Claude publica a página com os dados que a sessão coletou durante sua construção. Para criar uma página com suporte de conectores, nomeie o conector e os dados que deseja em seu prompt:.mcp.json, podem fornecer dados enquanto Claude constrói a página, mas a página publicada não pode chamá-los.
A página busca dados quando carrega e pode atualizar em um intervalo ou quando um visualizador usa um controle de atualização na página. As respostas são armazenadas em cache no navegador do visualizador, para que uma página reabierta seja renderizada a partir das respostas em cache imediatamente e depois seja atualizada com resultados frescos.
Como as chamadas de conectores funcionam para visualizadores
Quando uma página publicada chama um conector, a chamada usa a conta da pessoa que está visualizando a página, não a conta da pessoa que a publicou:- Cada visualizador usa seus próprios conectores: as chamadas passam pelas ferramentas conectadas da conta de visualização, para que duas pessoas que abram o mesmo painel possam ver dados diferentes dependendo do que suas contas podem acessar. A página nunca vê as credenciais de ninguém; claude.ai faz as chamadas em nome da página.
- Os visualizadores aprovam o acesso primeiro: claude.ai pede permissão a cada visualizador antes da primeira chamada de conector da página. Um visualizador que recusa, ou que não conectou um conector que a página usa, ainda vê a página sem suas seções ao vivo.
- As ações também usam a conta do visualizador: uma página pode oferecer controles que invocam ferramentas de conectores com efeitos colaterais, como postar uma mensagem ou atualizar um problema. A ação passa pela conta de quem seleciona o controle.
A página não mostra dados ao vivo para um visualizador
Quando uma página com suporte de conectores é renderizada mas suas seções ao vivo permanecem vazias para alguém com quem você a compartilhou, trabalhe através dessas causas:- O visualizador não conectou o conector: conectores são por conta, então cada visualizador precisa de sua própria conexão para cada conector que a página chama. Ele pode adicionar um em Settings > Connectors em claude.ai e depois recarregar a página.
- O visualizador recusou a solicitação de permissão: uma recusa dura pelo resto desse carregamento de página. Recarregar a página traz a solicitação de permissão de volta.
- As chamadas de conectores estão desativadas para a organização: um Proprietário controla o toggle Enable artifact connectors nas configurações de administrador.
- A página chama nomes de ferramentas que o conector não expõe: as seções afetadas permanecem vazias para todos, incluindo você. Isso pode acontecer quando uma página nomeia as ferramentas individuais atrás de um conector estilo gateway que expõe apenas algumas de suas próprias ferramentas. Peça a Claude para corrigir os nomes das ferramentas que a página chama e publicá-la novamente. Quando Claude publica a página e as ferramentas desse conector estão disponíveis em sua sessão, Claude Code verifica os nomes das ferramentas que a página declara contra elas, avisa Claude sobre nomes que não correspondem e recusa a publicação quando nenhum corresponde. Antes da v2.1.265, ela publicava a página sem verificá-los.
Ofereça um download de arquivo
Um artefato pode oferecer aos visualizadores um arquivo que a página gera, como uma exportação CSV de uma tabela ou um PNG de um gráfico. O visualizador o salva através de um controle de download na página, como um botão. Downloads de arquivo são uma capacidade de tempo de execução que claude.ai ativa por conta, portanto Claude verifica se sua conta possui essa capacidade antes de construir o controle. Os visualizadores não podem salvar um arquivo de um link de download comum ou de um script na página, porque o visualizador de artefatos em claude.ai bloqueia qualquer download que a página inicia por si mesma, incluindo links para URLsdata: ou blob:. Se uma página tiver botões de download construídos dessa forma, peça a Claude para reconstruí-los com a capacidade de downloads.
Para oferecer um arquivo, solicite o controle e o formato do arquivo em seu prompt:
O que você pode construir
Um artefato é uma única página HTML, portanto qualquer coisa que você possa expressar em HTML, CSS e JavaScript inline está no escopo. Os padrões abaixo surgem com mais frequência.Percorrer uma mudança
Peça uma página que renderize um diff ou uma mudança de design com anotações ao lado das linhas relevantes, para que os revisores possam ler seu raciocínio ao lado do código em vez de reconstruí-lo a partir de uma descrição.Comparar alternativas
Peça várias variantes em uma página para que você possa avaliá-las uma contra a outra. Isso funciona para layouts, cópia, formas de API ou planos de implementação.Ajustar com controles interativos
Peça sliders, alternâncias ou campos de entrada vinculados ao que você está ajustando, para que você possa explorar valores diretamente em vez de descrevê-los.Trazer o resultado de volta para sua sessão
Um artefato pode atuar como um editor leve para uma decisão que você então devolve a Claude. Peça um controle de exportação que produza texto que você possa colar no terminal, para que o resultado de interagir com a página flua de volta para a sessão em vez de permanecer na página.Rastrear trabalho em progresso
Peça a Claude para manter um artefato atualizado enquanto uma tarefa longa é executada, para que qualquer pessoa com o link possa acompanhar sem ler o terminal.Melhorar o design visual
Claude aplica uma skill de design integrada quando constrói um artefato, portanto as páginas recebem uma paleta deliberada, tipografia e layout sem prompting extra. Essa skill também procura por um sistema de design existente em seu projeto antes de escolher o seu próprio. Design tokens são os valores nomeados de cor, tipografia e espaçamento que seu sistema de design reutiliza. Para manter os artefatos consistentes com a marca do seu produto, registre-os onde Claude possa encontrá-los, como o CLAUDE.md do projeto ou um arquivo de tema em seu repositório:@font-face data URI e fornece a cada fonte uma pilha de fallback, portanto a página ainda é renderizada se uma fonte não carregar. Para usar uma fonte específica, nomeie-a em seu prompt ou em seu sistema de design.
Rascunhar uma tela de design
Para criar um protótipo de uma interface de usuário, um fluxo de tela, uma página de destino ou um pôster em vez de construir uma página, execute/design com um resumo. Claude rascunha o design como pranchetas em uma tela e publica a tela como um artefato de Design. O resumo nomeia o que você deseja desenhar:
/design requer uma sessão onde artefatos estão disponíveis e Claude Code v2.1.265 ou posterior.
Restrições de página
Cada artefato é uma página independente e autocontida. Claude Code envolve o arquivo que você publica em um shell de documento HTML e o serve sob uma Política de Segurança de Conteúdo (CSP) rigorosa, que molda o que a página pode fazer.
Gerar um artefato usa tokens de saída como qualquer outra resposta, e uma página estilizada é mais intensiva em tokens do que o mesmo conteúdo como texto de terminal. CSS incorporado, JavaScript para controles interativos e especialmente imagens incorporadas como data URIs são os principais contribuintes. Para reduzir o custo de tokens de um artefato:
- Prefira SVG, ou HTML e CSS, para diagramas em vez de imagens raster incorporadas
- Omita interatividade que você não necessite
- Faça a página resumir grandes conjuntos de dados em vez de incorporá-los completamente
Disponibilidade
Artefatos exigem todas as condições abaixo. Quando uma não é atendida, Claude escreve um arquivo HTML local ou diz que não pode publicar.Desabilitar artefatos
Para desativar artefatos para suas próprias sessões independentemente da configuração de sua organização, use qualquer um dos:
Depois que você desativar artefatos em um arquivo
--settings ou com CLAUDE_CODE_DISABLE_ARTIFACT, ou seu administrador os desativar em configurações gerenciadas, nenhum arquivo de configurações os ativa novamente. Antes da v2.1.242, um arquivo mais alto na pilha de precedência poderia ativar artefatos novamente mesmo quando um arquivo de precedência mais baixa definisse "enableArtifact": false.
Você também pode definir "enableArtifact": false no .claude/settings.json ou .claude/settings.local.json de um projeto para desativar artefatos para sessões nesse projeto. Um "enableArtifact": true em qualquer um dos arquivos não os ativa novamente. Honrar a chave em configurações de projeto e local requer Claude Code v2.1.242 ou posterior.
Se você adicionar uma regra de negação ou solicitação de WebFetch sem uma parte domain:, ela não desativa artefatos nem bloqueia leituras de artefatos. Uma regra WebFetch(domain:claude.ai) em deny ou ask se aplica a leituras de artefatos.
Gerenciar artefatos para sua organização
Proprietários em planos Team e Enterprise controlam artefatos a partir das configurações de admin do claude.ai. O conteúdo do artefato é armazenado em infraestrutura operada pela Anthropic e é visível apenas para membros autenticados da organização de publicação, a menos que o artefato seja compartilhado publicamente.Habilitar ou desabilitar artefatos
Para habilitar ou desabilitar artefatos para toda a organização, vá para Settings > Claude Code > Capabilities e use a alternância Artifacts. Em planos Enterprise com controle de acesso baseado em função, você pode escopo adicional de artefatos para funções específicas: vá para Settings > Roles, edite uma função e defina a permissão Artifacts sob o grupo Claude Code.Controlar chamadas de conector a partir de artefatos
Chamadas de conector a partir de artefatos têm sua própria alternância, separada da alternância Artifacts que ativa ou desativa artefatos. Vá para Settings > Capabilities e use a alternância Enable artifact connectors. A mesma alternância governa chamadas de conector a partir de artefatos criados em conversas do claude.ai, razão pela qual fica sob Settings > Capabilities em vez de Settings > Claude Code.Controlar compartilhamento público
O compartilhamento público está desativado por padrão em planos Team e Enterprise, portanto os membros podem compartilhar artefatos apenas dentro da organização até que um Proprietário o ative. Para permitir que os membros publiquem artefatos em links públicos que qualquer pessoa possa visualizar sem fazer login, vá para Settings > Claude Code > Capabilities e ative External sharing sob a alternância Artifacts. Desativá-lo novamente bloqueia o acesso através de links públicos existentes sem alterar o público de cada artefato; o acesso é retomado se você reativá-lo.Definir uma política de retenção
Para definir quanto tempo os artefatos são mantidos antes da exclusão automática, vá para Settings > Data & privacy controls. Você pode definir períodos de retenção separados para artefatos que ainda são privados para seu autor e artefatos que foram compartilhados.Revisar o log de auditoria
Publicar, compartilhar e excluir um artefato aparecem cada um no log de auditoria de sua organização sob os tipos de eventoclaude_artifact_*, a mesma família usada para artefatos criados em conversas do claude.ai.
Adicionar o domínio do visualizador à lista de permissões
O visualizador em claude.ai carrega cada artefato de uma origem*.claudeusercontent.com em sandbox. Se sua organização restringe o acesso à rede de saída, adicione esse domínio à sua lista de permissões junto com claude.ai. Consulte Requisitos de acesso à rede para a lista completa.
Um artefato que carrega uma fonte tipográfica do Google Fonts também solicita fonts.googleapis.com e fonts.gstatic.com. Ambos os hosts são opcionais. Se você bloqueá-los, os artefatos são renderizados em fontes tipográficas de fallback. Bloqueie com uma rejeição rápida em vez de um descarte silencioso para que a solicitação de fonte falhe imediatamente em vez de atrasar a primeira renderização da página.
Os artefatos também podem carregar bibliotecas JavaScript, como React ou um pacote de gráficos, de cdnjs.cloudflare.com, cdn.jsdelivr.net, cdn.tailwindcss.com e code.jquery.com, e de nenhum outro host externo. Se você bloquear esses hosts, as partes de um artefato que dependem de uma biblioteca não funcionam, e diferentemente de uma fonte bloqueada, uma biblioteca bloqueada não tem fallback. Bloqueie com uma rejeição rápida aqui também, para que uma solicitação de biblioteca bloqueada falhe imediatamente em vez de ficar pendente até expirar.
Listar e excluir artefatos com a API de Conformidade
A API de Conformidade fornece endpoints para listar os artefatos de uma organização, recuperar o conteúdo de uma versão específica e excluir um artefato:
Para os esquemas de solicitação e resposta, consulte a referência da API de Conformidade.
Recursos relacionados
- Procure padrões de prompting e fluxos de trabalho que se emparelham com artefatos
- Transforme um prompt de artefato que você reutiliza em uma skill para que você possa invocá-lo como um comando
- Conecte servidores MCP para que Claude possa extrair dados para um artefato enquanto ele constrói a página