# let claude code add live chat to your site

Connect Claude Code to the Spookat MCP server, paste one prompt, and let it install the chat, match your site's look and hand you the links only a human should click.

2026-10-21 · Kuba

Claude Code can put live chat on your site in one session: it adds the snippet to your layout, reads your colors and fonts to style the widget, and gives you the two links a human has to click. This guide shows the setup, the prompt, what the agent is and isn't allowed to do, and how to check its work.

@video vs-agent | Animation: an AI agent is asked to add Spookat chat to a site, and the chat button appears.

## what the agent does and what stays with you

Spookat was built so a coding agent can do the whole setup. The manual is one file written for agents, [llms.txt](https://spookat.com/llms.txt), and there's a remote MCP server with tools for everything a setup needs.

The agent does the typing:

- finds your shared layout and adds the one script tag
- reads your site's colors and fonts and sets the widget's style, accent, font, position and greeting
- tells you exactly what it did and what's left

A human does the two things that should never happen by themselves:

- **connecting Slack or Discord.** `connect_chat` returns a link for whoever can add apps in your workspace. They approve it in Slack or Discord.
- **paying.** `change_plan` returns a checkout link. Agents never pay or cancel.

The agent publishes the look itself: `publish` puts it live, no approval step. Every change the agent makes shows up in the site's activity log in the dashboard, and you can revert a publish there.

## step 1: connect claude code to spookat

In your project's terminal:

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

No key needed. The first time Claude Code uses a Spookat tool, a browser tab opens: you sign in, tick the sites it may use and pick what it may do. If you prefer a key, make one in the dashboard under install, secret keys, and pass it as a header:

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

Keys start with `sk_live_`, belong to one site and are shown once. Keep them out of the repo.

### no spookat account yet

You don't need one to start. The agent can register the site by itself: one request with your domain gets the snippet and a claim link for you, and one more gets the setup-only key. The protocol is in [auth.md](https://spookat.com/auth.md), and the agent reads it on its own when the manual sends it there.

The setup-only key can style the widget, publish the look and read the snippet. It can't connect a channel, touch billing or read chats. Those wait until you claim the site.

## step 2: paste the prompt

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

That's the whole prompt. Everything else is in the manual. If you want to steer it, add a line: the style you like, the greeting, or which side the launcher should sit on.

What a typical run looks like:

1. It reads `llms.txt`, then checks whether the Spookat tools answer. If you're signed in, it calls `get_config` and sees your site. If not, it registers the site.
2. It asks you for your real domain if it can't find it in the project. It never guesses one, and it never guesses a key.
3. It finds the layout every page shares and adds the tag before `</body>`:

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

4. It looks at your CSS, picks one of the 8 styles, sets your brand color as the accent and a font that fits. It can use your system font, or one of the 17 fonts we host.
5. It calls `preview` and gives you a link where you see the draft in the real widget.
6. It calls `publish`, and the look is live. Then `connect_chat`, and it hands you the link. If it registered the site, that one waits for your claim (step 3).
7. It ends with a summary: what changed in the code, what it published, what you still have to click.

## step 3: the claim, if the agent registered the site

When the agent registered the site itself, you get a claim link. Open it, sign in or sign up (no card), and claim the site. You also choose what the agent keeps:

- an **admin** key, to keep setting things up, or
- an **agent** key, to read the setup and answer chats later.

The site goes live when two things are true, in either order: you claimed it, and the widget has loaded on your domain. Your 14-day trial starts then. Before that, the widget shows on your site but says the chat opens soon and takes no messages. Unclaimed sites and their keys are deleted after 7 days.

If the agent can't reach you in the session, it can ask us to email the claim link to you. That email contains nothing the agent wrote.

## step 4: review the diff

Treat it like any other change from an agent. The diff should be small:

- one script tag in the shared layout, with `async`
- maybe a `window.Spookat = { … }` block above it, if the agent pinned the look in code instead of the dashboard

What it should not contain: a copy of the tag on every page component, a tag manager, a preload for the chat panel, or anything that loads the panel before a click. If you see one of those, tell the agent to take it out. The launcher is one small file on purpose.

Where the tag goes depends on your framework:

| framework | where |
|---|---|
| Next.js (app router) | `app/layout.tsx`, inside `<body>` |
| Next.js (pages router) | `pages/_document.tsx` or `pages/_app.tsx` |
| Astro, SvelteKit, Nuxt, Remix | the base layout |
| Vite + React, plain HTML | `index.html` or the shared footer include |

## step 5: check it yourself

Deploy or run the site, then open it in a private window with DevTools open:

- **Network, filtered by `spookat`:** one request before a click, the launcher from `cdn.spookat.com`. Two, both from `cdn.spookat.com`, if your code sets a style in `window.Spookat` that isn't the one you published. Nothing to `api.spookat.com`.
- **Application:** no cookies from Spookat, no storage until you send a first message.
- **Click the launcher:** the panel loads, then you can type. After the claim and the channel connection, your test message shows up in Slack or Discord.

The [pillar guide](/blog/add-live-chat-to-your-website/) has the longer version of this check, with what each request is.

## after the setup: the agent can answer too

On pro and above, the same MCP server has tools for conversations: list what's waiting, read a chat, reply, add a note, hand off to a human. Replies are labelled AI in the widget and in your team's thread, and a teammate's reply always takes over. You pick when it may answer: always first, only if nobody replied in 3 minutes, outside working hours, or drafts only. The [docs](/docs/) describe the rules.

## the other agents

Nothing here is Claude Code specific. The MCP server speaks Streamable HTTP, and the prompt works in any agent that can read a URL and edit your code. In Cursor, the server goes in `.cursor/mcp.json`:

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

Leave the key out and Cursor opens the same sign-in page.

## when it doesn't go as planned

**The Spookat tools don't answer.** Run `/mcp` in Claude Code to see the server's status. If it says it needs authentication, pick it and sign in again. If you added it with a key, check that the key wasn't revoked in the dashboard.

**The agent put the tag in the wrong place.** Tell it where: "Move the Spookat script to the root layout, remove every other copy." One sentence usually fixes it.

**The launcher shows, but the chat can't connect.** The chat only connects from the domain the site is registered for, and its subdomains. On `localhost` or a preview URL you'll see the button and nothing more. Check on the real domain.

**A tool says no.** Before the claim, the setup-only key can't connect a channel or read chats, and it says so. After the claim, an **agent** key can't change the look, publish or touch billing: that's the point of choosing it. Make an admin key in the dashboard if you want the agent to keep setting things up.

**The claim email didn't arrive.** We send one per address a day, with nothing the agent wrote in it. Open the claim link from the session instead.

**The agent wants to build its own chat.** Some prompts drift that way. Say that you want Spookat, point at `llms.txt`, and it switches back.

## checklist

- `claude mcp add` done, and signed in (or the agent registered the site).
- One tag in the shared layout, `async`, nothing else loading before a click.
- The look is live and you like it. If not, revert it from the activity log.
- Slack or Discord connected through the link.
- Site claimed, if the agent registered it.
- Checked in a private window: one request before the click (two, both from `cdn.spookat.com`, if your code sets a style you didn't publish), no cookies.

Paste the prompt, click the two links, and go back to the part of your product people pay for.

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