deixe o claude code colocar chat ao vivo no seu site

21 de outubro de 2026 · por kuba · 7 min de leitura

O Claude Code consegue colocar chat ao vivo no seu site numa sessão só: ele adiciona o snippet ao seu layout, lê suas cores e fontes para estilizar o widget e te entrega os dois links que uma pessoa precisa clicar. Este guia mostra a configuração, o prompt, o que o agente pode e não pode fazer, e como conferir o trabalho dele.

o que o agente faz e o que fica com você

O Spookat foi feito para um agente de código conseguir fazer toda a configuração. O manual é um arquivo escrito para agentes, o llms.txt, e existe um servidor MCP remoto com ferramentas para tudo o que uma configuração precisa.

O agente cuida da digitação:

encontra seu layout compartilhado e adiciona a única tag script
lê as cores e fontes do seu site e define o estilo, o acento, a fonte, a posição e a saudação do widget
te conta exatamente o que fez e o que falta

Uma pessoa faz as duas coisas que nunca devem acontecer sozinhas:

conectar o Slack ou o Discord. connect_chat devolve um link para quem pode adicionar apps no seu workspace. Essa pessoa aprova no Slack ou no Discord.
pagar. change_plan devolve um link de checkout. Agentes nunca pagam nem cancelam.

A aparência o próprio agente publica: publish coloca ela no ar, sem aprovação. Toda mudança feita pelo agente aparece no log de atividades do site, no painel, e ali você pode reverter uma publicação.

passo 1: conecte o claude code ao spookat

No terminal do seu projeto:

claude mcp add --transport http spookat https://api.spookat.com/mcp

Não precisa de chave. Na primeira vez que o Claude Code usa uma ferramenta do Spookat, abre uma aba no navegador: você entra, marca os sites que ele pode usar e escolhe o que ele pode fazer. Se preferir uma chave, crie uma no painel em instalação, chaves secretas, e passe como cabeçalho:

claude mcp add --transport http spookat https://api.spookat.com/mcp --header "Authorization: Bearer sk_live_…"

As chaves começam com sk_live_, pertencem a um site e aparecem uma vez só. Deixe elas fora do repositório.

ainda sem conta no spookat

Você não precisa de uma para começar. O agente pode registrar o site sozinho: uma requisição com o seu domínio traz o snippet e um link de reivindicação para você, e mais uma traz a chave só para a configuração. O protocolo está no auth.md, e o agente lê sozinho quando o manual manda ele para lá.

A chave de configuração consegue estilizar o widget, publicar a aparência e ler o snippet. Ela não consegue conectar um canal, mexer no faturamento nem ler chats. Tudo isso espera até você reivindicar o site.

passo 2: cole o prompt

Add Spookat chat to my site. Read https://spookat.com/llms.txt first, then match the chat style to my site.

Esse é o prompt inteiro. O resto está no manual. Se quiser direcionar, adicione uma linha: o estilo que você curte, a saudação ou de que lado o botão deve ficar.

Como é uma execução típica:

Ele lê o llms.txt e depois verifica se as ferramentas do Spookat respondem. Se você está logado, ele chama get_config e vê seu site. Se não, ele registra o site.
Ele pergunta seu domínio de verdade se não achar no projeto. Ele nunca chuta um domínio, e nunca chuta uma chave.
Ele encontra o layout que todas as páginas compartilham e adiciona a tag antes de </body>:

<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

Ele olha seu CSS, escolhe um dos 8 estilos, põe a cor da sua marca como acento e uma fonte que combina. Pode usar sua fonte do sistema ou uma das 17 fontes que hospedamos.
Ele chama preview e te dá um link onde você vê o rascunho no widget de verdade.
Ele chama publish e a aparência vai para o ar. Depois connect_chat, e te entrega o link. Se ele registrou o site, esse espera a sua reivindicação (passo 3).
Ele termina com um resumo: o que mudou no código, o que ele publicou e o que você ainda precisa clicar.

passo 3: a reivindicação, se o agente registrou o site

Quando o agente registrou o site sozinho, você recebe um link de reivindicação. Abra, entre ou crie uma conta (sem cartão) e reivindique o site. Você também escolhe o que o agente mantém:

uma chave admin, para continuar configurando, ou
uma chave agent, para ler a configuração e responder chats depois.

O site entra no ar quando duas coisas acontecem, em qualquer ordem: você reivindicou e o widget carregou no seu domínio. Seu teste de 14 dias começa aí. Antes disso, o widget aparece no seu site mas diz que o chat abre em breve e não aceita mensagens. Sites não reivindicados e as chaves deles são apagados depois de 7 dias.

Se o agente não conseguir falar com você na sessão, ele pode pedir para a gente mandar o link de reivindicação por e-mail. Esse e-mail não tem nada escrito pelo agente.

passo 4: revise o diff

Trate como qualquer outra mudança feita por um agente. O diff deve ser pequeno:

uma tag script no layout compartilhado, com async
talvez um bloco window.Spookat = { … } acima dela, se o agente fixou a aparência no código em vez do painel

O que ele não deve ter: uma cópia da tag em cada componente de página, um gerenciador de tags, um preload do painel do chat ou qualquer coisa que carregue o painel antes de um clique. Se aparecer algo assim, peça para o agente tirar. O botão é um arquivo pequeno de propósito.

Onde a tag vai depende do seu framework:

framework	onde
Next.js (app router)	`app/layout.tsx`, dentro de `<body>`
Next.js (pages router)	`pages/_document.tsx` ou `pages/_app.tsx`
Astro, SvelteKit, Nuxt, Remix	o layout base
Vite + React, HTML puro	`index.html` ou o include do rodapé compartilhado

passo 5: confira você mesmo

Faça o deploy ou rode o site e abra numa janela anônima com o DevTools aberto:

Network, filtrado por spookat: uma requisição antes de um clique, o botão vindo de cdn.spookat.com. Duas, ambas de cdn.spookat.com, se o seu código define em window.Spookat um estilo diferente do que você publicou. Nada para api.spookat.com.
Application: nenhum cookie do Spookat, nenhum armazenamento até você mandar a primeira mensagem.
Clique no botão do chat: o painel carrega e você pode digitar. Depois da reivindicação e da conexão do canal, sua mensagem de teste aparece no Slack ou no Discord.

O guia principal tem a versão longa dessa checagem, explicando cada requisição.

depois da configuração: o agente também pode responder

A partir do pro, o mesmo servidor MCP tem ferramentas para conversas: listar o que está esperando, ler um chat, responder, adicionar uma nota, passar para uma pessoa. As respostas aparecem marcadas como IA no widget e na thread da sua equipe, e a resposta de um colega sempre assume. Você escolhe quando ele pode responder: sempre primeiro, só se ninguém respondeu em 3 minutos, fora do horário de trabalho ou só rascunhos. A documentação descreve as regras.

os outros agentes

Nada aqui é exclusivo do Claude Code. O servidor MCP fala Streamable HTTP, e o prompt funciona em qualquer agente que consiga ler uma URL e editar seu código. No Cursor, o servidor vai em .cursor/mcp.json:

{
  "mcpServers": {
    "spookat": { "url": "https://api.spookat.com/mcp" }
  }
}

Deixe a chave de fora e o Cursor abre a mesma página de login.

quando não sai como planejado

As ferramentas do Spookat não respondem. Rode /mcp no Claude Code para ver o status do servidor. Se disser que precisa de autenticação, selecione e entre de novo. Se você adicionou com uma chave, confira se ela não foi revogada no painel.

O agente colocou a tag no lugar errado. Diga onde: “Move the Spookat script to the root layout, remove every other copy.” Uma frase costuma resolver.

O botão aparece, mas o chat não conecta. O chat só conecta a partir do domínio para o qual o site está registrado e dos subdomínios dele. Em localhost ou numa URL de preview você vê o botão e nada mais. Confira no domínio de verdade.

Uma ferramenta diz não. Antes da reivindicação, a chave de configuração não consegue conectar um canal nem ler chats, e ela avisa. Depois da reivindicação, uma chave agent não consegue mudar a aparência, publicar nem mexer no faturamento: é justamente para isso que se escolhe ela. Crie uma chave admin no painel se quiser que o agente continue configurando.

O e-mail de reivindicação não chegou. Mandamos um por endereço por dia, sem nada escrito pelo agente. Abra o link de reivindicação pela sessão.

O agente quer construir o próprio chat. Alguns prompts escorregam para isso. Diga que você quer o Spookat, aponte para o llms.txt e ele volta para o caminho.

checklist

claude mcp add feito, e login feito (ou o agente registrou o site).
Uma tag no layout compartilhado, async, nada mais carregando antes de um clique.
A aparência está no ar e você gostou. Se não, reverta pelo log de atividades.
Slack ou Discord conectado pelo link.
Site reivindicado, se o agente registrou ele.
Conferido numa janela anônima: uma requisição antes do clique (duas, ambas de cdn.spookat.com, se o seu código define um estilo que você não publicou), nenhum cookie.

Cole o prompt, clique nos dois links e volte para a parte do seu produto pela qual as pessoas pagam.