🧱 Tipos de artifact
Quatro categorias cobrem 95% do que cai em demo. Saber qual pedir é a diferença entre "isso é lindo" e "isso é um bloco de código sem contexto".
📄 Code / Document
- • Snippets em qualquer linguagem
- • Markdown longo (especs, planos)
- • Sem execução — só leitura formatada
- • Bom pra entregar artefato textual
🌐 HTML / Website
- • Site completo single-file (HTML+CSS+JS)
- • Preview ao vivo no painel lateral
- • Tailwind via CDN funciona
- • Landing pages, dashboards estáticos
⚛️ React component
- • Componente interativo com state
- • shadcn/ui + Tailwind disponíveis
- • Bom pra protótipos clicáveis
- • Dashboards com filtros, formulários
🎨 SVG / Diagrama
- • Ilustração vetorial editável
- • Fluxogramas, mindmaps, arquiteturas
- • Exporta sem perder qualidade
- • Bom pra slide pós-demo
💡 Dica prática
Em demo, peça o tipo explicitamente: "crie um artifact React com..." ou "site HTML single-file com...". Ambiguidade aqui faz Claude entregar markdown quando você queria preview ao vivo.
🔌 Mudança out/2025 — MCP + storage
Antes de out/2025, artifact era estático: o que rodava no painel morria ao fechar a aba. Hoje fala com MCP e tem storage persistente — o que muda completamente o que dá pra demonstrar.
Pré-out/2025: artifact = sandbox isolado
Sem rede pra fora, sem memória entre sessões. Demo era "olha que bonito" e fim.
Out/2025: MCP dentro do artifact
Artifact pode chamar servidores MCP — Atlassian, GitHub, Linear, Zapier. Vira app de verdade.
Storage persistente
Dados sobrevivem entre sessões. Dá pra construir tracker, lista, formulário que lembra do estado.
Compartilhamento público
Mesma feature ficou utilizável: o link gera versão hospedada que outros usam sem login do criador.
🎯 Por que isso importa em demo
A objeção clássica era "isso é brinquedo". Com MCP+storage, em 5 minutos você monta uma tela que consulta dado real da empresa. Mata a objeção sem ppt.
🤖 Artifacts AI-powered
Artifact pode chamar Claude por dentro. O usuário final não precisa de API key — a Anthropic gerencia. Isso transforma artifact em mini-app de LLM compartilhável por URL.
⚙️ Padrão de uso
// Dentro do artifact React, Claude expõe uma API gerenciada.
// Sem API key, sem custo direto pro usuário final.
const reply = await window.claude.complete(prompt);
// Use cases típicos:
// - Tradutor com glossário próprio
// - Resumidor de texto colado
// - Classificador de tickets
// - Gerador de slogans com restriçõesA API integrada é exposta dentro do sandbox; o artifact compartilhado roda pra qualquer um com o link.
✓ Bons casos AI-powered
- ✓Ferramenta de bolso ("resumir bula", "classificar feedback")
- ✓Protótipo de feature LLM antes do build real
- ✓Demo interativa pra a sala usar no celular
- ✓Workshop hand-on de prompt engineering
✗ Casos ruins
- ✗Produção com SLA (sem garantia)
- ✗Dados sensíveis (sandbox público)
- ✗Workflow longo (rate limit do compartilhado)
- ✗Lógica que precisa rodar 24/7 (não é hosting)
🔗 Compartilhamento por URL
Cada artifact gera uma URL pública. Sem deploy, sem servidor, sem domínio. Demo termina com link que a sala leva pra casa.
Botão "Publish" no artifact
No painel lateral, opção de tornar público. Gera URL claude.ai/public/artifacts/….
Versionamento
Cada update gera nova versão; a URL permanece a mesma — quem acessa pega a corrente.
Sem autenticação obrigatória
Quem abre o link usa, mesmo sem conta claude.ai (para os recursos não-AI). AI-powered exige login.
Reverter pra privado
Despublicar invalida a URL. Bom pra retirar protótipos depois do workshop.
💡 Dica prática
No fechamento da sessão, mande o link no chat da sala. Vira artefato que a equipe abre segunda-feira — material persistente sem você ter que hospedar nada.
⚖️ Artifact vs Project
São coisas diferentes que demoram a se diferenciar pro novato. Project = contexto persistente. Artifact = entrega executável.
✓ Use Artifact quando
- ✓Quer mostrar algo executando ao vivo
- ✓Protótipo de UI / componente
- ✓Compartilhar mini-app por link
- ✓Diagrama, SVG, dashboard one-shot
→ Use Project quando
- →Trabalho contínuo no mesmo tema
- →Custom instructions persistentes
- →Knowledge files (até 30MB cada)
- →Várias conversas com mesmo escopo
🔁 Combinados
Padrão poderoso: Project com avatar da empresa + várias conversas que geram artifacts. O contexto persistente do projeto produz artefatos diferentes — landing, dashboard, deck — todos com a mesma voz.
🚧 Limitações conhecidas
Saber onde quebra evita demo travada. Cinco gargalos repetidos:
⚠️ Onde quebra
- • Pacotes externos: só os já hospedados na sandbox da Anthropic (React, shadcn, recharts, Tailwind via CDN). Sem
npm installarbitrário. - • Backend próprio: não dá pra ter servidor Node/Python rodando. É front + APIs MCP autorizadas.
- • Domínio customizado: URL fica em
claude.ai/.... Sem CNAME. - • SEO/analytics: não é hosting de produção. Sem meta tags customizadas garantidas, sem GA fácil.
- • Tamanho: artifact muito grande (centenas de KB) começa a renderizar lento e a edição parcial pifa.
🧪 Checklist antes de demonstrar
- Tipo certo pedido? "React component" ≠ "markdown com código React".
- Bibliotecas usadas existem na sandbox? Em dúvida, peça pra usar só Tailwind + React puro.
- Tem MCP necessário conectado? Se a demo depende de Linear/GitHub, autorize antes.
- Storage persistente foi limpo? Demo idêntica em duas salas — limpar evita "lixo" da apresentação anterior.
- Plano B se travar? Print salvo + vídeo gravado da versão que rodou bem.
💡 Dica prática
Artifact AO VIVO em sala é tentação de demo. Mas siga a regra do Módulo 3.4: grave antes, narre por cima, e use o ao vivo só pra incrementar 1 detalhe que veio da pergunta da plateia. O efeito é o mesmo, o risco cai pra zero.
📋 Resumo do Módulo
Próximo Módulo:
4.7 — 📤 Dispatch e subagents (Agent tool, AGENT.md, paralelização)