# claude code에게 사이트 라이브 채팅 설치 맡기기

Claude Code를 Spookat MCP 서버에 연결하고 프롬프트 하나만 붙여넣으세요. 채팅 설치, 사이트에 맞춘 디자인까지 해 주고, 사람이 눌러야 할 링크만 건네줘요.

2026-10-21 · Kuba

Claude Code는 세션 한 번으로 사이트에 라이브 채팅을 넣을 수 있어요. 스니펫을 레이아웃에 추가하고, 색상과 폰트를 읽어 위젯 스타일을 맞추고, 사람이 눌러야 하는 링크 두 개를 건네줘요. 이 가이드에서는 설정, 프롬프트, 에이전트가 할 수 있는 일과 없는 일, 그리고 작업을 확인하는 방법을 보여드려요.

@video vs-agent | 애니메이션: AI 에이전트에게 사이트에 Spookat 채팅을 추가해 달라고 하면 채팅 버튼이 나타나요.

## 에이전트가 하는 일과 여러분에게 남는 일

Spookat은 코딩 에이전트가 설정 전체를 할 수 있게 만들어졌어요. 매뉴얼은 에이전트를 위해 쓴 파일 하나, [llms.txt](https://spookat.com/llms.txt)이고, 설정에 필요한 모든 도구를 갖춘 원격 MCP 서버도 있어요.

타이핑은 에이전트가 해요.

- 공통 레이아웃을 찾아 script 태그 하나를 추가해요
- 사이트의 색상과 폰트를 읽어 위젯의 스타일, 강조색, 폰트, 위치, 인사말을 설정해요
- 무엇을 했고 무엇이 남았는지 정확히 알려줘요

절대 저절로 일어나면 안 되는 두 가지는 사람이 해요.

- **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_`로 시작하고, 사이트 하나에 속하며, 딱 한 번만 보여요. 저장소에는 넣지 마세요.

### 아직 spookat 계정이 없다면

시작하는 데 계정은 필요 없어요. 에이전트가 직접 사이트를 등록할 수 있어요. 도메인을 담은 요청 한 번이면 스니펫과 여러분을 위한 클레임 링크를 돌려받고, 요청을 한 번 더 보내면 설정 전용 키를 받아요. 프로토콜은 [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. `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가지 스타일 중 하나를 고르고, 브랜드 색상을 강조색으로, 어울리는 폰트를 설정해요. 시스템 폰트나 저희가 호스팅하는 17가지 폰트 중 하나를 쓸 수 있어요.
5. `preview`를 호출하고, 실제 위젯에서 초안을 볼 수 있는 링크를 줘요.
6. `publish`를 호출하면 디자인이 게시돼요. 이어서 `connect_chat`을 호출하고 링크를 건네줘요. 에이전트가 사이트를 등록했다면, 이 링크는 여러분의 클레임을 기다려요(3단계).
7. 마지막으로 요약해 줘요. 코드에서 뭐가 바뀌었는지, 뭘 게시했는지, 여러분이 아직 눌러야 할 게 뭔지요.

## 3단계: 에이전트가 사이트를 등록했다면 클레임하기

에이전트가 직접 사이트를 등록했다면 클레임 링크를 받게 돼요. 열어서 로그인하거나 가입하고(카드 없음), 사이트를 클레임하세요. 에이전트에게 남길 권한도 고를 수 있어요.

- 계속 설정을 이어가는 **admin** 키, 또는
- 설정을 읽고 나중에 채팅에 답하는 **agent** 키.

사이트는 두 가지가 충족되면, 순서와 상관없이 활성화돼요. 여러분이 클레임했고, 위젯이 여러분 도메인에서 로드됐을 때요. 14일 체험도 그때 시작돼요. 그 전에는 위젯이 사이트에 보이긴 하지만 채팅이 곧 열린다고만 나오고 메시지는 받지 않아요. 클레임되지 않은 사이트와 그 키는 7일 뒤에 삭제돼요.

세션 중에 에이전트가 여러분에게 연락할 수 없다면, 클레임 링크를 이메일로 보내 달라고 저희에게 요청할 수 있어요. 그 이메일에는 에이전트가 쓴 내용이 전혀 들어가지 않아요.

## 4단계: diff 검토하기

에이전트가 만든 다른 변경과 똑같이 다루세요. diff는 작아야 해요.

- 공통 레이아웃에 `async`가 붙은 script 태그 하나
- 에이전트가 디자인을 대시보드 대신 코드에 고정했다면, 그 위에 `window.Spookat = { … }` 블록

들어 있으면 안 되는 것: 페이지 컴포넌트마다 들어간 태그 복사본, 태그 매니저, 채팅 패널 preload, 클릭 전에 패널을 불러오는 무언가. 그런 게 보이면 에이전트에게 빼라고 하세요. 런처는 일부러 작은 파일 하나로 만들었어요.

태그 위치는 프레임워크마다 달라요.

| 프레임워크 | 위치 |
|---|---|
| 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`으로 필터):** 클릭 전 요청은 하나, `cdn.spookat.com`에서 오는 런처뿐이에요. 코드가 `window.Spookat`에서 게시한 것과 다른 스타일을 지정하면 두 개이고, 둘 다 `cdn.spookat.com`에서 와요. `api.spookat.com`으로는 아무것도 안 가요.
- **Application:** Spookat 쿠키 없음, 첫 메시지를 보내기 전까지 저장소도 없음.
- **런처 클릭:** 패널이 로드되고 입력할 수 있어요. 클레임과 채널 연결이 끝나면 테스트 메시지가 Slack이나 Discord에 나타나요.

[기본 가이드](/ko/blog/add-live-chat-to-your-website/)에 요청 하나하나의 설명과 함께 이 확인 과정의 긴 버전이 있어요.

## 설정 후: 에이전트가 답할 수도 있어요

pro 이상에서는 같은 MCP 서버에 대화용 도구가 있어요. 대기 중인 채팅 목록, 채팅 읽기, 답장, 메모 추가, 사람에게 넘기기요. 답장은 위젯과 팀 스레드에 AI라고 표시되고, 팀원이 답하면 항상 그쪽이 우선이에요. 언제 답할 수 있는지는 여러분이 정해요. 항상 먼저, 3분 안에 아무도 답하지 않았을 때만, 근무 시간 외, 초안만 중에서요. 규칙은 [문서](/ko/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." 보통 한 문장이면 고쳐져요.

**런처는 보이는데 채팅이 연결되지 않아요.** 채팅은 사이트를 등록한 도메인과 그 서브도메인에서만 연결돼요. `localhost`나 미리보기 URL에서는 버튼만 보일 거예요. 실제 도메인에서 확인하세요.

**도구가 거절해요.** 클레임 전의 설정 전용 키는 채널 연결, 채팅 읽기를 못 하고, 그렇다고 알려줘요. 클레임 후의 **agent** 키는 디자인 변경, 게시, 결제 관련 작업을 못 해요. 그게 바로 이 키를 고르는 이유예요. 에이전트가 계속 설정하길 원하면 대시보드에서 admin 키를 만드세요.

**클레임 이메일이 안 왔어요.** 주소당 하루 한 통만 보내고, 에이전트가 쓴 내용은 들어 있지 않아요. 대신 세션에 있는 클레임 링크를 여세요.

**에이전트가 자기만의 채팅을 만들려고 해요.** 프롬프트에 따라 그쪽으로 흘러갈 때가 있어요. Spookat을 원한다고 말하고 `llms.txt`를 가리키면 다시 돌아와요.

## 체크리스트

- `claude mcp add`를 실행하고 로그인했다(또는 에이전트가 사이트를 등록했다).
- 공통 레이아웃에 `async` 태그가 하나 있고, 클릭 전에 다른 건 로드되지 않는다.
- 디자인이 게시됐고 마음에 든다. 아니라면 활동 기록에서 되돌린다.
- 링크로 Slack이나 Discord를 연결했다.
- 에이전트가 등록했다면 사이트를 클레임했다.
- 시크릿 창에서 확인함: 클릭 전 요청 하나(코드에서 게시하지 않은 스타일을 지정했다면 두 개, 둘 다 `cdn.spookat.com`에서), 쿠키 없음.

프롬프트를 붙여넣고 링크 두 개를 누른 다음, 사람들이 돈을 내는 제품 본업으로 돌아가세요.

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