# deixe o claude code colocar chat ao vivo no seu site

Conecte o Claude Code ao servidor MCP do Spookat, cole um prompt e deixe ele instalar o chat, copiar a aparência do seu site e te entregar os links que só uma pessoa deve clicar.

2026-10-21 · Kuba

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.

@video vs-agent | Animação: um agente de IA recebe o pedido de adicionar o chat do Spookat a um site, e o botão do chat aparece.

## 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](https://spookat.com/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:

```sh
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:

```sh
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](https://spookat.com/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

```text
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:

1. 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.
2. Ele pergunta seu domínio de verdade se não achar no projeto. Ele nunca chuta um domínio, e nunca chuta uma chave.
3. Ele encontra o layout que todas as páginas compartilham e adiciona a tag antes de `</body>`:

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

4. 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.
5. Ele chama `preview` e te dá um link onde você vê o rascunho no widget de verdade.
6. 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).
7. 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](/pt/blog/add-live-chat-to-your-website/) 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](/pt/docs/) 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`:

```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.

---
source: https://spookat.com/pt/blog/claude-code-live-chat/