- Claude Artifacts é um recurso que cria aplicativos interativos de página única usando HTML, CSS e JavaScript, permitindo ver o resultado dentro da interface do Claude e refiná-lo ainda mais.
- Após converter o histórico recente de atividades do Claude para SQLite e analisá-lo, o autor descobriu que usou Claude Artifacts muito mais do que esperava na última semana.
- Ele vem usando esse recurso como uma ferramenta útil para resolver problemas diretamente ou criar protótipos.
[Projetos feitos com Claude Artifacts]
Uso de URL to Markdown com Jina Reader
- Desenvolvimento de uma interface web que chama a API do Jina Reader para converter o texto completo de páginas web em Markdown
- Entrada de URL → geração de Markdown via API do Jina Reader → exibição do Markdown e botão "Copy"
- Resolveu o problema de copiar e colar o texto completo de uma página em um LLM no Safari móvel, o que era difícil
Demo de SQLite em WASM
- A partir de uma conversa no Hacker News sobre o build WASM do SQLite, descobriu o pacote NPM
@sqlite.org/sqlite-wasm
- Criou uma demo interativa simples para verificar se funcionava
Ferramenta de extração de URL
- Queria extrair URLs vinculadas do texto de uma página web
- Criou um artifact que aceita colagem de HTML rich-text e usa um parser HTML para extrair links
Visualizador de área de transferência
- Desenvolvimento de uma ferramenta de depuração que usa a API de clipboard do navegador para colar vários tipos de conteúdo e inspecionar as informações
- Permite copiar e colar texto simples, rich text, arquivos, imagens etc. e verificar quais informações ficam disponíveis no navegador
REPL com Pyodide
- Encontrou
https://cdn.jsdelivr.net/pyodide/ em um cabeçalho CSP
- Isso sugere que a equipe de desenvolvimento da Anthropic configurou intencionalmente o ambiente para permitir carregar Pyodide (Python compilado para WebAssembly) em artifacts
- Criou uma demo simples para provar que funciona
Simulador de configurações de câmera fotográfica
- Queria saber se era possível simular configurações de câmera em JavaScript, mas encontrou bugs e o resultado não foi impressionante
- Descobriu a biblioteca Fabric.js
Calculadora de preços para LLM
- Desenvolveu uma calculadora de preços como parte de um experimento de raspagem de vídeo usando Google Gemini
- Criou isso porque não confiava nos próprios cálculos sobre o baixo preço do Gemini
Conversor de YAML para JSON
- Desenvolveu uma ferramenta que recebe YAML e o converte em JSON em tempo real para relembrar aspectos específicos da sintaxe YAML
OpenAI Audio
- Explorou a nova API de Audio da OpenAI
- Desenvolveu uma página web que solicita permissão de acesso ao microfone, grava áudio, codifica em base64 e envia para a API da OpenAI
- Claude Artifacts não pode fazer requisições de API diretamente para hosts externos, mas depois de criar uma versão funcional, é possível migrá-la para outra hospedagem e finalizá-la
Decodificador de QR code
- Em uma reunião onde viu slides com QR codes, precisou de uma forma de converter um QR code em uma URL normal
- Usou Claude Artifacts para desenvolver rapidamente um decodificador de QR code
Conversor de imagens e downloader de páginas
- No Hacker News, alguém sugeriu a ideia de uma ferramenta em que a pessoa solta fotos em uma página, elas são embutidas como URLs base64 e, ao usar "Save as HTML", obtém-se uma página independente com galeria
- Também sugeriu adicionar um recurso útil de "download link" para casos em que não é possível usar "Save as HTML" no celular, e criou um protótipo
Escapador de entidades HTML
- Precisava escapar entidades HTML de um bloco de texto no celular, então pediu ao Claude que criasse a ferramenta
text-wrap-balance-nav
- Inspirado por Terence Eden, experimentou a propriedade CSS
text-wrap: balance
- Pediu ao Claude que criasse um exemplo de barra de navegação com slider e checkbox
Conversor para alfabeto fonético ARES
- Ao trabalhar como voluntário no suporte a operações de rádio amador, ficou preocupado em errar o uso do alfabeto fonético e pediu ao Claude que criasse uma ferramenta
[Vantagens e limitações do Claude Artifacts]
- O autor está usando artifacts em grande volume, a ponto de ter criado 14 projetos em uma semana
- Vem usando desde o lançamento em 20 de junho e atualmente cria novos artifacts interativos várias vezes por dia
- Claude Artifacts é útil para satisfazer a curiosidade, fazer prototipagem rápida e resolver problemas
- A maioria das ferramentas pode ser criada em menos de 5 minutos
- Mesmo a ferramenta mais complexa, OpenAI Audio, levou apenas 12 minutos para a primeira versão e 9 minutos para a segunda iteração, totalizando só 21 minutos
- No entanto, o autor se decepciona com as limitações em recursos como chamadas de API, envio de formulários e links para páginas externas
- Com base no que aprendeu, ele planeja criar sua própria alternativa aos artifacts
- Em conclusão, recomenda o uso de artifacts
- Se você não está usando artifacts, espera que este texto ajude a entender o motivo
- Para ele, artifacts é atualmente uma das ferramentas baseadas em LLM de que mais gosta
1 comentários
Comentários do Hacker News
Há opiniões de que integrar ferramentas a uma base de código existente é difícil. Dá para criar como uma página independente, mas revisar e ajustar o código para ficar compatível com a base existente consome muito tempo. Escrever o código diretamente acaba sendo uma escolha melhor.
A pessoa deixou o desenvolvimento web no início dos anos 2000 e passou a focar em negócios web, mas agora está feliz por poder fazer trabalhos criativos usando LAMP. Por exemplo, consegue colocar no ar um site de marketing do jeito que quer em menos de 20 minutos.
Está procurando posts de blog ou “melhores práticas” sobre a melhor forma de usar LLMs com bases de código locais. Espera que a comunidade tenha materiais recomendáveis.
Há quem ache a época atual surpreendente. Começou a aprender Rust no fim de semana, e o ChatGPT 4 está atuando como um excelente professor com suporte em tempo real.
A Anthropic está se aproximando do status de superapp, como o WeChat. É preciso uma forma de exibir facilmente os artifacts publicados na barra lateral. Como Elon tem muito interesse nesse modelo, se a xAI tiver os recursos do Claude, seguirá nessa direção.
O novo paradigma apresentado pela Anthropic é que o conteúdo fica hospedado. A saída do LLM vira um app auto-hospedado que o consumidor pode usar. Isso não é tão diferente de construir um site pessoal.