crabwise-ai/crabwalk

🦀 Crabwalk 🦀 Real-time companion monitor for OpenClaw agents.

🦀 Crabwalk – OpenClaw 에이전트 실시간 모니터

무엇인가 – 가벼운 웹 UI로, OpenClaw(Clawdbot) AI 에이전트가 WhatsApp, Telegram, Discord 또는 Slack에서 대화하는 활동을 시각화합니다. 각 세션의 실시간 노드 그래프, 에이전트가 호출하는 도구, 시스템을 흐르는 페이로드를 보여줍니다.

핵심 기능

  • 실시간 활동 그래프 – ReactFlow가 에이전트 세션과 액션 체인을 실시간으로 렌더링합니다.
  • 멀티플랫폼 뷰 – 단일 대시보드에서 지원되는 모든 메신저 플랫폼의 에이전트를 감시합니다.
  • WebSocket 스트리밍 – OpenClaw 게이트웨이(기본 ws://127.0.0.1:18789)에 연결해 이벤트를 실시간으로 수신합니다.
  • 액션 추적 – 노드를 클릭해 도구 인수와 응답 페이로드를 확장·검사합니다.
  • 세션 필터링 – 플랫폼별 필터링 또는 수신자 ID 검색이 가능합니다.
  • QR‑code 단축키 – 시작 시 QR 코드가 출력되며, 스캔하면 휴대폰에서 모니터를 열 수 있습니다.

설치 방법

  1. OpenClaw 통해 – 제공된 skill URL을 OpenClaw 에이전트에 붙여넣으면 Crabwalk이 자동으로 설치·업데이트됩니다.
  2. CLI 설치 프로그램 – 최신 릴리스 tarball을 다운로드해 ~/.crabwalk에 압축을 풀고, 바이너리를 ~/.local/bin에 복사합니다.
  3. Docker – 이미지 ghcr.io/luccast/crabwalk:latest를 풀고 권장 플래그로 실행합니다(포트 3000 노출, 게이트웨이 토큰 전달, OpenClaw 워크스페이스 마운트). 게이트웨이가 루프백에만 바인드된 경우 host 네트워킹이 필요할 수 있습니다.
  4. 소스에서 – git clone, npm install 후 npm run dev(Node.js 필요).

서버 실행

crabwalk                 # 0.0.0.0:3000에서 시작
crabwalk -p 8080        # 포트 커스텀
crabwalk -t mytoken     # 게이트웨이 토큰 명시 지정(없으면 ~/.openclaw/openclaw.json에서 자동 감지)
crabwalk start --daemon # 백그라운드 서비스로 실행

일반적인 워크플로: 서버를 시작하고 http://localhost:3000/monitor를 열거나 QR 코드를 스캔하면 에이전트 대화가 즉시 표시됩니다.

기술 스택 – TanStack Start(풀스택 React) 기반, 그래프 렌더링에 ReactFlow, UI 애니메이션에 Framer Motion, 타입 안전 API 호출에 tRPC, 로컬 데이터 처리는 TanStack DB 사용.

대상 사용자 – OpenClaw 봇을 운영하며 여러 채팅 플랫폼에서 에이전트의 동작을 실시간으로 시각화하고 빠르게 디버깅·관찰하고 싶은 개발자·운영자를 위한 도구입니다.