# niech claude code doda live chat do twojej strony

Podepnij Claude Code do serwera MCP Spookat, wklej jeden prompt i pozwól mu wpiąć czat, dopasować wygląd do strony i oddać ci linki, które klika człowiek.

2026-10-21 · Kuba

Claude Code wrzuci live chat na twoją stronę w jednej sesji: doda snippet do layoutu, przeczyta twoje kolory i fonty, żeby ostylować widżet, i da ci dwa linki, które musi kliknąć człowiek. Z tego poradnika dowiesz się, jak to ustawić, jaki prompt wkleić, co agentowi wolno, a czego nie, i jak sprawdzić jego robotę.

@video vs-agent | Animacja: agent AI dostaje polecenie dodania czatu Spookat do strony i pojawia się przycisk czatu.

## co robi agent, a co zostaje po twojej stronie

Spookat jest zbudowany tak, żeby agent od kodu mógł zrobić cały setup. Manual to jeden plik pisany dla agentów, [llms.txt](https://spookat.com/llms.txt), a do tego jest zdalny serwer MCP z narzędziami na wszystko, czego setup potrzebuje.

Agent robi klepanie:

- znajduje wspólny layout i dodaje jeden tag script
- czyta kolory i fonty strony i ustawia styl widżetu, akcent, font, pozycję i powitanie
- mówi ci dokładnie, co zrobił i co zostało

Człowiek robi dwie rzeczy, które nigdy nie powinny dziać się same:

- **podłączenie Slacka albo Discorda.** `connect_chat` zwraca link dla tego, kto może dodawać aplikacje w twoim workspace'ie. Ta osoba zatwierdza to w Slacku albo Discordzie.
- **płatność.** `change_plan` zwraca link do checkoutu. Agenci nigdy nie płacą i nie anulują.

Wygląd agent publikuje sam: `publish` wrzuca go na żywo, bez zatwierdzania. Każda zmiana, którą robi agent, pojawia się w logu aktywności strony w dashboardzie i tam możesz cofnąć publikację.

## krok 1: podepnij claude code do spookat

W terminalu projektu:

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

Klucz nie jest potrzebny. Za pierwszym razem, gdy Claude Code użyje narzędzia Spookat, otworzy się karta w przeglądarce: logujesz się, zaznaczasz strony, których może używać, i wybierasz, co mu wolno. Jeśli wolisz klucz, zrób go w dashboardzie w install, secret keys, i przekaż jako nagłówek:

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

Klucze zaczynają się od `sk_live_`, należą do jednej strony i widać je tylko raz. Trzymaj je poza repo.

### nie masz jeszcze konta w spookat

Nie potrzebujesz go na start. Agent może sam zarejestrować stronę: jeden request z twoją domeną daje snippet i link do przejęcia strony dla ciebie, a jeszcze jeden daje klucz tylko do setupu. Protokół jest w [auth.md](https://spookat.com/auth.md), a agent czyta go sam, kiedy manual go tam odeśle.

Klucz tylko do setupu może stylować widżet, publikować wygląd i odczytać snippet. Nie może podłączać kanału, dotykać płatności ani czytać czatów. To czeka, aż przejmiesz stronę.

## krok 2: wklej prompt

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

To cały prompt. Reszta jest w manualu. Jeśli chcesz go pokierować, dopisz linijkę: styl, który lubisz, powitanie albo stronę, po której ma siedzieć launcher.

Tak wygląda typowy przebieg:

1. Czyta `llms.txt`, potem sprawdza, czy narzędzia Spookat odpowiadają. Jeśli jesteś zalogowany, woła `get_config` i widzi twoją stronę. Jeśli nie, rejestruje stronę.
2. Pyta cię o prawdziwą domenę, jeśli nie znajdzie jej w projekcie. Nigdy jej nie zgaduje i nigdy nie zgaduje klucza.
3. Znajduje layout wspólny dla wszystkich stron i dodaje tag przed `</body>`:

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

4. Przegląda twój CSS, wybiera jeden z 8 stylów, ustawia kolor marki jako akcent i font, który pasuje. Może użyć fontu systemowego albo jednego z 17 fontów, które hostujemy.
5. Woła `preview` i daje ci link, pod którym widzisz draft w prawdziwym widżecie.
6. Woła `publish` i wygląd jest na żywo. Potem `connect_chat` i oddaje ci link. Jeśli sam zarejestrował stronę, ten czeka na twoje przejęcie (krok 3).
7. Kończy podsumowaniem: co zmienił w kodzie, co opublikował i co jeszcze musisz kliknąć.

## krok 3: przejęcie, jeśli agent zarejestrował stronę

Kiedy agent sam zarejestrował stronę, dostajesz link do przejęcia. Otwórz go, zaloguj się albo załóż konto (bez karty) i przejmij stronę. Wybierasz też, co zostaje agentowi:

- klucz **admin**, żeby dalej ustawiał rzeczy, albo
- klucz **agent**, żeby czytał setup i później odpisywał na czaty.

Strona rusza, kiedy spełnione są dwie rzeczy, w dowolnej kolejności: przejąłeś ją, a widżet załadował się na twojej domenie. Wtedy startuje twój 14-dniowy trial. Wcześniej widżet widać na stronie, ale mówi, że czat niedługo ruszy, i nie przyjmuje wiadomości. Nieprzejęte strony i ich klucze kasujemy po 7 dniach.

Jeśli agent nie może cię złapać w sesji, może poprosić nas o wysłanie linku mailem. W tym mailu nie ma nic, co napisał agent.

## krok 4: przejrzyj diffa

Traktuj to jak każdą inną zmianę od agenta. Diff powinien być mały:

- jeden tag script we wspólnym layoucie, z `async`
- może blok `window.Spookat = { … }` nad nim, jeśli agent przypiął wygląd w kodzie zamiast w dashboardzie

Czego nie powinno tam być: kopii tagu w każdym komponencie strony, tag managera, preloadu panelu czatu ani niczego, co ładuje panel przed kliknięciem. Jeśli coś takiego widzisz, każ agentowi to wyrzucić. Launcher jest jednym małym plikiem celowo.

Gdzie idzie tag, zależy od frameworka:

| framework | gdzie |
|---|---|
| Next.js (app router) | `app/layout.tsx`, wewnątrz `<body>` |
| Next.js (pages router) | `pages/_document.tsx` albo `pages/_app.tsx` |
| Astro, SvelteKit, Nuxt, Remix | bazowy layout |
| Vite + React, czysty HTML | `index.html` albo wspólny include stopki |

## krok 5: sprawdź to sam

Wdróż albo odpal stronę i otwórz ją w oknie prywatnym z otwartym DevTools:

- **Network, filtr `spookat`:** jeden request przed kliknięciem, launcher z `cdn.spookat.com`. Dwa, oba z `cdn.spookat.com`, jeśli twój kod ustawia w `window.Spookat` inny styl niż opublikowany. Nic do `api.spookat.com`.
- **Application:** żadnych cookies od Spookat, żadnego storage, dopóki nie wyślesz pierwszej wiadomości.
- **Kliknij launcher:** panel się ładuje, potem możesz pisać. Po przejęciu strony i podłączeniu kanału twoja testowa wiadomość pojawia się na Slacku albo Discordzie.

[Główny poradnik](/pl/blog/add-live-chat-to-your-website/) ma dłuższą wersję tego testu, z opisem każdego requestu.

## po setupie: agent może też odpisywać

Na pro i wyżej ten sam serwer MCP ma narzędzia do rozmów: lista tego, co czeka, odczyt czatu, odpowiedź, notatka, przekazanie człowiekowi. Odpowiedzi są oznaczone jako AI w widżecie i w wątku twojego zespołu, a odpowiedź kogoś z zespołu zawsze przejmuje czat. Ty wybierasz, kiedy agent może odpisywać: zawsze pierwszy, tylko jeśli nikt nie odpisał w 3 minuty, poza godzinami pracy albo tylko drafty. Zasady są opisane w [dokumentacji](/pl/docs/).

## inni agenci

Nic tu nie jest specyficzne dla Claude Code. Serwer MCP mówi Streamable HTTP, a prompt działa w każdym agencie, który umie przeczytać URL i edytować twój kod. W Cursorze serwer idzie do `.cursor/mcp.json`:

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

Bez klucza Cursor otworzy tę samą stronę logowania.

## kiedy coś idzie nie tak

**Narzędzia Spookat nie odpowiadają.** Odpal `/mcp` w Claude Code, żeby zobaczyć status serwera. Jeśli mówi, że potrzebuje uwierzytelnienia, wybierz go i zaloguj się jeszcze raz. Jeśli dodałeś go z kluczem, sprawdź, czy klucz nie został unieważniony w dashboardzie.

**Agent dał tag w złe miejsce.** Powiedz mu, gdzie ma być: „Move the Spookat script to the root layout, remove every other copy.” Jedno zdanie zwykle wystarcza.

**Launcher jest, ale czat nie może się połączyć.** Czat łączy się tylko z domeny, na którą zarejestrowana jest strona, i jej subdomen. Na `localhost` albo adresie podglądu zobaczysz przycisk i nic więcej. Sprawdzaj na prawdziwej domenie.

**Narzędzie odmawia.** Przed przejęciem klucz tylko do setupu nie może podłączać kanału ani czytać czatów i mówi to wprost. Po przejęciu klucz **agent** nie może zmieniać wyglądu, publikować ani dotykać płatności: po to się go wybiera. Zrób w dashboardzie klucz admin, jeśli chcesz, żeby agent dalej ustawiał rzeczy.

**Mail z linkiem do przejęcia nie przyszedł.** Wysyłamy jeden dziennie na adres i nie ma w nim nic, co napisał agent. Otwórz link do przejęcia z sesji.

**Agent chce budować własny czat.** Niektóre prompty dryfują w tę stronę. Powiedz, że chcesz Spookat, wskaż `llms.txt` i wraca na tor.

## checklista

- `claude mcp add` zrobione i jesteś zalogowany (albo agent zarejestrował stronę).
- Jeden tag we wspólnym layoucie, `async`, nic więcej nie ładuje się przed kliknięciem.
- Wygląd jest na żywo i ci się podoba. Jeśli nie, cofnij go w logu aktywności.
- Slack albo Discord podłączony przez link.
- Strona przejęta, jeśli zarejestrował ją agent.
- Sprawdzone w oknie prywatnym: jeden request przed kliknięciem (dwa, oba z `cdn.spookat.com`, jeśli twój kod ustawia nieopublikowany styl), zero cookies.

Wklej prompt, kliknij dwa linki i wracaj do tej części produktu, za którą ludzie płacą.

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