Custom Command Center App for OpenClaw: React PWA with WebSocket Proxy and Tailscale
A Reddit user (Weird_Night_2176) shared their custom command center app built on top of their OpenClaw gateway. The app replaces their previous WhatsApp-based control method, which was limited by Twilio's 50 messages/day sandbox cap. The setup runs on a Jetson device, serving a React PWA accessible anywhere via Tailscale.
Architecture & Key Components
- WebSocket Proxy: OpenClaw binds to loopback only, so the developer created a lightweight Express proxy server that bridges the WebSocket connection. This allows the React frontend to communicate with the OpenClaw gateway from any device on the Tailscale mesh.
- Frontend: A React Progressive Web App (PWA) served directly from the Jetson.
- Network: Tailscale mesh for secure remote access; the app works on iPhone via Tailscale.
Features of the Command Center
- Live Chat Interface: Direct chat with the AI agent "Bosefus".
- Agent Dashboard: Shows 14 agents with their last task and status.
- Trading Desk: Live Alpaca positions and crypto P&L.
- Crew Run History: Every automated job logged by name.
- Ollama Model Status: Live status from the Orange Pi model server.
- Build Fund Tracker: Tracks savings toward the next hardware upgrade.
- Push Notifications: Replaces WhatsApp for alerts.
Who This Is For
Developers running OpenClaw as an AI agent gateway who need a purpose-built UI beyond command-line or third-party messaging apps, especially those with multiple agents and trading integrations.
Resources
The user mentioned a full build walkthrough coming on YouTube. For now, the Reddit post has details on the architecture and motivation.
📖 Read the full source: r/openclaw
👀 See Also
How to Optimize Your OpenClaw Setup with Specific Instructions and Refinements
OpenClaw optimization relies on precise instructions and continuous refinement of agent personalities and cost-effective model utilization.
How to Troubleshoot OpenClaw Setup Issues: Multi-Agent and Model Response Problems
Struggling with setting up OpenClaw? Discover common problems with multi-agent configurations and unresponsive models, and learn how to solve them.
Building a Custom Hindi Glossary System with Claude: From 76% to 92% Accuracy in 10 Months
A solo dev in Bangalore built a custom glossary system for Claude to improve Hindi domain vocabulary accuracy from 76% to 92%. Example-based terms with context sentences worked best.
Practical setup and configuration guide for OpenClaw self-hosted AI agent
OpenClaw is a self-hosted AI agent that integrates with messaging apps and maintains persistent memory through a file-based system. Key setup recommendations include starting with the terminal interface, connecting only one messaging channel initially, and properly configuring the SOUL.md file for personality and security rules.