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

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.

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, 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:

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:

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, 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

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

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

{
  "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.