O dashboard sem backend

O que é e porque importa

Um investidor pede-te os números. Normalmente mandas-lhe uma captura de ecrã, ou uma folha de cálculo que uma semana depois já está velha. Ou constróis um dashboard a sério: um servidor, uma base de dados, um login, um deploy. Tudo isso para uma página.

O Claude Code pode publicar uma página a sério, que se chama artifact: uma página web no claude.ai, com o seu link, que o Claude desenha e publica a partir da sessão. Não há um servidor teu para manter ligado, nem deploy, nem código para manter. E se ligares os teus serviços como conectores, por exemplo o Stripe para os pagamentos e o PostHog para a analítica, a página lê dados frescos sempre que é aberta.

Há um senão, e é o centro deste guia: os dados ao vivo passam pela conta de quem está a ver a página, não pela tua. Para ti e para a tua equipa funciona muito bem. Para um investidor de fora da tua organização faz-se de outra forma: o Claude volta a publicar a página com os números novos, no mesmo link. Aqui tens as duas.

1. O que precisas

• Um plano Claude Pro, Max, Team ou Enterprise.
• O Claude Code no terminal ou na app de computador, com login na tua conta claude.ai (/login). Com uma chave API ou com um fornecedor cloud como o Amazon Bedrock não se publica.
• A versão mais recente do Claude Code: os dados ao vivo e as respostas aos comentários precisam de versões recentes.
• No Team e no Enterprise os artifacts estão ativos por defeito, mas um Owner pode desligá-los, e as chamadas a conectores a partir das páginas têm um interruptor à parte (Enable artifact connectors).

Se pedires uma página e o Claude te escrever um ficheiro HTML local sem link, os artifacts não estão ativos na tua sessão: revê estes pontos.

2. Liga os dados como conectores do claude.ai

Aqui está o pormenor que faz perder mais tempo. A página publicada só pode chamar os conectores da tua conta claude.ai. Os servidores MCP juntados localmente com claude mcp add servem ao Claude enquanto constrói a página, mas a página publicada não os pode chamar.

1. Abre claude.ai/customize/connectors.
2. O Stripe tem um conector oficial no diretório: procuras, ligas, fazes login no Stripe e escolhes a que contas dar acesso. No Team e no Enterprise primeiro tem de ser um Owner a juntá-lo.
3. Para o PostHog, se não o encontrares no diretório, usa Add custom connector com o endereço https://mcp.posthog.com/mcp e faz login. A região, EUA ou Europa, é o PostHog que a escolhe com base na tua conta.
4. No Claude Code escreve /mcp: os conectores do claude.ai aparecem na lista. Se faltarem, confirma que entraste com a conta claude.ai e não com uma chave API.

O conector do Stripe também pode escrever, não só ler: mantém ativa a aprovação das ferramentas, como aconselha o próprio Stripe.

3. Pede o dashboard

Quanto mais preciso fores sobre o que queres ver, menos voltas dás. Os eventos do PostHog escreve-os com o nome verdadeiro: se não os sabes, pede primeiro ao Claude que tos liste a partir do conector.

Faz-me um artifact: um dashboard para um investidor com os números da minha app.
Em cima, quatro quadros: registos totais, registos dos últimos 7 dias, subscritores pagos ativos, receita recorrente do mês.
Por baixo: os registos por dia nos últimos 30 dias, e o funil do onboarding, com quantas pessoas chegam a cada passo e onde desistem, em percentagem.
Registos e onboarding a partir do PostHog (o evento de registo é [evento], os passos do onboarding são [eventos por ordem]); subscritores e receita a partir do Stripe.
Lê os dados dos conectores do claude.ai sempre que a página abrir. Em cada secção ao vivo põe uma mensagem de reserva que diga que conector é preciso, caso não responda. Por baixo de cada número escreve de onde vem e a que horas foi lido.

Antes de publicar uma página que chama conectores, o Claude Code pede-te confirmação. Depois dá-te o link e abre o browser; /artifacts mostra-te todas as tuas páginas.

4. Como se mantém atualizada

Uma página com conectores lê os dados quando abre, e pode atualizar-se a intervalos ou com um botão. As respostas ficam guardadas no browser de quem vê: quando volta a abri-la vê logo os últimos números, e um momento depois os novos.

Junta ao dashboard um botão «Atualizar» e uma atualização automática a cada 15 minutos enquanto a página estiver aberta. Em cima escreve a hora da última atualização. Se um conector não responder, deixa os últimos números e escreve que não estão atualizados. Depois volta a publicar no mesmo link.

Lembra-te por onde passam essas chamadas: pela conta de quem vê, que tem de dar autorização da primeira vez. Duas pessoas que abrem a mesma página podem ver dados diferentes. Quem não ligou o conector, ou não dá autorização, vê a página sem as partes ao vivo.

Para um investidor: a mesma página, publicada de novo

Para quem abre o link público sem conta claude.ai, ou de fora da tua organização, os conectores não arrancam. Então fazes uma versão com os números lá dentro, e mantém-la fresca publicando-a de novo no mesmo link: quem tem a página aberta vê a atualização na hora.

Faz uma cópia do dashboard para o investidor, sem chamadas a conectores: lê agora os números do Stripe e do PostHog e põe-nos na página, com a data e a hora da leitura. Publica-a como artifact novo e dá-me o link.

Para a atualizar, mesmo a partir de uma sessão nova, dás-lhe o link:

Atualiza [link do artifact] com os números de hoje do Stripe e do PostHog. A mesma estrutura, muda só os números e a hora da leitura.

Para o fazer todas as manhãs podes usar /loop, enquanto a sessão estiver aberta: um /loop recorrente expira ao fim de sete dias. Com uma página pública, o Claude Code pede-te confirmação da primeira vez que a altera em cada conversa. As tarefas agendadas na cloud, pelo contrário, não voltam a publicar uma página partilhada em público sem te perguntar.

5. Quem a vê

• No início só tu a vês. Para a partilhar abres a página no browser e usas Share, em cima.
• No Pro e no Max partilhas com um link público: abre-a qualquer pessoa que o tenha, sem login.
• No Team e no Enterprise dás acesso a pessoas concretas da tua organização, ou a toda a organização. O link público está desligado até um Owner ativar External sharing.
• Cada publicação é uma versão: no Share escolhes qual os outros veem, ou mostras sempre a última.
• Para a tirar: /artifacts, escolhes a página e carregas em d. É definitivo: o link deixa de funcionar para todos, incluindo tu.

A regra que eu seguiria: na versão pública põe só números que também mandarias por email. Quem tem o link pode passá-lo a qualquer pessoa.

6. Os comentários, com o Claude a responder

Quando partilhas a página dentro da tua organização, ou seja no Team ou no Enterprise, quem a vê pode deixar comentários. Quem a abre só com o link público não os vê nem pode escrevê-los.

1. Quem pode editar a página escreve um comentário e manda-o ao Claude com Send to Claude, ou escreve @claude no comentário.
2. O Claude Code vigia as páginas publicadas na tua sessão: o comentário chega lá, o Claude lê o fio e responde. A resposta aparece assinada pelo Claude, através de ti.
3. Se o teu modo de permissões o deixar publicar sem perguntar, responde sozinho. Caso contrário, pede-te o ok antes de ler o fio e antes de responder.
4. Para o parar: Ctrl+C uma vez, com o prompt parado, põe as respostas em pausa; no /tasks paras uma página só.

O Claude só responde aos fios que alguém lhe mandou: os outros ficam abertos até uma pessoa os fechar. Os comentários também lhos podes pedir tu:

Lê os comentários em [link do artifact]. Responde às perguntas sobre os números explicando de onde vem cada dado, faz as alterações que pedem e volta a publicar. Se um pedido mudar o que mostramos para fora, pergunta-me antes.

Os erros mais comuns

• Ligar o Stripe e o PostHog só com claude mcp add. A página publicada só chama os conectores do claude.ai.
• Mandar ao investidor a versão ao vivo. De fora da tua organização os conectores não arrancam, e ele vê os quadros vazios.
• Esquecer as mensagens de reserva. Quem não ligou um conector vê uma secção vazia sem perceber porquê.
• Achar que todos os comentários chegam ao Claude. Só chegam os que quem pode editar a página manda com Send to Claude ou com @claude.

Checklist

• Tenho um plano Pro, Max, Team ou Enterprise e fiz /login
• O Stripe e o PostHog são conectores no claude.ai, e o /mcp mostra-os
• Cada secção ao vivo tem uma mensagem de reserva
• Por baixo de cada número estão a fonte e a hora da leitura
• O investidor tem uma versão com os números lá dentro, não a ao vivo
• Decidi quem a vê, no botão Share

Perguntas frequentes