weiesky/cc-viewer

CC‑Viewer – Claude Code를 위한 시각적 프런트엔드 및 헬퍼

개요 – CC‑Viewer(ccv 명령으로 설치)는 Anthropic의 Claude Code CLI를 감싸는 얇은 래퍼입니다. 동일한 백엔드 실행 파일을 실행하면서도 세션, 로그, 파일 차이, 검색 및 기타 개발 지원 기능을 표시하는 로컬 웹 UI도 시작합니다. Claude Code용 '원격 데스크톱'으로 생각하면 되며, 모든 브라우저(휴대전화 포함)에서 코딩 세션을 보고 제어할 수 있습니다.

주요 기능

• 드롭인 교체 – ccv는 모든 인수를 기본 claude 바이너리에 전달하므로 기존 Claude Code 스크립트가 계속 작동합니다.
• 웹 뷰어 – 세션이 시작되면 브라우저 탭이 열립니다(기본값 http://localhost:7008). UI에는 실시간 채팅, 코드 차이, 파일 탐색기, 검색 및 바꾸기, 모바일 기기용 QR 코드 공유가 표시됩니다.
• SDK / 헤드리스 모드 – ccv --sdk는 Claude Agent SDK를 통해 세션을 실행합니다. UI는 메시지만 보내며 CLI 쪽은 숨겨집니다.
• 로거 모드 – ccv -logger는 모든 Claude Code 요청을 세션별 디렉터리(wire-format v2)에 기록하여 완전하고 검열되지 않은 상호 작용 로그를 제공합니다.
• 비밀번호 / 토큰 보호 – 원격 LAN 액세스는 짧은 자동 생성 비밀번호 또는 일회성 ?token= URL로 보호할 수 있습니다. 비밀번호는 디스크에 암호화되어 저장됩니다.
• 컨테이너 / 클라우드 준비 – 서버는 기본적으로 0.0.0.0에 바인딩되므로 Docker 또는 클라우드 VM에서 실행할 수 있습니다. 관리자 작업은 토큰/비밀번호 인증 후에만 허용됩니다.
• 시스템 프롬프트 관리자 – UI에서 모델별 시스템 프롬프트를 편집할 수 있으며, 시작 시 자동으로 주입됩니다.
• 검색 및 바꾸기 – 작업 공간 전체에서 VS Code 스타일 검색을 기본 제공하며, 사용 가능한 경우 ripgrep을 사용합니다.

설치 방법

• npm(npm i -g cc-viewer), Homebrew(brew install cc-viewer) 또는 pnpm(pnpm add -g cc-viewer)으로 전역 설치합니다.
• Node 20+ 및 Claude Code 바이너리가 설치되어 있는지 확인합니다.
• ccv(일반적인 사용법은 ccv -c --d)를 실행하면 UI가 자동으로 나타납니다.

일반적인 워크플로

1. ccv …로 Claude Code 세션을 시작합니다.
2. 브라우저 UI에 채팅과 Claude가 수행하는 파일 편집의 실시간 차이가 표시됩니다.
3. 사이드 패널을 사용하여 파일을 검색, 바꾸기 또는 직접 엽니다.
4. 표시된 QR 코드를 스캔하여 휴대전화에서 세션을 계속합니다.
5. 완료되면 프로세스를 중지합니다. 로그는 나중에 검토할 수 있도록 ~/.claude/cc-viewer/…에 저장됩니다.

중요한 이유 – Claude Code는 강력한 LLM 기반 코딩 어시스턴트이지만 기본 CLI는 터미널 전용입니다. CC‑Viewer는 시각적이고 크로스 디바이스 인터페이스와 강력한 로깅을 추가하여 팀이나 개인 개발자가 AI 지원 코딩 세션을 모니터링, 감사, 공유하기 쉽게 만듭니다.

라이선스 – MIT.