# laat claude code live chat aan je site toevoegen

Koppel Claude Code aan de MCP-server van Spookat, plak één prompt en laat het de chat installeren, de look van je site overnemen en je de links geven die alleen een mens hoort te klikken.

2026-10-21 · Kuba

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.

@video vs-agent | Animatie: een AI-agent krijgt de opdracht Spookat-chat aan een site toe te voegen, en de chatknop verschijnt.

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

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

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

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

```html
<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](/nl/blog/add-live-chat-to-your-website/) 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](/nl/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`:

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

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