lass claude code live-chat auf deiner seite einbauen

21. Oktober 2026 · von kuba · 7 min lesen

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.

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

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:

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

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:

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.
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.
Er findet das Layout, das alle Seiten teilen, und fügt den Tag vor </body> ein:

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

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.
Er ruft preview auf und gibt dir einen Link, unter dem du den Entwurf im echten Widget siehst.
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).
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 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 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:

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