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

2026년 10월 21일 · 글: kuba · 8분 읽기

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

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

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

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

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

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

Slack이나 Discord 연결. connect_chat은 워크스페이스에 앱을 추가할 수 있는 사람에게 줄 링크를 돌려줘요. 그 사람이 Slack이나 Discord에서 승인해요.
결제. change_plan은 결제 링크를 돌려줘요. 에이전트는 절대 결제하거나 해지하지 않아요.

디자인 게시는 에이전트가 직접 해요. publish가 승인 없이 바로 게시해요. 에이전트가 만든 모든 변경은 대시보드의 사이트 활동 기록에 남고, 게시는 거기서 되돌릴 수 있어요.

1단계: claude code를 spookat에 연결하기

프로젝트 터미널에서 실행하세요.

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

키는 필요 없어요. Claude Code가 Spookat 도구를 처음 쓸 때 브라우저 탭이 열려요. 로그인하고, 쓸 수 있는 사이트에 체크하고, 할 수 있는 작업을 고르면 돼요. 키를 쓰고 싶다면 대시보드의 설치, 시크릿 키에서 만들고 헤더로 넘기세요.

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

키는 sk_live_로 시작하고, 사이트 하나에 속하며, 딱 한 번만 보여요. 저장소에는 넣지 마세요.

아직 spookat 계정이 없다면

시작하는 데 계정은 필요 없어요. 에이전트가 직접 사이트를 등록할 수 있어요. 도메인을 담은 요청 한 번이면 스니펫과 여러분을 위한 클레임 링크를 돌려받고, 요청을 한 번 더 보내면 설정 전용 키를 받아요. 프로토콜은 auth.md에 있고, 매뉴얼이 안내하면 에이전트가 알아서 읽어요.

설정 전용 키로는 위젯 스타일을 바꾸고, 디자인을 게시하고, 스니펫을 읽을 수 있어요. 채널 연결, 결제 관련 작업, 채팅 읽기는 못 해요. 그건 여러분이 사이트를 클레임할 때까지 기다려요.

2단계: 프롬프트 붙여넣기

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

프롬프트는 이게 전부예요. 나머지는 매뉴얼에 있어요. 방향을 잡아 주고 싶다면 한 줄만 더하세요. 좋아하는 스타일, 인사말, 런처 위치 같은 거요.

보통은 이렇게 진행돼요.

llms.txt를 읽고, Spookat 도구가 응답하는지 확인해요. 로그인되어 있으면 get_config를 호출해 사이트를 확인하고, 아니면 사이트를 등록해요.
프로젝트에서 실제 도메인을 찾지 못하면 물어봐요. 도메인도 키도 절대 추측하지 않아요.
모든 페이지가 공유하는 레이아웃을 찾아 </body> 앞에 태그를 추가해요.

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

CSS를 보고 8가지 스타일 중 하나를 고르고, 브랜드 색상을 강조색으로, 어울리는 폰트를 설정해요. 시스템 폰트나 저희가 호스팅하는 17가지 폰트 중 하나를 쓸 수 있어요.
preview를 호출하고, 실제 위젯에서 초안을 볼 수 있는 링크를 줘요.
publish를 호출하면 디자인이 게시돼요. 이어서 connect_chat을 호출하고 링크를 건네줘요. 에이전트가 사이트를 등록했다면, 이 링크는 여러분의 클레임을 기다려요(3단계).
마지막으로 요약해 줘요. 코드에서 뭐가 바뀌었는지, 뭘 게시했는지, 여러분이 아직 눌러야 할 게 뭔지요.

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에 나타나요.

기본 가이드에 요청 하나하나의 설명과 함께 이 확인 과정의 긴 버전이 있어요.

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

pro 이상에서는 같은 MCP 서버에 대화용 도구가 있어요. 대기 중인 채팅 목록, 채팅 읽기, 답장, 메모 추가, 사람에게 넘기기요. 답장은 위젯과 팀 스레드에 AI라고 표시되고, 팀원이 답하면 항상 그쪽이 우선이에요. 언제 답할 수 있는지는 여러분이 정해요. 항상 먼저, 3분 안에 아무도 답하지 않았을 때만, 근무 시간 외, 초안만 중에서요. 규칙은 문서에 설명돼 있어요.

다른 에이전트

여기 나온 건 Claude Code 전용이 아니에요. MCP 서버는 Streamable HTTP를 쓰고, URL을 읽고 코드를 수정할 수 있는 에이전트라면 어디서든 이 프롬프트가 통해요. Cursor에서는 서버를 .cursor/mcp.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에서), 쿠키 없음.

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