# laissez claude code ajouter un live chat à votre site

Connectez Claude Code au serveur MCP de Spookat, collez un prompt, et laissez-le installer le chat, reprendre l’apparence de votre site et vous donner les liens que seul un humain doit cliquer.

2026-10-21 · Kuba

Claude Code peut installer un live chat sur votre site en une seule session : il ajoute le snippet à votre layout, lit vos couleurs et vos polices pour styler le widget, et vous donne les deux liens qu’un humain doit cliquer. Ce guide montre l’installation, le prompt, ce que l’agent a le droit de faire ou non, et comment vérifier son travail.

@video vs-agent | Animation : on demande à un agent IA d’ajouter le chat Spookat à un site, et le bouton du chat apparaît.

## ce que fait l’agent et ce qui reste entre vos mains

Spookat a été conçu pour qu’un agent de code puisse faire toute l’installation. Le manuel tient dans un fichier écrit pour les agents, [llms.txt](https://spookat.com/llms.txt), et il existe un serveur MCP distant avec des outils pour tout ce dont une installation a besoin.

L’agent se charge de la saisie :

- il trouve votre layout partagé et y ajoute l’unique balise script
- il lit les couleurs et les polices de votre site et règle le style, l’accent, la police, la position et le message d’accueil du widget
- il vous dit exactement ce qu’il a fait et ce qui reste à faire

Un humain fait les deux choses qui ne doivent jamais se faire toutes seules :

- **connecter Slack ou Discord.** `connect_chat` renvoie un lien pour la personne qui peut ajouter des applications dans votre espace de travail. Elle valide dans Slack ou Discord.
- **payer.** `change_plan` renvoie un lien de paiement. Les agents ne paient et ne résilient jamais.

L’apparence, l’agent la publie lui-même : `publish` la met en ligne, sans validation. Chaque modification de l’agent apparaît dans le journal d’activité du site, dans le tableau de bord, et vous pouvez y annuler une publication.

## étape 1 : connecter claude code à spookat

Dans le terminal de votre projet :

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

Aucune clé n’est nécessaire. La première fois que Claude Code utilise un outil Spookat, un onglet s’ouvre dans le navigateur : vous vous connectez, cochez les sites qu’il peut utiliser et choisissez ce qu’il peut faire. Si vous préférez une clé, créez-en une dans le tableau de bord sous installation, clés secrètes, et passez-la en en-tête :

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

Les clés commencent par `sk_live_`, appartiennent à un seul site et ne s’affichent qu’une fois. Gardez-les hors du dépôt.

### pas encore de compte spookat

Vous n’en avez pas besoin pour commencer. L’agent peut enregistrer le site tout seul : une requête avec votre domaine lui rapporte le snippet et un lien de réclamation pour vous, et une deuxième, la clé limitée à l’installation. Le protocole est dans [auth.md](https://spookat.com/auth.md), et l’agent le lit de lui-même quand le manuel l’y envoie.

La clé d’installation peut styler le widget, publier l’apparence et lire le snippet. Elle ne peut pas connecter un canal, toucher à la facturation ni lire les conversations. Tout cela attend que vous ayez réclamé le site.

## étape 2 : collez le prompt

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

C’est tout le prompt. Le reste est dans le manuel. Si vous voulez l’orienter, ajoutez une ligne : le style que vous aimez, le message d’accueil, ou le côté où doit se placer le lanceur.

À quoi ressemble une exécution typique :

1. Il lit `llms.txt`, puis vérifie si les outils Spookat répondent. Si vous êtes connecté, il appelle `get_config` et voit votre site. Sinon, il enregistre le site.
2. Il vous demande votre vrai domaine s’il ne le trouve pas dans le projet. Il n’en invente jamais, et n’invente jamais de clé.
3. Il trouve le layout que partagent toutes les pages et ajoute la balise avant `</body>` :

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

4. Il regarde votre CSS, choisit l’un des 8 styles, prend la couleur de votre marque comme accent et une police qui convient. Il peut utiliser votre police système, ou l’une des 17 polices que nous hébergeons.
5. Il appelle `preview` et vous donne un lien où vous voyez le brouillon dans le vrai widget.
6. Il appelle `publish`, et l’apparence est en ligne. Puis `connect_chat`, et il vous remet le lien. S’il a enregistré le site, celui-là attend votre réclamation (étape 3).
7. Il termine par un résumé : ce qui a changé dans le code, ce qu’il a publié, ce qu’il vous reste à cliquer.

## étape 3 : la réclamation, si l’agent a enregistré le site

Quand l’agent a enregistré le site lui-même, vous recevez un lien de réclamation. Ouvrez-le, connectez-vous ou créez un compte (sans carte), et réclamez le site. Vous choisissez aussi ce que l’agent conserve :

- une clé **admin**, pour continuer à tout configurer, ou
- une clé **agent**, pour lire la configuration et répondre aux conversations plus tard.

Le site passe en ligne quand deux conditions sont réunies, dans n’importe quel ordre : vous l’avez réclamé, et le widget s’est chargé sur votre domaine. Votre essai de 14 jours commence à ce moment-là. Avant, le widget s’affiche sur votre site mais indique que le chat ouvre bientôt, et n’accepte aucun message. Les sites non réclamés et leurs clés sont supprimés au bout de 7 jours.

Si l’agent ne peut pas vous joindre pendant la session, il peut nous demander de vous envoyer le lien de réclamation par e-mail. Cet e-mail ne contient rien de ce que l’agent a écrit.

## étape 4 : relisez le diff

Traitez-le comme n’importe quelle autre modification faite par un agent. Le diff devrait être petit :

- une balise script dans le layout partagé, avec `async`
- peut-être un bloc `window.Spookat = { … }` au-dessus, si l’agent a fixé l’apparence dans le code plutôt que dans le tableau de bord

Ce qu’il ne devrait pas contenir : une copie de la balise dans chaque composant de page, un gestionnaire de balises, un preload pour le panneau de chat, ou quoi que ce soit qui charge le panneau avant un clic. Si vous voyez l’un de ces éléments, demandez à l’agent de le retirer. Le lanceur est un petit fichier, et c’est voulu.

L’emplacement de la balise dépend de votre framework :

| framework | emplacement |
|---|---|
| Next.js (app router) | `app/layout.tsx`, dans `<body>` |
| Next.js (pages router) | `pages/_document.tsx` ou `pages/_app.tsx` |
| Astro, SvelteKit, Nuxt, Remix | le layout de base |
| Vite + React, HTML pur | `index.html` ou l’include du pied de page partagé |

## étape 5 : vérifiez vous-même

Déployez ou lancez le site, puis ouvrez-le dans une fenêtre privée avec les DevTools ouverts :

- **Network, filtré sur `spookat` :** une requête avant un clic, le lanceur depuis `cdn.spookat.com`. Deux, toutes deux depuis `cdn.spookat.com`, si votre code définit dans `window.Spookat` un autre style que celui que vous avez publié. Rien vers `api.spookat.com`.
- **Application :** aucun cookie de Spookat, aucun stockage tant que vous n’avez pas envoyé un premier message.
- **Cliquez sur le lanceur :** le panneau se charge, puis vous pouvez écrire. Après la réclamation et la connexion du canal, votre message de test apparaît dans Slack ou Discord.

Le [guide de référence](/fr/blog/add-live-chat-to-your-website/) contient la version longue de cette vérification, avec le détail de chaque requête.

## après l’installation : l’agent peut aussi répondre

À partir de pro, le même serveur MCP a des outils pour les conversations : lister ce qui attend, lire une conversation, répondre, ajouter une note, passer la main à un humain. Les réponses sont marquées IA dans le widget et dans le fil de votre équipe, et la réponse d’un coéquipier prend toujours le dessus. Vous choisissez quand il peut répondre : toujours en premier, seulement si personne n’a répondu en 3 minutes, en dehors des heures de travail, ou seulement en brouillon. La [documentation](/fr/docs/) décrit les règles.

## les autres agents

Rien ici n’est propre à Claude Code. Le serveur MCP parle Streamable HTTP, et le prompt fonctionne avec tout agent capable de lire une URL et de modifier votre code. Dans Cursor, le serveur se déclare dans `.cursor/mcp.json` :

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

Omettez la clé et Cursor ouvre la même page de connexion.

## quand ça ne se passe pas comme prévu

**Les outils Spookat ne répondent pas.** Lancez `/mcp` dans Claude Code pour voir l’état du serveur. S’il indique qu’il faut s’authentifier, sélectionnez-le et reconnectez-vous. Si vous l’avez ajouté avec une clé, vérifiez qu’elle n’a pas été révoquée dans le tableau de bord.

**L’agent a mis la balise au mauvais endroit.** Dites-lui où la mettre : "Move the Spookat script to the root layout, remove every other copy." Une phrase suffit en général.

**Le lanceur s’affiche, mais le chat ne se connecte pas.** Le chat ne se connecte que depuis le domaine pour lequel le site est enregistré, et ses sous-domaines. Sur `localhost` ou une URL de prévisualisation, vous verrez le bouton et rien de plus. Vérifiez sur le vrai domaine.

**Un outil refuse.** Avant la réclamation, la clé d’installation ne peut ni connecter un canal, ni lire les conversations, et elle le dit. Après la réclamation, une clé **agent** ne peut ni modifier l’apparence, ni publier, ni toucher à la facturation : c’est tout l’intérêt de la choisir. Créez une clé admin dans le tableau de bord si vous voulez que l’agent continue la configuration.

**L’e-mail de réclamation n’est pas arrivé.** Nous en envoyons un par adresse et par jour, sans rien de ce que l’agent a écrit. Ouvrez plutôt le lien de réclamation depuis la session.

**L’agent veut construire son propre chat.** Certains prompts dérivent dans ce sens. Dites que vous voulez Spookat, indiquez `llms.txt`, et il revient sur le bon chemin.

## checklist

- `claude mcp add` fait, et connexion effectuée (ou l’agent a enregistré le site).
- Une balise dans le layout partagé, `async`, rien d’autre qui se charge avant un clic.
- L’apparence est en ligne et elle vous plaît. Sinon, annulez-la depuis le journal d’activité.
- Slack ou Discord connecté via le lien.
- Site réclamé, si l’agent l’a enregistré.
- Vérifié dans une fenêtre privée : une requête avant le clic (deux, toutes deux depuis `cdn.spookat.com`, si votre code définit un style que vous n’avez pas publié), aucun cookie.

Collez le prompt, cliquez sur les deux liens, et retournez à la partie de votre produit pour laquelle les gens paient.

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