# claude codeにサイトへライブチャットを入れてもらう

Claude CodeをSpookatのMCPサーバーにつなぎ、プロンプトを1つ貼るだけ。チャットの導入、サイトに合わせたデザイン設定を任せ、人間がクリックすべきリンクだけを受け取れます。

2026-10-21 · Kuba

Claude Codeなら、1回のセッションでサイトにライブチャットを入れられます。スニペットをレイアウトに追加し、サイトの色とフォントを読み取ってウィジェットのデザインを整え、人間がクリックすべき2つのリンクを渡してくれます。このガイドでは、セットアップ、プロンプト、エージェントにできることとできないこと、そして作業の確認方法を紹介します。

@video vs-agent | アニメーション: AIエージェントにサイトへSpookatチャットの追加を頼むと、チャットボタンが表示されます。

## エージェントがやること、あなたに残ること

Spookatは、コーディングエージェントがセットアップをすべて行えるように作られています。マニュアルはエージェント向けに書かれた1つのファイル、[llms.txt](https://spookat.com/llms.txt)で、セットアップに必要なすべてのツールを備えたリモートMCPサーバーもあります。

入力作業はエージェントが行います。

- 共通のレイアウトを見つけて、scriptタグを1つ追加する
- サイトの色とフォントを読み取り、ウィジェットのスタイル、アクセントカラー、フォント、位置、あいさつ文を設定する
- 何をしたか、何が残っているかを正確に伝える

勝手に行われてはいけない2つのことは、人間が行います。

- **SlackかDiscordの接続。** `connect_chat`は、ワークスペースにアプリを追加できる人向けのリンクを返します。その人がSlackかDiscordで承認します。
- **支払い。** `change_plan`は決済リンクを返します。エージェントが支払ったり解約したりすることはありません。

デザインの公開はエージェント自身が行います。`publish`で承認なしにすぐ公開されます。エージェントによる変更はすべて、ダッシュボードのサイトのアクティビティログに記録され、公開はそこから元に戻せます。

## ステップ1:claude codeをspookatにつなぐ

プロジェクトのターミナルで実行します。

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

キーは不要です。Claude CodeがSpookatのツールを初めて使うとき、ブラウザのタブが開きます。サインインし、使ってよいサイトにチェックを入れ、できる操作を選びます。キーを使いたい場合は、ダッシュボードのインストール、シークレットキーで作成し、ヘッダーとして渡します。

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

キーは`sk_live_`で始まり、1つのサイトに属し、表示されるのは1回だけです。リポジトリには入れないでください。

### spookatのアカウントがまだない場合

始めるのにアカウントは要りません。エージェントが自分でサイトを登録できます。ドメインを付けたリクエストを1回送ると、スニペットとあなた向けのクレームリンクが返ってきます。もう1回送ると、セットアップ専用のキーが返ってきます。プロトコルは[auth.md](https://spookat.com/auth.md)にあり、マニュアルに案内されればエージェントが自分で読みます。

セットアップ専用のキーでできるのは、ウィジェットのデザイン設定、デザインの公開、スニペットの読み取りです。チャンネルの接続、請求の操作、チャットの閲覧はできません。それらはあなたがサイトをクレームするまで待機します。

## ステップ2:プロンプトを貼る

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

プロンプトはこれだけです。残りはマニュアルに書いてあります。方向性を伝えたいなら1行足してください。好きなスタイル、あいさつ文、ランチャーを置く側などです。

よくある実行の流れは次のとおりです。

1. `llms.txt`を読み、Spookatのツールが応答するか確認します。サインイン済みなら`get_config`を呼んでサイトを確認し、そうでなければサイトを登録します。
2. プロジェクト内で本番のドメインが見つからなければ、あなたに尋ねます。ドメインもキーも決して推測しません。
3. 全ページが共有するレイアウトを見つけ、`</body>`の前にタグを追加します。

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

4. CSSを見て、8種類のスタイルから1つを選び、ブランドカラーをアクセントに、合うフォントを設定します。システムフォントでも、私たちがホストしている17種類のフォントでも構いません。
5. `preview`を呼び、本物のウィジェットで下書きを確認できるリンクを渡します。
6. `publish`を呼び、デザインが公開されます。続いて`connect_chat`を呼び、リンクを渡します。エージェントがサイトを登録した場合、このリンクはあなたのクレームを待ちます(ステップ3)。
7. 最後にまとめを出します。コードで何が変わったか、何を公開したか、あなたがまだクリックすべきものは何か。

## ステップ3:エージェントが登録した場合のクレーム

エージェントがサイトを自分で登録した場合、クレームリンクが届きます。開いてサインインまたはサインアップし(カード不要)、サイトをクレームします。そのとき、エージェントに残す権限も選びます。

- セットアップを続けるための**admin**キー、または
- セットアップを読み、あとでチャットに返信するための**agent**キー。

サイトが公開されるのは、順番を問わず2つの条件がそろったときです。あなたがクレームしたこと、そしてウィジェットがあなたのドメインで読み込まれたことです。14日間のトライアルはそこから始まります。それまでは、ウィジェットはサイトに表示されますが、チャットはまもなく開始と表示され、メッセージは受け付けません。クレームされないサイトとそのキーは7日後に削除されます。

セッション中にエージェントがあなたに連絡できない場合は、クレームリンクをメールで送るよう私たちに依頼できます。そのメールには、エージェントが書いた内容は一切含まれません。

## ステップ4:差分を確認する

エージェントによるほかの変更と同じように扱ってください。差分は小さいはずです。

- 共通レイアウトに`async`付きのscriptタグが1つ
- エージェントがデザインをダッシュボードではなくコードで固定した場合は、その上に`window.Spookat = { … }`ブロック

含まれてはいけないもの:ページコンポーネントごとのタグのコピー、タグマネージャー、チャットパネルのpreload、クリック前にパネルを読み込む何か。どれかがあれば、エージェントに外すよう伝えてください。ランチャーは意図して小さなファイル1つにしています。

タグを置く場所はフレームワークによって変わります。

| フレームワーク | 場所 |
|---|---|
| Next.js(App Router) | `app/layout.tsx`の`<body>`内 |
| Next.js(Pages Router) | `pages/_document.tsx`または`pages/_app.tsx` |
| Astro、SvelteKit、Nuxt、Remix | ベースレイアウト |
| Vite + React、素のHTML | `index.html`、または共通フッターのインクルード |

## ステップ5:自分で確認する

サイトをデプロイするか起動し、DevToolsを開いたプライベートウィンドウで表示します。

- **Network(`spookat`で絞り込み):** クリック前のリクエストは1件で、`cdn.spookat.com`からのランチャーだけ。コードの`window.Spookat`で公開したものと違うスタイルを指定している場合は2件で、どちらも`cdn.spookat.com`からです。`api.spookat.com`には何も送られません。
- **Application:** SpookatのCookieはなく、最初のメッセージを送るまでストレージも使いません。
- **ランチャーをクリック:** パネルが読み込まれ、入力できるようになります。クレームとチャンネル接続が済めば、テストメッセージがSlackかDiscordに届きます。

[基本ガイド](/ja/blog/add-live-chat-to-your-website/)では、各リクエストの説明付きで、この確認をより詳しく紹介しています。

## セットアップ後:エージェントは返信もできる

pro以上では、同じMCPサーバーに会話用のツールがあります。待っているチャットの一覧、チャットの閲覧、返信、メモの追加、人間への引き継ぎです。返信はウィジェットとチームのスレッドでAIと表示され、チームメンバーが返信すれば必ずそちらが優先されます。返信してよいタイミングはあなたが選びます。常に最初に、3分以内に誰も返信しなかったときだけ、営業時間外、下書きのみ、のいずれかです。ルールは[ドキュメント](/ja/docs/)で説明しています。

## ほかのエージェント

ここに書いたことはClaude Code専用ではありません。MCPサーバーはStreamable HTTPに対応していて、URLを読めてコードを編集できるエージェントならどれでもこのプロンプトが使えます。Cursorでは、サーバーを`.cursor/mcp.json`に書きます。

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

キーを省けば、Cursorでも同じサインインページが開きます。

## うまくいかないとき

**Spookatのツールが応答しない。** Claude Codeで`/mcp`を実行してサーバーの状態を確認してください。認証が必要と表示されたら、選択してサインインし直します。キーで追加した場合は、ダッシュボードでキーが無効化されていないか確認してください。

**エージェントがタグを間違った場所に置いた。** 場所を伝えましょう。"Move the Spookat script to the root layout, remove every other copy." たいていは1文で直ります。

**ランチャーは出るが、チャットが接続しない。** チャットは、サイトを登録したドメインとそのサブドメインからしか接続しません。`localhost`やプレビューURLではボタンが見えるだけです。本番のドメインで確認してください。

**ツールに断られる。** クレーム前のセットアップ専用キーは、チャンネル接続とチャットの閲覧ができず、その旨を返します。クレーム後の**agent**キーは、デザインの変更、公開、請求の操作ができません。それがこのキーを選ぶ理由です。エージェントにセットアップを続けさせたいなら、ダッシュボードでadminキーを作成してください。

**クレームのメールが届かない。** メールは1アドレスにつき1日1通で、エージェントが書いた内容は入っていません。代わりにセッション内のクレームリンクを開いてください。

**エージェントが自前のチャットを作ろうとする。** プロンプトによってはそちらに流れることがあります。Spookatを使いたいと伝えて`llms.txt`を示せば、元に戻ります。

## チェックリスト

- `claude mcp add`を実行してサインインした(またはエージェントがサイトを登録した)。
- 共通レイアウトに`async`付きのタグが1つあり、クリック前にほかに何も読み込まれない。
- デザインが公開されていて、気に入っている。気に入らなければアクティビティログから元に戻す。
- リンクからSlackかDiscordを接続した。
- エージェントが登録した場合は、サイトをクレームした。
- プライベートウィンドウで確認済み:クリック前のリクエストは1件(公開していないスタイルをコードで指定している場合は2件、どちらも`cdn.spookat.com`から)、Cookieなし。

プロンプトを貼って2つのリンクをクリックしたら、お客さんがお金を払ってくれるプロダクトの本題に戻りましょう。

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