jarvis-ui_skill

Overview

This skill provides a JARVIS-style HUD web interface for OpenClaw agents, delivering a real-time visual dashboard and interaction layer. It combines a reactive Three.js orb, live chat via Gateway WebSocket, audio visualization, system metrics, and text-to-speech for an immersive agent experience. Install and run locally to monitor and interact with an agent through a responsive browser UI.

How this skill works

The server connects to the OpenClaw Gateway and relays agent state and chat over a WebSocket, updating the Three.js orb and UI in real time. It captures audio streams for spectrum, ring, and waveform visualizations and exposes model usage and system metrics. TTS integrates via Edge TTS or macOS say, and configuration is managed through a local config file and environment settings.

When to use it

• You want a visual dashboard to monitor an OpenClaw agent in real time.
• You need a lightweight control UI for chat and agent state during development or demos.
• You want audio visualization and TTS integrated with agent responses.
• You need quick insights into model token usage and system resource status.
• You want a mobile-responsive, PWA-capable interface for remote viewing.

Best practices

• Run the Gateway locally and ensure the gateway token is available in ~/.openclaw/openclaw.json.
• For remote access, enable insecure auth explicitly in OpenClaw config and restart the Gateway only when necessary.
• Copy config.json to config.local.json to preserve defaults and keep custom settings out of version control.
• Use Node.js 20+ and install Python edge-tts if you need cross-platform synthesized speech.
• Use pm2 or another process manager for production deployment to keep the server running and restart on failure.

Example use cases

• Developer dashboard during agent training or behavior testing with live state visualization.
• Demoing an OpenClaw agent to stakeholders using the JARVIS orb and live chat relay.
• Monitoring token consumption and model info in real time during load tests or long conversations.
• Providing spoken feedback in kiosk setups via macOS say or Edge TTS for accessible interfaces.
• Embedding the HUD on a tablet or phone as a PWA for remote monitoring of an agent.