# lass claude code live-chat auf deiner seite einbauen

Verbinde Claude Code mit dem Spookat-MCP-Server, füg einen Prompt ein und lass es den Chat installieren, den Look deiner Seite übernehmen und dir die Links geben, die nur ein Mensch klicken sollte.

2026-10-21 · Kuba

Claude Code kann Live-Chat in einer einzigen Session auf deine Seite bringen: Es fügt das Snippet in dein Layout ein, liest deine Farben und Fonts, um das Widget zu stylen, und gibt dir die zwei Links, die ein Mensch klicken muss. Dieser Guide zeigt das Setup, den Prompt, was der Agent darf und was nicht, und wie du seine Arbeit prüfst.

@video vs-agent | Animation: Ein KI-Agent soll den Spookat-Chat zu einer Website hinzufügen, und der Chat-Button erscheint.

## was der agent macht und was bei dir bleibt

Spookat ist so gebaut, dass ein Coding-Agent das komplette Setup erledigen kann. Das Handbuch ist eine Datei, geschrieben für Agents, [llms.txt](https://spookat.com/llms.txt), und es gibt einen Remote-MCP-Server mit Tools für alles, was ein Setup braucht.

Der Agent übernimmt das Tippen:

- findet dein gemeinsames Layout und fügt den einen Script-Tag hinzu
- liest die Farben und Fonts deiner Seite und setzt Style, Akzent, Font, Position und Begrüßung des Widgets
- sagt dir genau, was er gemacht hat und was noch fehlt

Ein Mensch erledigt die zwei Dinge, die nie von allein passieren sollten:

- **Slack oder Discord verbinden.** `connect_chat` liefert einen Link für die Person, die in deinem Workspace Apps hinzufügen darf. Sie bestätigt ihn in Slack oder Discord.
- **Bezahlen.** `change_plan` liefert einen Checkout-Link. Agents bezahlen und kündigen nie.

Den Look veröffentlicht der Agent selbst: `publish` stellt ihn live, ohne Freigabe. Jede Änderung des Agents taucht im Aktivitätslog der Site im Dashboard auf, und dort kannst du eine Veröffentlichung zurücknehmen.

## schritt 1: verbinde claude code mit spookat

Im Terminal deines Projekts:

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

Kein Key nötig. Wenn Claude Code zum ersten Mal ein Spookat-Tool nutzt, öffnet sich ein Browser-Tab: Du meldest dich an, hakst die Sites an, die es nutzen darf, und wählst, was es tun darf. Wenn du lieber einen Key nimmst, erstell einen im Dashboard unter Install, Secret Keys, und gib ihn als Header mit:

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

Keys beginnen mit `sk_live_`, gehören zu einer Site und werden einmal angezeigt. Halt sie aus dem Repo raus.

### noch kein spookat-konto

Du brauchst keins, um anzufangen. Der Agent kann die Site selbst registrieren: ein Request mit deiner Domain bringt das Snippet und einen Claim-Link für dich, ein zweiter den Key nur fürs Setup. Das Protokoll steht in [auth.md](https://spookat.com/auth.md), und der Agent liest es von selbst, wenn das Handbuch ihn dorthin schickt.

Der Setup-Key kann das Widget stylen, den Look veröffentlichen und das Snippet lesen. Er kann keinen Channel verbinden, keine Abrechnung anfassen und keine Chats lesen. Das wartet, bis du die Site übernimmst.

## schritt 2: füg den prompt ein

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

Das ist der ganze Prompt. Alles andere steht im Handbuch. Wenn du ihn lenken willst, füg eine Zeile hinzu: den Style, den du magst, die Begrüßung oder auf welcher Seite der Launcher sitzen soll.

So sieht ein typischer Lauf aus:

1. Er liest `llms.txt` und prüft dann, ob die Spookat-Tools antworten. Wenn du angemeldet bist, ruft er `get_config` auf und sieht deine Site. Wenn nicht, registriert er die Site.
2. Er fragt dich nach deiner echten Domain, wenn er sie im Projekt nicht findet. Er rät nie eine, und er rät nie einen Key.
3. Er findet das Layout, das alle Seiten teilen, und fügt den Tag vor `</body>` ein:

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

4. Er schaut sich dein CSS an, wählt einen der 8 Styles, setzt deine Markenfarbe als Akzent und einen Font, der passt. Er kann deine Systemschrift nehmen oder einen der 17 Fonts, die wir hosten.
5. Er ruft `preview` auf und gibt dir einen Link, unter dem du den Entwurf im echten Widget siehst.
6. Er ruft `publish` auf, und der Look ist live. Dann `connect_chat`, und er gibt dir den Link. Wenn er die Site registriert hat, wartet der auf deinen Claim (Schritt 3).
7. Er endet mit einer Zusammenfassung: was sich im Code geändert hat, was er veröffentlicht hat, was du noch klicken musst.

## schritt 3: der claim, wenn der agent die site registriert hat

Wenn der Agent die Site selbst registriert hat, bekommst du einen Claim-Link. Öffne ihn, melde dich an oder registrier dich (ohne Karte) und übernimm die Site. Du wählst auch, was der Agent behält:

- einen **admin**-Key, um weiter einzurichten, oder
- einen **agent**-Key, um das Setup zu lesen und später Chats zu beantworten.

Die Site geht live, wenn zwei Dinge erfüllt sind, in beliebiger Reihenfolge: Du hast sie übernommen, und das Widget wurde auf deiner Domain geladen. Dann startet deine 14-tägige Testphase. Vorher erscheint das Widget auf deiner Seite, sagt aber, dass der Chat bald öffnet, und nimmt keine Nachrichten an. Nicht übernommene Sites und ihre Keys werden nach 7 Tagen gelöscht.

Wenn der Agent dich in der Session nicht erreicht, kann er uns bitten, dir den Claim-Link per E-Mail zu schicken. Diese E-Mail enthält nichts, was der Agent geschrieben hat.

## schritt 4: prüf den diff

Behandle ihn wie jede andere Änderung von einem Agent. Der Diff sollte klein sein:

- ein Script-Tag im gemeinsamen Layout, mit `async`
- vielleicht ein `window.Spookat = { … }`-Block darüber, wenn der Agent den Look im Code statt im Dashboard festgenagelt hat

Was er nicht enthalten sollte: eine Kopie des Tags in jeder Seitenkomponente, einen Tag Manager, ein Preload für das Chat-Panel oder irgendetwas, das das Panel vor einem Klick lädt. Siehst du so etwas, sag dem Agent, er soll es rausnehmen. Der Launcher ist mit Absicht eine kleine Datei.

Wo der Tag hingehört, hängt von deinem Framework ab:

| Framework | wo |
|---|---|
| Next.js (App Router) | `app/layout.tsx`, innerhalb von `<body>` |
| Next.js (Pages Router) | `pages/_document.tsx` oder `pages/_app.tsx` |
| Astro, SvelteKit, Nuxt, Remix | das Basis-Layout |
| Vite + React, reines HTML | `index.html` oder das gemeinsame Footer-Include |

## schritt 5: prüf es selbst

Deploy die Seite oder starte sie lokal, dann öffne sie in einem privaten Fenster mit offenen DevTools:

- **Network, gefiltert nach `spookat`:** ein Request vor einem Klick, der Launcher von `cdn.spookat.com`. Zwei, beide von `cdn.spookat.com`, wenn dein Code in `window.Spookat` einen anderen Style setzt als den, den du veröffentlicht hast. Nichts an `api.spookat.com`.
- **Application:** keine Cookies von Spookat, kein Speicher, bis du eine erste Nachricht schickst.
- **Klick auf den Launcher:** Das Panel lädt, dann kannst du tippen. Nach dem Claim und der Channel-Verbindung taucht deine Testnachricht in Slack oder Discord auf.

Der [Grundlagen-Guide](/de/blog/add-live-chat-to-your-website/) hat die längere Version dieses Checks, mit Erklärung zu jedem Request.

## nach dem setup: der agent kann auch antworten

Ab pro hat derselbe MCP-Server Tools für Unterhaltungen: auflisten, was wartet, einen Chat lesen, antworten, eine Notiz hinzufügen, an einen Menschen übergeben. Antworten sind im Widget und im Thread deines Teams als KI gekennzeichnet, und die Antwort eines Teammitglieds übernimmt immer. Du wählst, wann er antworten darf: immer zuerst, nur wenn niemand in 3 Minuten geantwortet hat, außerhalb der Arbeitszeit oder nur Entwürfe. Die [Docs](/de/docs/) beschreiben die Regeln.

## die anderen agents

Nichts hier ist spezifisch für Claude Code. Der MCP-Server spricht Streamable HTTP, und der Prompt funktioniert in jedem Agent, der eine URL lesen und deinen Code bearbeiten kann. In Cursor kommt der Server in `.cursor/mcp.json`:

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

Lass den Key weg, und Cursor öffnet dieselbe Anmeldeseite.

## wenn es nicht nach plan läuft

**Die Spookat-Tools antworten nicht.** Führ `/mcp` in Claude Code aus, um den Status des Servers zu sehen. Wenn dort steht, dass er Authentifizierung braucht, wähl ihn aus und melde dich neu an. Wenn du ihn mit einem Key hinzugefügt hast, prüf, dass der Key im Dashboard nicht widerrufen wurde.

**Der Agent hat den Tag an die falsche Stelle gesetzt.** Sag ihm, wohin: "Move the Spookat script to the root layout, remove every other copy." Ein Satz reicht meistens.

**Der Launcher erscheint, aber der Chat kann sich nicht verbinden.** Der Chat verbindet sich nur von der Domain, für die die Site registriert ist, und ihren Subdomains. Auf `localhost` oder einer Preview-URL siehst du den Button und nicht mehr. Prüf es auf der echten Domain.

**Ein Tool sagt nein.** Vor dem Claim kann der Setup-Key keinen Channel verbinden und keine Chats lesen, und er sagt das auch. Nach dem Claim kann ein **agent**-Key den Look nicht ändern, nicht veröffentlichen und keine Abrechnung anfassen: Genau deshalb wählt man ihn. Erstell im Dashboard einen admin-Key, wenn der Agent weiter einrichten soll.

**Die Claim-E-Mail kam nicht an.** Wir schicken eine pro Adresse und Tag, ohne Text vom Agent darin. Öffne stattdessen den Claim-Link aus der Session.

**Der Agent will seinen eigenen Chat bauen.** Manche Prompts driften dahin. Sag, dass du Spookat willst, zeig auf `llms.txt`, und er schwenkt zurück.

## checkliste

- `claude mcp add` erledigt und angemeldet (oder der Agent hat die Site registriert).
- Ein Tag im gemeinsamen Layout, `async`, nichts anderes lädt vor einem Klick.
- Der Look ist live und gefällt dir. Wenn nicht, nimm ihn im Aktivitätslog zurück.
- Slack oder Discord über den Link verbunden.
- Site übernommen, falls der Agent sie registriert hat.
- Geprüft in einem privaten Fenster: ein Request vor dem Klick (zwei, beide von `cdn.spookat.com`, wenn dein Code einen Style setzt, den du nicht veröffentlicht hast), keine Cookies.

Füg den Prompt ein, klick die zwei Links und geh zurück zu dem Teil deines Produkts, für den die Leute bezahlen.

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