OpenClaw용 커스텀 커맨드 센터 앱: Tailscale과 WebSocket 프록시를 사용한 React PWA
Reddit 사용자(Weird_Night_2176)가 자신의 OpenClaw 게이트웨이를 기반으로 구축한 맞춤형 명령 센터 앱을 공유했습니다. 이 앱은 이전에 WhatsApp을 기반으로 한 제어 방식을 대체하며, Twilio의 하루 50개 메시지 샌드박스 제한으로 인해 불편을 겪었습니다. 설정은 Jetson 장치에서 실행되며, Tailscale을 통해 어디서나 접속 가능한 React PWA를 제공합니다.
아키텍처 및 주요 구성 요소
- WebSocket 프록시: OpenClaw는 루프백에만 바인딩되므로 개발자는 WebSocket 연결을 브리징하는 경량 Express 프록시 서버를 만들었습니다. 이를 통해 React 프론트엔드가 Tailscale 메시의 모든 장치에서 OpenClaw 게이트웨이와 통신할 수 있습니다.
- 프론트엔드: Jetson에서 직접 제공되는 React 프로그레시브 웹 앱(PWA)입니다.
- 네트워크: 보안 원격 접근을 위한 Tailscale 메시; iPhone에서 Tailscale을 통해 작동합니다.
명령 센터 기능
- 실시간 채팅 인터페이스: AI 에이전트 "Bosefus"와의 직접 채팅.
- 에이전트 대시보드: 14명의 에이전트와 각자의 마지막 작업 및 상태를 표시.
- 트레이딩 데스크: 실시간 Alpaca 포지션 및 암호화폐 손익.
- 크루 실행 기록: 자동화된 모든 작업이 이름별로 기록됨.
- Ollama 모델 상태: Orange Pi 모델 서버의 실시간 상태.
- 빌드 펀드 트래커: 다음 하드웨어 업그레이드를 위한 저축을 추적.
- 푸시 알림: 알림용 WhatsApp을 대체.
대상 사용자
명령줄이나 타사 메시징 앱을 넘어 특화된 UI가 필요한, 특히 여러 에이전트와 트레이딩 연동을 사용하는 OpenClaw AI 에이전트 게이트웨이 개발자.
자료
사용자는 YouTube에서 전체 빌드 워크스루를 공개할 예정이라고 밝혔습니다. 현재는 Reddit 게시물에 아키텍처 및 동기에 대한 세부 정보가 있습니다.
📖 전체 소스 읽기: r/openclaw
👀 See Also
로컬 백엔드로 Claude Code의 KV 캐시 무효화 문제 해결하기
Claude Code 버전 2.1.36 이상은 모든 요청에 동적 원격 측정 헤더와 git 상태 업데이트를 주입하여 프리픽스 매칭을 방해하고 llama.cpp와 같은 로컬 백엔드에서 전체 20K+ 토큰 시스템 프롬프트 재처리를 강제합니다. ~/.claude/settings.json의 구성 수정으로 처리 시간을 60초 이상에서 약 4초로 줄일 수 있습니다.
맥 스튜디오에 로컬 금융 데이터 + 개인 AI 시스템 구축하기
개발자가 Mac Studio를 활용하여 완전히 로컬화된 금융 데이터 처리 및 개인 AI 어시스턴트를 구축한 과정을 공유합니다. 아키텍처 결정, 메모리 분할, cron 오케스트레이션, 초기 설정 최적화를 다룹니다.
로컬 AI 코딩 에이전트 설정을 위한 OpenCode 시작하기
초보자 가이드는 Mac, Linux, Windows(WSL2)에서 LM Studio, llama.cpp 또는 Ollama를 통해 ByteShape의 최적화된 모델을 사용하여 OpenCode를 완전히 로컬 AI 코딩 에이전트로 설정하는 과정을 안내합니다.
종단 간 LLM 스택 추적: 키 입력부터 스트리밍된 토큰까지
소프트웨어 엔지니어가 LLM에 프롬프트를 보낼 때 스택의 모든 계층에서 발생하는 일을 추적하는 포괄적인 문서를 작성했습니다. 클라이언트 측 토큰 카운팅, 네트워크 프로토콜, API 게이트웨이, 안전 분류기, 토큰화, KV 캐시, 샘플링 파이프라인, 스트리밍 메커니즘을 다룹니다.