# biarkan claude code menambahkan live chat ke situsmu

Hubungkan Claude Code ke server MCP Spookat, tempel satu prompt, lalu biarkan ia memasang chat, menyesuaikan tampilan situsmu, dan memberimu link yang hanya boleh diklik manusia.

2026-10-21 · Kuba

Claude Code bisa memasang live chat di situsmu dalam satu sesi: ia menambahkan snippet ke layout, membaca warna dan fontmu untuk men-style widget, lalu memberimu dua link yang harus diklik manusia. Panduan ini menunjukkan setup-nya, prompt-nya, apa yang boleh dan tidak boleh dilakukan agent, dan cara mengecek hasil kerjanya.

@video vs-agent | Animasi: agen AI diminta menambahkan chat Spookat ke sebuah situs, lalu tombol chat muncul.

## apa yang dikerjakan agent dan apa yang tetap di tanganmu

Spookat dibuat supaya coding agent bisa mengerjakan seluruh setup. Manualnya satu file yang ditulis untuk agent, [llms.txt](https://spookat.com/llms.txt), dan ada server MCP remote dengan tool untuk semua yang dibutuhkan setup.

Agent mengerjakan bagian mengetik:

- menemukan layout bersama dan menambahkan satu tag script
- membaca warna dan font situsmu lalu mengatur style, aksen, font, posisi, dan sapaan widget
- memberitahumu persis apa yang sudah dikerjakan dan apa yang tersisa

Manusia mengerjakan dua hal yang tidak boleh terjadi dengan sendirinya:

- **menghubungkan Slack atau Discord.** `connect_chat` mengembalikan link untuk orang yang bisa menambahkan aplikasi di workspace-mu. Orang itu menyetujuinya di Slack atau Discord.
- **membayar.** `change_plan` mengembalikan link checkout. Agent tidak pernah membayar atau membatalkan.

Tampilan dipublikasikan agent sendiri: `publish` langsung menayangkannya, tanpa persetujuan. Setiap perubahan yang dibuat agent muncul di log aktivitas situs, di dashboard, dan di sana kamu bisa membatalkan publikasi.

## langkah 1: hubungkan claude code ke spookat

Di terminal proyekmu:

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

Tidak perlu key. Saat Claude Code pertama kali memakai tool Spookat, tab browser akan terbuka: kamu login, mencentang situs yang boleh dipakainya, dan memilih apa yang boleh dilakukannya. Kalau lebih suka pakai key, buat satu di dashboard di bagian instalasi, secret key, lalu kirim sebagai header:

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

Key diawali `sk_live_`, milik satu situs, dan hanya ditampilkan sekali. Jauhkan dari repo.

### belum punya akun spookat

Kamu tidak perlu akun untuk mulai. Agent bisa mendaftarkan situs sendiri: satu request dengan domainmu memberinya snippet dan link klaim untukmu, dan satu request lagi memberinya key khusus setup. Protokolnya ada di [auth.md](https://spookat.com/auth.md), dan agent membacanya sendiri saat manual mengarahkannya ke sana.

Key setup bisa men-style widget, mempublikasikan tampilan, dan membaca snippet. Key ini tidak bisa menghubungkan channel, menyentuh billing, atau membaca chat. Semua itu menunggu sampai kamu mengklaim situsnya.

## langkah 2: tempel prompt-nya

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

Itu seluruh prompt-nya. Sisanya ada di manual. Kalau mau mengarahkan, tambahkan satu baris: style yang kamu suka, sapaannya, atau di sisi mana launcher harus berada.

Seperti ini jalannya biasanya:

1. Ia membaca `llms.txt`, lalu mengecek apakah tool Spookat menjawab. Kalau kamu sudah login, ia memanggil `get_config` dan melihat situsmu. Kalau belum, ia mendaftarkan situsnya.
2. Ia menanyakan domain aslimu kalau tidak menemukannya di proyek. Ia tidak pernah menebak domain, dan tidak pernah menebak key.
3. Ia menemukan layout yang dipakai semua halaman dan menambahkan tag sebelum `</body>`:

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

4. Ia melihat CSS-mu, memilih salah satu dari 8 style, memakai warna brand-mu sebagai aksen, dan memilih font yang cocok. Ia bisa memakai font sistemmu, atau salah satu dari 17 font yang kami host.
5. Ia memanggil `preview` dan memberimu link tempat kamu melihat draf di widget sungguhan.
6. Ia memanggil `publish`, dan tampilannya tayang. Lalu `connect_chat`, dan memberimu link-nya. Kalau ia yang mendaftarkan situs, link itu menunggu klaimmu (langkah 3).
7. Ia menutup dengan ringkasan: apa yang berubah di kode, apa yang ia publikasikan, dan apa yang masih harus kamu klik.

## langkah 3: klaim, kalau agent yang mendaftarkan situs

Kalau agent mendaftarkan situs sendiri, kamu mendapat link klaim. Buka, login atau daftar (tanpa kartu), lalu klaim situsnya. Kamu juga memilih apa yang dipegang agent:

- key **admin**, untuk terus melakukan setup, atau
- key **agent**, untuk membaca setup dan membalas chat nanti.

Situs aktif saat dua hal terpenuhi, urutannya bebas: kamu sudah mengklaimnya, dan widget sudah dimuat di domainmu. Trial 14 harimu dimulai saat itu. Sebelumnya, widget muncul di situsmu tapi menyatakan chat akan segera dibuka dan tidak menerima pesan. Situs yang tidak diklaim beserta key-nya dihapus setelah 7 hari.

Kalau agent tidak bisa menghubungimu di sesi itu, ia bisa meminta kami mengirim link klaim lewat email. Email itu tidak berisi apa pun yang ditulis agent.

## langkah 4: tinjau diff-nya

Perlakukan seperti perubahan lain dari agent. Diff-nya seharusnya kecil:

- satu tag script di layout bersama, dengan `async`
- mungkin blok `window.Spookat = { … }` di atasnya, kalau agent mengunci tampilan di kode, bukan di dashboard

Yang tidak boleh ada: salinan tag di setiap komponen halaman, tag manager, preload untuk panel chat, atau apa pun yang memuat panel sebelum klik. Kalau kamu melihat salah satunya, minta agent menghapusnya. Launcher sengaja dibuat satu file kecil.

Tempat tag tergantung framework-mu:

| framework | di mana |
|---|---|
| Next.js (app router) | `app/layout.tsx`, di dalam `<body>` |
| Next.js (pages router) | `pages/_document.tsx` atau `pages/_app.tsx` |
| Astro, SvelteKit, Nuxt, Remix | layout dasar |
| Vite + React, HTML biasa | `index.html` atau include footer bersama |

## langkah 5: cek sendiri

Deploy atau jalankan situsnya, lalu buka di jendela private dengan DevTools terbuka:

- **Network, difilter `spookat`:** satu request sebelum klik, launcher dari `cdn.spookat.com`. Dua, keduanya dari `cdn.spookat.com`, kalau kodemu mengatur style di `window.Spookat` yang berbeda dari yang kamu publish. Tidak ada ke `api.spookat.com`.
- **Application:** tidak ada cookie dari Spookat, tidak ada penyimpanan sampai kamu mengirim pesan pertama.
- **Klik launcher:** panel dimuat, lalu kamu bisa mengetik. Setelah klaim dan koneksi channel, pesan tesmu muncul di Slack atau Discord.

[Panduan utama](/id/blog/add-live-chat-to-your-website/) punya versi panjang pengecekan ini, lengkap dengan penjelasan setiap request.

## setelah setup: agent juga bisa membalas

Mulai pro, server MCP yang sama punya tool untuk percakapan: menampilkan yang menunggu, membaca chat, membalas, menambahkan catatan, menyerahkan ke manusia. Balasannya diberi label AI di widget dan di thread timmu, dan balasan dari rekan tim selalu mengambil alih. Kamu yang memilih kapan ia boleh membalas: selalu duluan, hanya kalau tidak ada yang membalas dalam 3 menit, di luar jam kerja, atau hanya draf. [Dokumentasi](/id/docs/) menjelaskan aturannya.

## agent lainnya

Tidak ada yang khusus Claude Code di sini. Server MCP-nya bicara Streamable HTTP, dan prompt-nya jalan di agent apa pun yang bisa membaca URL dan mengedit kodemu. Di Cursor, server-nya ditaruh di `.cursor/mcp.json`:

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

Tanpa key, Cursor membuka halaman login yang sama.

## kalau tidak berjalan sesuai rencana

**Tool Spookat tidak menjawab.** Jalankan `/mcp` di Claude Code untuk melihat status server. Kalau tertulis perlu autentikasi, pilih server-nya dan login lagi. Kalau kamu menambahkannya dengan key, cek apakah key-nya belum dicabut di dashboard.

**Agent menaruh tag di tempat yang salah.** Beri tahu tempatnya: "Move the Spookat script to the root layout, remove every other copy." Biasanya satu kalimat cukup.

**Launcher muncul, tapi chat tidak bisa terhubung.** Chat hanya terhubung dari domain tempat situs didaftarkan, dan subdomainnya. Di `localhost` atau URL preview kamu hanya akan melihat tombolnya. Cek di domain yang asli.

**Sebuah tool menolak.** Sebelum klaim, key setup tidak bisa menghubungkan channel atau membaca chat, dan ia bilang begitu. Setelah klaim, key **agent** tidak bisa mengubah tampilan, mempublikasikan, atau menyentuh billing: justru itu alasan memilihnya. Buat key admin di dashboard kalau kamu mau agent terus melakukan setup.

**Email klaim tidak sampai.** Kami mengirim satu per alamat per hari, tanpa apa pun yang ditulis agent. Buka saja link klaim dari sesi.

**Agent malah mau membuat chat sendiri.** Beberapa prompt bisa melenceng ke sana. Bilang kamu mau Spookat, tunjuk `llms.txt`, dan ia kembali ke jalur.

## checklist

- `claude mcp add` sudah dijalankan, dan sudah login (atau agent mendaftarkan situs).
- Satu tag di layout bersama, `async`, tidak ada yang lain dimuat sebelum klik.
- Tampilannya sudah tayang dan kamu suka. Kalau tidak, batalkan dari log aktivitas.
- Slack atau Discord terhubung lewat link.
- Situs sudah diklaim, kalau agent yang mendaftarkannya.
- Sudah dicek di jendela private: satu request sebelum klik (dua, keduanya dari `cdn.spookat.com`, kalau kodemu mengatur style yang tidak kamu publish), tanpa cookie.

Tempel prompt-nya, klik dua link-nya, lalu kembali ke bagian produkmu yang dibayar orang.

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