laat claude code live chat aan je site toevoegen

Claude Code kan in één sessie live chat op je site zetten: het voegt de snippet toe aan je layout, leest je kleuren en fonts om de widget te stylen en geeft je de twee links die een mens moet klikken. Deze gids laat de setup zien, de prompt, wat de agent wel en niet mag, en hoe je zijn werk controleert.

wat de agent doet en wat bij jou blijft

Spookat is zo gebouwd dat een coding agent de hele setup kan doen. De handleiding is één bestand geschreven voor agents, llms.txt, en er is een remote MCP-server met tools voor alles wat een setup nodig heeft.

De agent doet het typwerk:

• vindt je gedeelde layout en voegt de ene script-tag toe
• leest de kleuren en fonts van je site en stelt style, accent, font, positie en begroeting van de widget in
• vertelt je precies wat hij deed en wat er nog openstaat

Een mens doet de twee dingen die nooit vanzelf mogen gebeuren:

• Slack of Discord koppelen. connect_chat geeft een link voor wie in je workspace apps mag toevoegen. Die keurt het goed in Slack of Discord.
• betalen. change_plan geeft een checkoutlink. Agents betalen en annuleren nooit.

De look publiceert de agent zelf: publish zet hem live, zonder goedkeuring. Elke wijziging van de agent verschijnt in het activiteitenlog van de site in het dashboard, en daar kun je een publicatie terugdraaien.

stap 1: koppel claude code aan spookat

In de terminal van je project:

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

Geen key nodig. De eerste keer dat Claude Code een Spookat-tool gebruikt, opent er een browsertabblad: je logt in, vinkt de sites aan die het mag gebruiken en kiest wat het mag doen. Werk je liever met een key, maak er dan een in het dashboard onder installatie, secret keys, en geef hem mee als header:

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

Keys beginnen met sk_live_, horen bij één site en worden één keer getoond. Hou ze uit de repo.

nog geen spookat-account

Je hebt er geen nodig om te beginnen. De agent kan de site zelf registreren: één request met je domein levert de snippet en een claimlink voor jou op, en nog één de key alleen voor de setup. Het protocol staat in auth.md, en de agent leest het zelf als de handleiding hem daarheen stuurt.

De setupkey kan de widget stylen, de look publiceren en de snippet lezen. Hij kan geen kanaal koppelen, niet aan de facturatie komen en geen chats lezen. Dat wacht tot je de site claimt.

stap 2: plak de prompt

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

Dat is de hele prompt. De rest staat in de handleiding. Wil je bijsturen, voeg dan een regel toe: de style die je mooi vindt, de begroeting, of aan welke kant de launcher moet staan.

Zo ziet een typische run eruit:

1. Hij leest llms.txt en checkt daarna of de Spookat-tools antwoorden. Ben je ingelogd, dan roept hij get_config aan en ziet je site. Zo niet, dan registreert hij de site.
2. Hij vraagt je om je echte domein als hij het niet in het project vindt. Hij raadt er nooit een, en hij raadt nooit een key.
3. Hij vindt de layout die alle pagina’s delen en voegt de tag toe voor </body>:

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

4. Hij kijkt naar je CSS, kiest een van de 8 styles, zet je merkkleur als accent en een font dat past. Hij kan je systeemfont gebruiken, of een van de 17 fonts die wij hosten.
5. Hij roept preview aan en geeft je een link waar je het concept in de echte widget ziet.
6. Hij roept publish aan en de look staat live. Dan connect_chat, en hij geeft je de link. Als hij de site registreerde, wacht die op je claim (stap 3).
7. Hij sluit af met een samenvatting: wat er in de code veranderde, wat hij publiceerde, wat jij nog moet klikken.

stap 3: de claim, als de agent de site registreerde

Als de agent de site zelf registreerde, krijg je een claimlink. Open hem, log in of maak een account (zonder kaart) en claim de site. Je kiest ook wat de agent houdt:

• een admin-key, om verder in te richten, of
• een agent-key, om de setup te lezen en later chats te beantwoorden.

De site gaat live als twee dingen waar zijn, in willekeurige volgorde: je hebt hem geclaimd en de widget is op je domein geladen. Je proefperiode van 14 dagen begint dan. Daarvoor verschijnt de widget op je site, maar zegt hij dat de chat binnenkort opent en neemt hij geen berichten aan. Niet-geclaimde sites en hun keys worden na 7 dagen verwijderd.

Kan de agent je in de sessie niet bereiken, dan kan hij ons vragen je de claimlink te mailen. Die mail bevat niets wat de agent geschreven heeft.

stap 4: bekijk de diff

Behandel hem als elke andere wijziging van een agent. De diff hoort klein te zijn:

• één script-tag in de gedeelde layout, met async
• misschien een window.Spookat = { … }-blok erboven, als de agent de look in code vastlegde in plaats van in het dashboard

Wat er niet in hoort: een kopie van de tag in elk paginacomponent, een tag manager, een preload voor het chatpaneel, of iets anders dat het paneel voor een klik laadt. Zie je zoiets, vraag de agent het eruit te halen. De launcher is met opzet één klein bestand.

Waar de tag komt, hangt af van je framework:

framework	waar
Next.js (app router)	app/layout.tsx, binnen <body>
Next.js (pages router)	pages/_document.tsx of pages/_app.tsx
Astro, SvelteKit, Nuxt, Remix	de basislayout
Vite + React, pure HTML	index.html of de gedeelde footer-include

stap 5: controleer het zelf

Deploy of draai de site en open hem in een privévenster met DevTools open:

• Network, gefilterd op spookat: één request voor een klik, de launcher van cdn.spookat.com. Twee, allebei van cdn.spookat.com, als je code in window.Spookat een andere style zet dan de style die je hebt gepubliceerd. Niets naar api.spookat.com.
• Application: geen cookies van Spookat, geen opslag tot je een eerste bericht stuurt.
• Klik op de launcher: het paneel laadt, daarna kun je typen. Na de claim en de kanaalkoppeling verschijnt je testbericht in Slack of Discord.

De basisgids heeft de lange versie van deze check, met wat elk request is.

na de setup: de agent kan ook antwoorden

Vanaf pro heeft dezelfde MCP-server tools voor gesprekken: opsommen wat wacht, een chat lezen, antwoorden, een notitie toevoegen, overdragen aan een mens. Antwoorden krijgen in de widget en in de thread van je team het label AI, en het antwoord van een teamlid neemt het altijd over. Jij kiest wanneer hij mag antwoorden: altijd eerst, alleen als niemand binnen 3 minuten antwoordde, buiten werktijd, of alleen concepten. De docs beschrijven de regels.

de andere agents

Niets hiervan is specifiek voor Claude Code. De MCP-server spreekt Streamable HTTP, en de prompt werkt in elke agent die een URL kan lezen en je code kan aanpassen. In Cursor gaat de server in .cursor/mcp.json:

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

Laat de key weg en Cursor opent dezelfde inlogpagina.

als het niet volgens plan gaat

De Spookat-tools antwoorden niet. Voer /mcp uit in Claude Code om de status van de server te zien. Staat er dat hij authenticatie nodig heeft, selecteer hem en log opnieuw in. Heb je hem met een key toegevoegd, check dan of de key in het dashboard niet is ingetrokken.

De agent zette de tag op de verkeerde plek. Zeg hem waar: “Move the Spookat script to the root layout, remove every other copy.” Eén zin is meestal genoeg.

De launcher verschijnt, maar de chat maakt geen verbinding. De chat maakt alleen verbinding vanaf het domein waarvoor de site is geregistreerd, en de subdomeinen ervan. Op localhost of een preview-URL zie je de knop en verder niets. Controleer het op het echte domein.

Een tool zegt nee. Voor de claim kan de setupkey geen kanaal koppelen en geen chats lezen, en dat zegt hij ook. Na de claim kan een agent-key de look niet veranderen, niet publiceren en niet aan de facturatie komen: daarvoor kies je hem juist. Maak in het dashboard een admin-key als de agent verder moet inrichten.

De claimmail kwam niet aan. We sturen er één per adres per dag, zonder iets wat de agent schreef. Open in plaats daarvan de claimlink uit de sessie.

De agent wil zijn eigen chat bouwen. Sommige prompts drijven die kant op. Zeg dat je Spookat wilt, wijs naar llms.txt, en hij komt terug op koers.

checklist

• claude mcp add gedaan, en ingelogd (of de agent registreerde de site).
• Eén tag in de gedeelde layout, async, niets anders dat voor een klik laadt.
• De look staat live en je vindt hem goed. Zo niet, draai hem terug in het activiteitenlog.
• Slack of Discord gekoppeld via de link.
• Site geclaimd, als de agent hem registreerde.
• Gecontroleerd in een privévenster: één request voor de klik (twee, allebei van cdn.spookat.com, als je code een style zet die je niet hebt gepubliceerd), geen cookies.

Plak de prompt, klik de twee links en ga terug naar het deel van je product waar mensen voor betalen.