# sitenize canlı sohbeti claude code eklesin

Claude Code'u Spookat MCP sunucusuna bağlayın, tek bir prompt yapıştırın; sohbeti kursun, sitenizin görünümüne uydursun ve yalnızca bir insanın tıklaması gereken bağlantıları size versin.

2026-10-21 · Kuba

Claude Code sitenize tek bir oturumda canlı sohbet ekleyebilir: snippet'i layout'unuza ekler, widget'ı biçimlendirmek için renklerinizi ve fontlarınızı okur ve bir insanın tıklaması gereken iki bağlantıyı size verir. Bu rehber kurulumu, prompt'u, agent'ın neyi yapıp neyi yapamayacağını ve işini nasıl kontrol edeceğinizi gösteriyor.

@video vs-agent | Animasyon: bir yapay zekâ ajanından siteye Spookat sohbetini eklemesi istenir ve sohbet düğmesi görünür.

## agent ne yapar, sizde ne kalır

Spookat, bir kodlama agent'ının kurulumun tamamını yapabilmesi için tasarlandı. Kılavuz, agent'lar için yazılmış tek bir dosyadır: [llms.txt](https://spookat.com/llms.txt). Bir kurulumun ihtiyaç duyduğu her şey için araçları olan uzak bir MCP sunucusu da var.

Yazma işini agent yapar:

- ortak layout'unuzu bulur ve tek script etiketini ekler
- sitenizin renklerini ve fontlarını okur; widget'ın stilini, vurgu rengini, fontunu, konumunu ve karşılama mesajını ayarlar
- ne yaptığını ve geriye ne kaldığını size tam olarak söyler

Asla kendiliğinden olmaması gereken iki şeyi bir insan yapar:

- **Slack ya da Discord'u bağlamak.** `connect_chat`, çalışma alanınıza uygulama ekleyebilen kişi için bir bağlantı döndürür. O kişi Slack ya da Discord'da onaylar.
- **ödeme yapmak.** `change_plan` bir ödeme bağlantısı döndürür. Agent'lar asla ödeme yapmaz ya da iptal etmez.

Görünümü agent kendisi yayımlar: `publish` onu onay beklemeden canlıya alır. Agent'ın yaptığı her değişiklik, paneldeki sitenin etkinlik kaydında görünür ve bir yayını oradan geri alabilirsiniz.

## adım 1: claude code'u spookat'a bağlayın

Projenizin terminalinde:

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

Anahtar gerekmez. Claude Code bir Spookat aracını ilk kez kullandığında bir tarayıcı sekmesi açılır: giriş yaparsınız, kullanabileceği siteleri işaretlersiniz ve neler yapabileceğini seçersiniz. Anahtar kullanmayı tercih ederseniz, panelde kurulum, gizli anahtarlar bölümünden bir tane oluşturun ve header olarak verin:

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

Anahtarlar `sk_live_` ile başlar, tek bir siteye aittir ve yalnızca bir kez gösterilir. Onları depo dışında tutun.

### henüz spookat hesabınız yoksa

Başlamak için gerekmez. Agent siteyi kendisi kaydedebilir: alan adınızla attığı tek bir istek snippet'i ve sizin için bir sahiplenme bağlantısını getirir, bir istek daha da yalnızca kurulum için anahtarı getirir. Protokol [auth.md](https://spookat.com/auth.md) içindedir ve kılavuz agent'ı oraya yönlendirdiğinde agent onu kendisi okur.

Kurulum anahtarı widget'ı biçimlendirebilir, görünümü yayımlayabilir ve snippet'i okuyabilir. Kanal bağlayamaz, faturalandırmaya dokunamaz ve sohbetleri okuyamaz. Bunlar siz siteyi sahiplenene kadar bekler.

## adım 2: prompt'u yapıştırın

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

Prompt'un tamamı bu. Geri kalan her şey kılavuzda. Yönlendirmek isterseniz bir satır ekleyin: sevdiğiniz stil, karşılama mesajı ya da başlatıcının hangi tarafta duracağı.

Tipik bir çalışma şöyle görünür:

1. `llms.txt` dosyasını okur, ardından Spookat araçlarının yanıt verip vermediğini kontrol eder. Giriş yaptıysanız `get_config` çağırır ve sitenizi görür. Yapmadıysanız siteyi kaydeder.
2. Projede bulamazsa gerçek alan adınızı size sorar. Asla alan adı tahmin etmez, asla anahtar tahmin etmez.
3. Tüm sayfaların paylaştığı layout'u bulur ve etiketi `</body>` öncesine ekler:

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

4. CSS'inize bakar, 8 stilden birini seçer, marka renginizi vurgu rengi yapar ve uyan bir font seçer. Sistem fontunuzu ya da barındırdığımız 17 fonttan birini kullanabilir.
5. `preview` çağırır ve taslağı gerçek widget'ta görebileceğiniz bir bağlantı verir.
6. `publish` çağırır ve görünüm canlıya çıkar. Sonra `connect_chat` çağırır ve bağlantıyı size verir. Siteyi kendisi kaydettiyse bu bağlantı sizin sahiplenmenizi bekler (adım 3).
7. Bir özetle bitirir: kodda ne değişti, ne yayımladı, sizin daha neyi tıklamanız gerekiyor.

## adım 3: agent siteyi kaydettiyse sahiplenme

Agent siteyi kendisi kaydettiyse, bir sahiplenme bağlantısı alırsınız. Açın, giriş yapın ya da kaydolun (kart gerekmez) ve siteyi sahiplenin. Agent'ın elinde ne kalacağını da siz seçersiniz:

- kurmaya devam etmesi için bir **admin** anahtarı ya da
- kurulumu okuyup ileride sohbetleri yanıtlaması için bir **agent** anahtarı.

Site, sırası fark etmeksizin iki şey gerçekleştiğinde yayına girer: siteyi sahiplendiniz ve widget alan adınızda yüklendi. 14 günlük deneme süreniz o zaman başlar. Öncesinde widget sitenizde görünür ama sohbetin yakında açılacağını söyler ve mesaj kabul etmez. Sahiplenilmeyen siteler ve anahtarları 7 gün sonra silinir.

Agent oturum sırasında size ulaşamazsa, sahiplenme bağlantısını size e-postayla göndermemizi isteyebilir. O e-posta, agent'ın yazdığı hiçbir şeyi içermez.

## adım 4: diff'i inceleyin

Onu bir agent'tan gelen diğer her değişiklik gibi değerlendirin. Diff küçük olmalıdır:

- ortak layout'ta `async` içeren bir script etiketi
- agent görünümü panel yerine kodda sabitlediyse, üstünde belki bir `window.Spookat = { … }` bloğu

İçermemesi gerekenler: her sayfa bileşeninde etiketin bir kopyası, bir etiket yöneticisi, sohbet paneli için bir preload ya da paneli tıklamadan önce yükleyen herhangi bir şey. Bunlardan birini görürseniz agent'a kaldırmasını söyleyin. Başlatıcı bilerek küçük tek bir dosyadır.

Etiketin nereye gideceği framework'ünüze bağlıdır:

| framework | nereye |
|---|---|
| Next.js (app router) | `app/layout.tsx`, `<body>` içinde |
| Next.js (pages router) | `pages/_document.tsx` ya da `pages/_app.tsx` |
| Astro, SvelteKit, Nuxt, Remix | temel layout |
| Vite + React, saf HTML | `index.html` ya da ortak footer include'u |

## adım 5: kendiniz kontrol edin

Siteyi deploy edin ya da çalıştırın, ardından DevTools açıkken gizli bir pencerede açın:

- **`spookat` ile filtrelenmiş Network:** tıklamadan önce tek istek, `cdn.spookat.com` adresinden başlatıcı. Kodunuz `window.Spookat` içinde yayımladığınızdan farklı bir stil ayarlıyorsa iki istek, ikisi de `cdn.spookat.com` adresinden. `api.spookat.com` adresine hiçbir şey yok.
- **Application:** Spookat'tan çerez yok, ilk mesajı gönderene kadar depolama yok.
- **Başlatıcıya tıklayın:** panel yüklenir, ardından yazabilirsiniz. Sahiplenme ve kanal bağlantısından sonra test mesajınız Slack ya da Discord'da görünür.

[Ana rehber](/tr/blog/add-live-chat-to-your-website/), her isteğin ne olduğunu açıklayarak bu kontrolün uzun versiyonunu anlatıyor.

## kurulumdan sonra: agent yanıt da verebilir

pro ve üstünde, aynı MCP sunucusunda konuşmalar için araçlar vardır: bekleyenleri listelemek, bir sohbeti okumak, yanıt vermek, not eklemek, bir insana devretmek. Yanıtlar widget'ta ve ekibinizin thread'inde yapay zekâ etiketiyle görünür ve bir ekip arkadaşının yanıtı her zaman devralır. Ne zaman yanıt verebileceğini siz seçersiniz: her zaman önce, yalnızca 3 dakika içinde kimse yanıtlamadıysa, çalışma saatleri dışında ya da yalnızca taslak. Kurallar [dokümanlarda](/tr/docs/) anlatılıyor.

## diğer agent'lar

Buradaki hiçbir şey Claude Code'a özel değil. MCP sunucusu Streamable HTTP konuşur ve prompt, bir URL okuyup kodunuzu düzenleyebilen her agent'ta çalışır. Cursor'da sunucu `.cursor/mcp.json` dosyasına girer:

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

Anahtarı eklemezseniz Cursor aynı giriş sayfasını açar.

## işler planlandığı gibi gitmezse

**Spookat araçları yanıt vermiyor.** Sunucunun durumunu görmek için Claude Code'da `/mcp` çalıştırın. Kimlik doğrulama gerektiğini söylüyorsa seçin ve yeniden giriş yapın. Bir anahtarla eklediyseniz, anahtarın panelde iptal edilmediğini kontrol edin.

**Agent etiketi yanlış yere koydu.** Nereye koyacağını söyleyin: "Move the Spookat script to the root layout, remove every other copy." Genellikle tek cümle yeter.

**Başlatıcı görünüyor ama sohbet bağlanamıyor.** Sohbet yalnızca sitenin kayıtlı olduğu alan adından ve alt alan adlarından bağlanır. `localhost` ya da bir önizleme URL'sinde düğmeyi görürsünüz, fazlasını değil. Gerçek alan adında kontrol edin.

**Bir araç hayır diyor.** Sahiplenmeden önce kurulum anahtarı kanal bağlayamaz ya da sohbet okuyamaz ve bunu söyler. Sahiplenmeden sonra bir **agent** anahtarı görünümü değiştiremez, yayımlayamaz ya da faturalandırmaya dokunamaz: onu seçmenin amacı zaten bu. Agent'ın kurmaya devam etmesini istiyorsanız panelde bir admin anahtarı oluşturun.

**Sahiplenme e-postası gelmedi.** Adres başına günde bir tane göndeririz, içinde agent'ın yazdığı hiçbir şey olmadan. Bunun yerine sahiplenme bağlantısını oturumdan açın.

**Agent kendi sohbetini kurmak istiyor.** Bazı prompt'lar bu yöne kayar. Spookat istediğinizi söyleyin, `llms.txt` dosyasını gösterin ve yola geri döner.

## kontrol listesi

- `claude mcp add` yapıldı ve giriş yapıldı (ya da agent siteyi kaydetti).
- Ortak layout'ta `async` içeren tek bir etiket, tıklamadan önce yüklenen başka bir şey yok.
- Görünüm canlıda ve beğendiniz. Beğenmediyseniz etkinlik kaydından geri alın.
- Slack ya da Discord bağlantı üzerinden bağlandı.
- Agent kaydettiyse site sahiplenildi.
- Gizli bir pencerede kontrol edildi: tıklamadan önce tek istek (kodunuz yayımlamadığınız bir stil ayarlıyorsa iki, ikisi de `cdn.spookat.com` adresinden), hiç çerez yok.

Prompt'u yapıştırın, iki bağlantıya tıklayın ve ürününüzün insanların para ödediği kısmına geri dönün.

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