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
CLI Design Patterns for AI Agents: Misconceptions and Practical Approaches
A Reddit post clarifies that CLI for agents means a text command interface protocol, not necessarily a real shell, and outlines agent-friendly CLI design principles including Unix-style help, tips thinking, and safety mechanisms like dry-run previews and human authorization.
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.
Practical Prompt Structure for Claude AI Execution Agents
A developer shares prompt engineering techniques that reduced hallucinations in Claude AI agents performing API calls, data extraction, and multi-step workflows. Key strategies include writing prompts as contracts, dedicating 40% of tokens to error handling, and separating 'wait' from 'stop' conditions.
Multi-Agent Architecture: Avoiding the Single-Agent Pitfall in AI Systems
A Reddit post identifies the common architectural mistake of using a single agent for multiple tasks, which leads to fragile systems requiring constant babysitting. The solution proposed is an orchestrator-specialist model where each agent has a narrow, specific role.