# deja que claude code añada chat en vivo a tu web

Conecta Claude Code al servidor MCP de Spookat, pega un prompt y deja que instale el chat, copie el aspecto de tu web y te dé los enlaces que solo debe pulsar una persona.

2026-10-21 · Kuba

Claude Code puede poner chat en vivo en tu web en una sola sesión: añade el snippet a tu layout, lee tus colores y fuentes para darle estilo al widget y te da los dos enlaces que tiene que pulsar una persona. Esta guía muestra la configuración, el prompt, lo que el agente puede y no puede hacer, y cómo revisar su trabajo.

@video vs-agent | Animación: se le pide a un agente de IA que añada el chat de Spookat a un sitio y aparece el botón del chat.

## lo que hace el agente y lo que queda en tus manos

Spookat está hecho para que un agente de código pueda hacer toda la configuración. El manual es un archivo escrito para agentes, [llms.txt](https://spookat.com/llms.txt), y hay un servidor MCP remoto con herramientas para todo lo que necesita una configuración.

El agente se encarga de escribir:

- encuentra tu layout compartido y añade la única etiqueta script
- lee los colores y fuentes de tu web y ajusta el estilo, el acento, la fuente, la posición y el saludo del widget
- te cuenta exactamente qué hizo y qué falta

Una persona hace las dos cosas que nunca deben pasar solas:

- **conectar Slack o Discord.** `connect_chat` devuelve un enlace para quien puede añadir apps en tu workspace. Lo aprueba en Slack o Discord.
- **pagar.** `change_plan` devuelve un enlace de pago. Los agentes nunca pagan ni cancelan.

El aspecto lo publica el propio agente: `publish` lo pone en vivo, sin aprobación. Cada cambio del agente aparece en el registro de actividad del sitio, en el panel, y ahí puedes revertir una publicación.

## paso 1: conecta claude code con spookat

En la terminal de tu proyecto:

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

No hace falta clave. La primera vez que Claude Code usa una herramienta de Spookat, se abre una pestaña del navegador: inicias sesión, marcas los sitios que puede usar y eliges qué puede hacer. Si prefieres una clave, créala en el panel en instalación, claves secretas, y pásala como cabecera:

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

Las claves empiezan por `sk_live_`, pertenecen a un sitio y se muestran una sola vez. Mantenlas fuera del repositorio.

### todavía sin cuenta de spookat

No la necesitas para empezar. El agente puede registrar el sitio por su cuenta: una petición con tu dominio le trae el snippet y un enlace de reclamación para ti, y otra más, la clave solo para la configuración. El protocolo está en [auth.md](https://spookat.com/auth.md), y el agente lo lee solo cuando el manual lo manda ahí.

La clave de configuración puede dar estilo al widget, publicar el aspecto y leer el snippet. No puede conectar un canal, tocar la facturación ni leer chats. Todo eso espera hasta que reclames el sitio.

## paso 2: pega el prompt

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

Ese es todo el prompt. Lo demás está en el manual. Si quieres orientarlo, añade una línea: el estilo que te gusta, el saludo o en qué lado debe ir el lanzador.

Así es una ejecución típica:

1. Lee `llms.txt` y luego comprueba si responden las herramientas de Spookat. Si iniciaste sesión, llama a `get_config` y ve tu sitio. Si no, registra el sitio.
2. Te pide tu dominio real si no lo encuentra en el proyecto. Nunca se inventa uno, y nunca se inventa una clave.
3. Encuentra el layout que comparten todas las páginas y añade la etiqueta antes de `</body>`:

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

4. Mira tu CSS, elige uno de los 8 estilos, pone el color de tu marca como acento y una fuente que encaje. Puede usar tu fuente del sistema o una de las 17 fuentes que alojamos.
5. Llama a `preview` y te da un enlace donde ves el borrador en el widget real.
6. Llama a `publish` y el aspecto queda en vivo. Luego a `connect_chat` y te pasa el enlace. Si registró el sitio, ese espera a tu reclamación (paso 3).
7. Termina con un resumen: qué cambió en el código, qué publicó y qué te queda por pulsar.

## paso 3: la reclamación, si el agente registró el sitio

Cuando el agente registró el sitio por su cuenta, recibes un enlace de reclamación. Ábrelo, inicia sesión o regístrate (sin tarjeta) y reclama el sitio. También eliges qué conserva el agente:

- una clave **admin**, para seguir configurando, o
- una clave **agent**, para leer la configuración y responder chats más adelante.

El sitio se activa cuando se cumplen dos cosas, en cualquier orden: lo reclamaste y el widget se cargó en tu dominio. Tu prueba de 14 días empieza entonces. Antes de eso, el widget aparece en tu web pero dice que el chat abre pronto y no acepta mensajes. Los sitios sin reclamar y sus claves se borran a los 7 días.

Si el agente no puede contactarte durante la sesión, puede pedirnos que te enviemos el enlace de reclamación por email. Ese email no contiene nada escrito por el agente.

## paso 4: revisa el diff

Trátalo como cualquier otro cambio de un agente. El diff debería ser pequeño:

- una etiqueta script en el layout compartido, con `async`
- quizá un bloque `window.Spookat = { … }` encima, si el agente fijó el aspecto en el código en lugar del panel

Lo que no debería contener: una copia de la etiqueta en cada componente de página, un gestor de etiquetas, un preload del panel de chat o cualquier cosa que cargue el panel antes de un clic. Si ves algo así, dile al agente que lo quite. El lanzador es un archivo pequeño a propósito.

Dónde va la etiqueta depende de tu framework:

| framework | dónde |
|---|---|
| Next.js (app router) | `app/layout.tsx`, dentro de `<body>` |
| Next.js (pages router) | `pages/_document.tsx` o `pages/_app.tsx` |
| Astro, SvelteKit, Nuxt, Remix | el layout base |
| Vite + React, HTML puro | `index.html` o el include del pie compartido |

## paso 5: compruébalo tú

Despliega o ejecuta el sitio y ábrelo en una ventana privada con DevTools abierto:

- **Network, filtrado por `spookat`:** una petición antes de un clic, el lanzador desde `cdn.spookat.com`. Dos, ambas desde `cdn.spookat.com`, si tu código define en `window.Spookat` un estilo distinto del que publicaste. Nada hacia `api.spookat.com`.
- **Application:** ninguna cookie de Spookat, ningún almacenamiento hasta que envíes un primer mensaje.
- **Haz clic en el lanzador:** el panel se carga y luego puedes escribir. Después de la reclamación y la conexión del canal, tu mensaje de prueba aparece en Slack o Discord.

La [guía principal](/es/blog/add-live-chat-to-your-website/) tiene la versión larga de esta comprobación, con qué es cada petición.

## después de la configuración: el agente también puede responder

Desde pro, el mismo servidor MCP tiene herramientas para conversaciones: listar lo que espera, leer un chat, responder, añadir una nota, pasarlo a una persona. Las respuestas llevan la etiqueta IA en el widget y en el hilo de tu equipo, y la respuesta de un compañero siempre toma el control. Tú eliges cuándo puede responder: siempre primero, solo si nadie respondió en 3 minutos, fuera del horario laboral o solo borradores. La [documentación](/es/docs/) describe las reglas.

## los otros agentes

Nada de esto es exclusivo de Claude Code. El servidor MCP habla Streamable HTTP, y el prompt funciona en cualquier agente que pueda leer una URL y editar tu código. En Cursor, el servidor va en `.cursor/mcp.json`:

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

Si no pones la clave, Cursor abre la misma página de inicio de sesión.

## cuando no sale como esperabas

**Las herramientas de Spookat no responden.** Ejecuta `/mcp` en Claude Code para ver el estado del servidor. Si dice que necesita autenticación, selecciónalo y vuelve a iniciar sesión. Si lo añadiste con una clave, comprueba que no se revocó en el panel.

**El agente puso la etiqueta en el sitio equivocado.** Dile dónde: "Move the Spookat script to the root layout, remove every other copy." Una frase suele bastar.

**El lanzador aparece, pero el chat no se conecta.** El chat solo se conecta desde el dominio para el que está registrado el sitio y sus subdominios. En `localhost` o una URL de preview verás el botón y nada más. Compruébalo en el dominio real.

**Una herramienta dice que no.** Antes de la reclamación, la clave de configuración no puede conectar un canal ni leer chats, y lo dice. Después de la reclamación, una clave **agent** no puede cambiar el aspecto, publicar ni tocar la facturación: para eso se elige. Crea una clave admin en el panel si quieres que el agente siga configurando.

**No llegó el email de reclamación.** Enviamos uno por dirección al día, sin nada escrito por el agente. Abre el enlace de reclamación desde la sesión.

**El agente quiere construir su propio chat.** Algunos prompts derivan hacia ahí. Di que quieres Spookat, señala `llms.txt` y vuelve al camino.

## checklist

- `claude mcp add` hecho y sesión iniciada (o el agente registró el sitio).
- Una etiqueta en el layout compartido, `async`, nada más cargando antes de un clic.
- El aspecto está en vivo y te gusta. Si no, reviértelo desde el registro de actividad.
- Slack o Discord conectado a través del enlace.
- Sitio reclamado, si el agente lo registró.
- Comprobado en una ventana privada: una petición antes del clic (dos, ambas desde `cdn.spookat.com`, si tu código define un estilo que no publicaste), sin cookies.

Pega el prompt, pulsa los dos enlaces y vuelve a la parte de tu producto por la que la gente paga.

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