paulrobello/claude-office

Claude Office Visualizer – 개요

Claude Office는 Claude Code(Anthropic의 Claude 모델용 명령줄 인터페이스)의 활동을 재미있는 실시간 픽셀 아트 사무실 시뮬레이션으로 바꾸는 오픈소스 도구입니다. "보스" 캐릭터는 주요 Claude 에이전트를 나타내고, 생성된 "직원" 에이전트는 하위 작업을 표시합니다. Claude 명령을 실행하면 UI는 에이전트가 다층 건물을 돌아다니며 상태, 말풍선 및 다양한 대시보드를 업데이트하는 모습을 애니메이션으로 표시합니다.

이 프로젝트에는 다음이 포함됩니다:

HTTP/WebSocket을 통해 Claude Code(또는 OpenCode 대안)에서 이벤트를 수신하는 FastAPI 백엔드,
React 구성 요소와 2D 게임 엔진 스타일 애니메이션 레이어로 사무실을 렌더링하는 Next.js + PixiJS 프론트엔드,
빠른 상태 업데이트를 위한 Zustand 스토어, 그리고
필요한 이벤트 전송 로직을 Claude CLI에 주입하는 훅 및 OpenCode 플러그인.

본질적으로 AI 에이전트 워크플로우용 모니터링 대시보드로, 인터랙티브한 게임 같은 비주얼로 제공됩니다.

주요 기능 (전문 용어 최소화)

기능	설명
실시간 시각화	애니메이션 사무실 평면도에서 Claude의 작업을 실시간으로 표시합니다.
보스 및 직원 에이전트	주요 Claude 프로세스는 보스로 표시되고, 하위 에이전트는 작업을 수행하는 직원으로 표시됩니다.
다층 건물	각각 다른 Claude 세션에 연결된 별도의 사무실 층을 탐색합니다.
커맨드 센터	모든 활성 세션의 보스를 상태 열(요청 필요, 작업 중, 완료, 종료)이 있는 하나의 "픽셀 사무실"로 모으는 세션 간 개요.
화이트보드 모드	키보드 단축키로 선택 가능한 12가지 시각적 모드(칸반, 조직도, 도구 사용 파이 차트, 타임라인 등).
컨텍스트 창 추적기	Claude의 컨텍스트가 커지면 애니메이션 휴지통이 채워지고 보스가 "압축"할 수 있습니다.
Git 상태 패널	저장소 변경 사항을 실시간으로 표시합니다.
AI 강화 이름 및 요약 (선택 사항)	Claude OAuth 토큰을 사용하면 UI가 원시 ID 대신 친근한 에이전트 이름과 작업 요약을 표시합니다.
Docker 지원	원클릭 Docker compose가 포트 8050에서 UI를, 8000에서 API를 제공합니다.
크로스 플랫폼	Linux, macOS, Windows에서 실행됩니다.

빠른 시작 (실행 방법)

# 저장소를 클론하고 이동
git clone https://github.com/paulrobello/claude-office.git
cd claude-office

# 모든 것 설치 (백엔드, 프론트엔드, 훅)
make install-all

# tmux 세션에서 전체 스택 시작 (권장)
make dev-tmux

브라우저에서 http://localhost:3000 을 열어 시각화 도구를 확인하세요.

단일 프로세스로 실행하려면 make dev가 tmux 없이 백엔드와 프론트엔드를 병렬로 시작합니다.

선택적 AI 강화 기능

친근한 이름과 AI 생성 작업 요약을 얻으려면 backend/ 폴더에 Claude Code OAuth 토큰이 포함된 .env 파일을 만드세요:

claude setup-token   # 장기 토큰 획득
echo "CLAUDE_CODE_OAUTH_TOKEN=YOUR_TOKEN" > backend/.env

토큰이 없어도 시각화 도구는 작동하지만 에이전트는 원시 ID로 표시됩니다.

확장 또는 기여

새 시각화 추가 – 기존 Zustand 스토어에 연결하거나 새 PixiJS 시스템을 만드세요.
다른 백엔드 지원 – 아키텍처는 간단한 이벤트 스키마를 사용합니다. 동일한 JSON을 FastAPI 엔드포인트에 게시하는 새 훅/플러그인을 작성할 수 있습니다.
테스트 실행 – make checkall은 린팅, 타입 검사 및 전체 테스트 스위트(약 500개 테스트)를 실행합니다.
Docker – make docker-build && make docker-up은 컨테이너를 빌드하고 http://localhost:8050에서 UI를 제공합니다.

모든 기여는 CI 검사를 통과하고 문서 업데이트를 포함해야 합니다.

누구에게 유용한가?

Claude Code를 사용하는 개발자 – 모델이 무엇을 하고 있는지 시각적 단서를 원하는 분.
연구자 – 다중 에이전트 LLM 워크플로우를 구축하고 작업 위임을 빠르게 확인해야 하는 분.
교육자 – 공유 환경에서 AI 에이전트가 상호 작용하는 재미있는 데모를 찾는 분.

더 알아보기

문서 – docs/에는 빠른 시작 가이드, 아키텍처 개요, 화이트보드 모드 참조 및 Docker 배포 지침이 포함되어 있습니다.
데모 비디오 – README 배지에 링크되어 있습니다.
소스 코드 – 저장소는 backend/, frontend/, hooks/, opencode-plugin/ 디렉토리로 분할되어 관심사가 명확히 분리됩니다.

TL;DR

Claude Office는 Claude Code의 내부 이벤트를 실시간 픽셀 아트 사무실 시뮬레이션으로 변환합니다. make install-all로 설치하고, make dev-tmux를 실행하고, 브라우저를 localhost:3000으로 지정하여 AI 에이전트가 작업하는 모습을 확인하세요.