🎯 치지직 AI 채팅 생성 서비스

소규모 스트리머들의 채팅 부족 문제를 해결하기 위한 AI 기반 채팅 생성 서비스

✨ 주요 기능

• 🎥 실시간 스트림 연결: 치지직 WebSocket API를 통한 실시간 채팅 수집
• 🤖 AI 채팅 생성: Claude API 기반 맥락 인식 자연스러운 채팅 생성
• ⚡ 실시간 통신: Socket.io를 통한 실시간 데이터 전송
• 📊 웹 대시보드: 스트림 연결 및 AI 설정 관리
• 🎬 OBS 오버레이: AI 채팅 표시용 브라우저 소스

🚀 빠른 시작

1. 환경 설정

# 프로젝트 클론 후 이동
cd chzzk-ai-chat

# 의존성 설치
npm install
cd packages/api && npm install
cd ../../services/chzzk-connector && npm install
cd ../ai-chat-generator && npm install

2. API 키 설정

packages/api/.env 파일에서 Claude API 키를 설정하세요:

ANTHROPIC_API_KEY=your_actual_claude_api_key_here

3. 서버 시작

# API 서버 시작 (포트 3001)
cd packages/api
npm run dev

# 웹 대시보드 시작 (포트 3000)
cd apps/web
python -m http.server 3000

# OBS 오버레이 시작 (포트 3002)
cd overlays/chat-display
python -m http.server 3002

4. 사용법

1. 웹 대시보드: http://localhost:3000
2. OBS 오버레이: http://localhost:3002/overlay.html
3. API 서버: http://localhost:3001

📖 사용 가이드

웹 대시보드에서 스트림 연결

1. 치지직 채널 ID 입력 (예: channelname123)
2. "🔗 연결" 버튼 클릭
3. AI 채팅 설정 조정:
   • 생성 주기 (10-300초)
   • AI 성격 선택
   • 관심 주제 입력
4. "⚙️ 설정 업데이트" 클릭

OBS에서 브라우저 소스 추가

1. OBS에서 "소스 추가" → "브라우저" 선택
2. URL: http://localhost:3002/overlay.html
3. 너비: 1920, 높이: 1080
4. "CSS 사용자 지정" 체크하고 다음 추가 (개발 정보 숨김):

   .dev-info, .hide-dev { display: none !important; }

🏗️ 프로젝트 구조

chzzk-ai-chat/
├── packages/
│   ├── api/              # Express + Socket.io API 서버
│   │   ├── src/
│   │   │   ├── server.ts      # 메인 서버
│   │   │   └── StreamManager.ts # 스트림 관리
│   │   └── .env          # 환경 변수
│   └── shared/           # 공통 타입 정의
├── services/
│   ├── chzzk-connector/  # 치지직 API 연동
│   └── ai-chat-generator/ # Claude AI 채팅 생성
├── apps/
│   └── web/              # 웹 대시보드
│       └── index.html
└── overlays/
    └── chat-display/     # OBS 오버레이
        └── overlay.html

⚙️ 설정 옵션

AI 채팅 설정

• 활성화: AI 채팅 생성 온/오프
• 생성 주기: 10-300초 (기본: 30초)
• AI 성격:
  • 친근하고 활발한 시청자
  • 재미있고 유머러스한 시청자
  • 차분하고 진중한 시청자
  • 열정적이고 응원하는 시청자
• 관심 주제: 쉼표로 구분 (예: "방송,게임,일상,음식")

🔧 개발자 정보

주요 기술 스택

• 백엔드: Node.js + Express + TypeScript
• 실시간 통신: Socket.io
• AI: Claude API (Anthropic)
• 치지직 연동: chzzk 라이브러리
• 프론트엔드: HTML5 + Vanilla JavaScript

API 엔드포인트

• GET /: 서비스 상태 확인
• GET /health: 헬스체크
• GET /api/channels: 연결된 채널 목록
• GET /api/channels/:channelId/config: 채널별 설정 조회

Socket.io 이벤트

클라이언트 → 서버:

• connect-stream: 스트림 연결
• disconnect-stream: 스트림 연결 해제
• update-config: AI 설정 업데이트
• get-status: 현재 상태 요청

서버 → 클라이언트:

• stream-connected: 스트림 연결 성공
• stream-error: 스트림 오류
• chat-message: 실시간 채팅 메시지
• ai-chat: AI 생성 채팅
• stream-update: 스트림 정보 업데이트

🚨 문제 해결

일반적인 문제

1. 스트림 연결 실패

   • 채널 ID가 정확한지 확인
   • 해당 채널이 현재 방송 중인지 확인

2. AI 채팅이 생성되지 않음

   • .env 파일의 ANTHROPIC_API_KEY 확인
   • AI 채팅 설정에서 "활성화"가 체크되어 있는지 확인

3. OBS 오버레이가 보이지 않음

   • 브라우저 소스 URL이 정확한지 확인: http://localhost:3002/overlay.html
   • 개발 정보가 방해된다면 CSS로 숨기기

로그 확인

서버 터미널에서 실시간 로그를 확인할 수 있습니다:

• 🎥: 스트림 관련 이벤트
• 🤖: AI 채팅 생성
• 💬: 실시간 채팅 수신
• ⚙️: 설정 변경

📈 향후 개발 계획

2단계: 고급 기능

• PostgreSQL + Prisma 데이터베이스 연동
• 사용자 인증 및 채널별 설정 저장
• AI 학습 데이터 수집 및 개선
• 웹 대시보드 UI/UX 개선

3단계: 확장 기능

• 다중 채널 동시 관리
• AI 채팅 분석 및 통계
• 커스텀 AI 성격 설정
• 모바일 대시보드 앱

🤝 기여하기

1. 이슈 리포트 및 기능 제안 환영
2. 풀 리퀘스트 전 코딩 스타일 준수
3. 테스트 코드 작성 권장

📄 라이선스

MIT License - 자유롭게 사용, 수정, 배포 가능

---

💡 팁: 개발 중이므로 버그나 개선사항이 있다면 언제든 피드백 주세요!