let claude code add live chat to your site

October 21, 2026 · by kuba · 7 min read

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.

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

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:

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

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:

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.
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.
It finds the layout every page shares and adds the tag before </body>:

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

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.
It calls preview and gives you a link where you see the draft in the real widget.
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).
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 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 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:

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