Como o Claude cria um dashboard 3D com os dados do seu negócio

O post diz que o Claude cria dashboards 3D que parecem ter custado uma fortuna. A parte do dashboard está na documentação oficial da Anthropic. A parte do visual 3D que impressiona é uma promessa de resultado e não dá para verificar: ela depende do seu pedido, dos seus dados e do seu gosto. Aqui você vê o que é confirmado, em que ordem fazer e o que fica de fora.

Primeiro, o que é um artefato. Segundo a central de ajuda do Claude, artefatos são conteúdos que o Claude cria e que abrem ao lado da conversa, como documentos, apresentações, dashboards, sites de uma página e pequenas ferramentas interativas. Cada artefato é uma página HTML única, com CSS e JavaScript dentro dela. Isso significa que, em tese, qualquer coisa que roda numa página web simples cabe ali, inclusive uma cena em 3D.

Passo 1: conecte os dados do negócio. O Claude acessa serviços externos por meio de conectores. Para a Shopify, a própria Shopify tem uma página de ajuda para o conector do Claude: você pede no Claude para usar a Shopify, abre a página de instalação do conector no claude.ai pelo navegador do computador, entra no painel da sua loja e aprova o acesso que o conector pede. O conector começa somente leitura, e só muda dados se você aprovar escrita. Para a Square, existe um conector no diretório do Claude, listado como verificado pela Anthropic, que exige login. Você também encontra conectores em Personalizar, Conectores, dentro do Claude.

Passo 2: peça o dashboard como artefato e diga de onde vêm os números. Na documentação do Claude Code, o exemplo oficial é nomear o conector e os dados no pedido, e o Claude declara quais conectores a página pode chamar. A página busca os dados quando abre e pode atualizar por intervalo ou por um botão. Cada pessoa que abre vê o que a conta dela consegue acessar, e o claude.ai pede permissão antes da primeira chamada. Conectar apps e usar dados nos artefatos exige plano Pro ou superior, e dashboards aparecem como recurso beta.

Passo 3: peça a cena 3D e cite a biblioteca. A documentação não lista o Three.js pelo nome, então não há garantia oficial. O que está confirmado é que a página pode carregar bibliotecas de apenas cinco endereços públicos: cdnjs, unpkg, jsDelivr (caminhos /npm/), Tailwind e jQuery. O Three.js está publicado no cdnjs, então pedir que o Claude carregue o Three.js por ali é um caminho viável. Dizer isso no pedido evita que ele tente usar um endereço bloqueado. Cliques em objetos e animações são recursos comuns do Three.js, mas o resultado final varia e pode exigir ajustes por conversa.

Um exemplo de pedido, para a Shopify: Crie um dashboard como artefato usando o conector da Shopify, somente leitura. Mostre os 5 produtos mais vendidos dos últimos 30 dias como colunas 3D, e a receita por dia como uma linha. Use Three.js carregado pelo cdnjs. Ao clicar numa coluna, abra um painel com o nome do produto, as unidades e a receita. Não mostre nomes nem e-mails de clientes. Se faltar a conexão, mostre um aviso dizendo qual conector é necessário. A Shopify recomenda perguntas curtas e específicas, porque comparações em camadas podem falhar.

Segurança vem antes da beleza. O conector herda as permissões da conta com que você entra, então use um acesso de equipe limitado, se possível. Na Shopify, pedidos e cadastros de clientes são somente leitura mesmo com escrita liberada, e o conector não faz reembolsos nem cancela pedidos. Ainda assim, quando você autoriza o compartilhamento, os dados saem da Shopify e passam a seguir os termos e a política de privacidade da Anthropic. Por isso, peça totais e rankings, não listas de clientes. Para reduzir o acesso depois de aprovado, a Shopify manda desinstalar a integração e instalar de novo com menos permissão.

Compartilhar também pede atenção. O artefato começa privado, só para você. Se a página for compartilhada, os números que o Claude coletou ao montá-la podem ficar dentro dela, por isso não inclua dados pessoais de clientes. Para quem abre, a chamada ao vivo usa a conta da própria pessoa: quem não conectou o conector vê a página sem as partes ao vivo, e quem abre um link público sem login também. Em planos Team e Enterprise, o dono da organização pode desligar as chamadas de conectores nos artefatos.

Os limites também são oficiais. Um artefato é uma página estática, sem servidor próprio e sem login próprio, com no máximo 16 MiB. Ele não carrega imagens externas, e só consegue pedir dados à própria página e ao Google Fonts, além de passar pelos conectores. Se você precisa de uma ferramenta interna com banco de dados, hospede por conta própria. Também não dá para confirmar o que o post chama de pacote aberto com 13 skills de Three.js, e você não precisa dele para o passo a passo acima.