Jarvis Reactor

Arc Reactor style visual status display for OpenClaw AI agents.

Inspired by Iron Man's J.A.R.V.I.S. interface — see your AI assistant think, respond, and idle in real-time.

Features

• 🤖 OpenClaw Integration — Real-time visualization of your AI agent's state
• 🔵 Smooth animated rings with overlapping layers
• 🎨 5 status states: idle, active, thinking, listening, error
• ⚡ WebSocket sync with OpenClaw Gateway
• 🔌 REST API for custom integrations
• 🖥️ Kiosk mode for Raspberry Pi displays
• 🌈 Color highlights and glossy effects
• 📱 Multi-agent support — filter by agent ID

Quick Start

# Clone
git clone https://github.com/f2daz/jarvis-reactor.git
cd jarvis-reactor

# Install
npm install

# Run
npm start

# Open http://localhost:3030

States

State	Color	Description
idle	Cyan	Default, slow rotation
active	Bright Cyan	Fast rotation, responding
thinking	Purple	Processing, inner rings fast
listening	Green	Waiting for input
error	Red	Alert state

API

REST

# Get current state
curl http://localhost:3030/status

# Set state
curl -X POST http://localhost:3030/status \
  -H "Content-Type: application/json" \
  -d '{"state": "thinking"}'

WebSocket

Connect to ws://localhost:3030:

const ws = new WebSocket('ws://localhost:3030');

ws.onmessage = (e) => {
  const { state } = JSON.parse(e.data);
  console.log('State:', state);
};

ws.send(JSON.stringify({ state: 'active' }));

Browser Console

reactor.set('thinking');
reactor.set('active', 5000); // Auto-reset to idle after 5s

Kiosk Mode

Hide all controls for clean display:

http://localhost:3030?kiosk

Or toggle controls with:

• Press C - toggle controls
• Double-click - toggle controls

OpenClaw Integration

Connect directly to your OpenClaw Gateway:

http://localhost:3030?gw=ws://YOUR_GATEWAY:PORT&token=YOUR_TOKEN&kiosk

URL Parameters

Parameter	Description
gw	Gateway WebSocket URL (required)
token	Authentication token (required)
agent	Filter by agent ID (any string matching your agent config)
kiosk	Hide controls

Multi-Agent Setup

If you run multiple OpenClaw agents, use the agent parameter to filter which one animates the reactor:

# Only react to a specific agent (use your agent ID)
http://localhost:3030?gw=ws://...&token=...&agent=main
http://localhost:3030?gw=ws://...&token=...&agent=work
http://localhost:3030?gw=ws://...&token=...&agent=dev

# React to all agents (default)
http://localhost:3030?gw=ws://...&token=...

The agent value must match the agent ID configured in your OpenClaw setup.

The reactor automatically shows:

• thinking when message received
• active when responding
• idle when done

---

🍓 Raspberry Pi Setup

Requirements

• Raspberry Pi 3/4/5 (or Zero 2 W)
• Raspberry Pi OS (Lite or Desktop)
• Display (HDMI or DSI)
• Network connection

Step 1: Install OS

1. Use Raspberry Pi Imager to flash Raspberry Pi OS Lite (64-bit)
2. Enable SSH and configure WiFi in Imager settings
3. Boot and SSH into your Pi

Step 2: Install Node.js

# Update system
sudo apt update && sudo apt upgrade -y

# Install Node.js 20.x
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

# Verify
node --version  # Should show v20.x.x

Step 3: Install Jarvis Reactor

# Clone repository
cd ~
git clone https://github.com/f2daz/jarvis-reactor.git
cd jarvis-reactor

# Install dependencies
npm install

Step 4: Setup Kiosk Browser

# Install minimal X server and Chromium
sudo apt install -y --no-install-recommends \
  xserver-xorg x11-xserver-utils xinit \
  chromium-browser unclutter

# Create kiosk startup script
cat > ~/kiosk.sh << 'EOF'
#!/bin/bash

# Disable screen blanking
xset s off
xset s noblank
xset -dpms

# Hide cursor after 0.5s of inactivity
unclutter -idle 0.5 -root &

# Start Chromium in kiosk mode
chromium-browser \
  --kiosk \
  --noerrdialogs \
  --disable-infobars \
  --disable-session-crashed-bubble \
  --disable-restore-session-state \
  --no-first-run \
  --start-fullscreen \
  --autoplay-policy=no-user-gesture-required \
  "http://localhost:3030?kiosk&gw=ws://YOUR_GATEWAY:PORT&token=YOUR_TOKEN"
EOF

chmod +x ~/kiosk.sh

Step 5: Auto-Start Services

Create systemd service for the Node.js server:

sudo tee /etc/systemd/system/jarvis-reactor.service << EOF
[Unit]
Description=Jarvis Reactor Server
After=network.target

[Service]
Type=simple
User=$USER
WorkingDirectory=/home/$USER/jarvis-reactor
ExecStart=/usr/bin/node server.js
Restart=always
RestartSec=10

[Install]
WantedBy=multi-user.target
EOF

sudo systemctl enable jarvis-reactor
sudo systemctl start jarvis-reactor

Create systemd service for kiosk browser:

sudo tee /etc/systemd/system/jarvis-kiosk.service << EOF
[Unit]
Description=Jarvis Reactor Kiosk
After=jarvis-reactor.service
Wants=jarvis-reactor.service

[Service]
Type=simple
User=$USER
Environment=DISPLAY=:0
ExecStartPre=/bin/sleep 5
ExecStart=/usr/bin/startx /home/$USER/kiosk.sh -- -nocursor
Restart=always
RestartSec=10

[Install]
WantedBy=graphical.target
EOF

sudo systemctl enable jarvis-kiosk

Step 6: Configure Auto-Login (for Lite OS)

sudo raspi-config
# → System Options → Boot / Auto Login → Console Autologin

Step 7: Reboot

sudo reboot

The Raspberry Pi should now boot directly into the Jarvis Reactor display!

Troubleshooting

Black screen?

# Check if server is running
sudo systemctl status jarvis-reactor

# Check logs
journalctl -u jarvis-reactor -f

Browser not starting?

# Check kiosk service
sudo systemctl status jarvis-kiosk
journalctl -u jarvis-kiosk -f

Test manually:

# Start server
cd ~/jarvis-reactor && node server.js &

# Start X and browser
startx ~/kiosk.sh

Display Rotation

For rotated displays, edit /boot/config.txt:

# 90° clockwise
display_rotate=1

# 180°
display_rotate=2

# 270° clockwise
display_rotate=3

Performance Tips

• Use Raspberry Pi 4 or 5 for smooth 60fps
• Disable compositor: sudo raspi-config → Advanced → Compositor → No
• Use wired ethernet for reliable WebSocket connection
• Reduce GPU memory if not using video: gpu_mem=64 in /boot/config.txt

---

MQTT Integration

Control the reactor via MQTT:

# Environment variables
export MQTT_URL=mqtt://192.168.90.60:1883
export MQTT_USER=mqtt
export MQTT_PASSWORD=your_password
export MQTT_TOPIC=jarvis/reactor/state  # optional, this is default

# Start with MQTT
node server.js

Subscribe to jarvis/reactor/state to receive state changes. Publish to jarvis/reactor/state to change state:

mosquitto_pub -h mqtt.local -t jarvis/reactor/state -m "thinking"

Valid states: idle, active, thinking, listening, error

---

Home Assistant Integration

rest_command:
  jarvis_state:
    url: "http://raspberry-pi:3030/status"
    method: POST
    content_type: "application/json"
    payload: '{"state": "{{ state }}"}'

automation:
  - alias: "Jarvis Thinking"
    trigger:
      platform: state
      entity_id: binary_sensor.voice_assistant
      to: "on"
    action:
      service: rest_command.jarvis_state
      data:
        state: listening

---

Customization

Colors

Edit reactor.js CONFIG section:

states: {
  idle: {
    color: { primary: '#00d4ff', secondary: '#0099bb', core: '#00aacc' },
    // ...
  },
  // ...
}

Ring Speed

Adjust speeds (degrees per second) in CONFIG:

speeds: [
  [3, 5],      // Ring 1: [main, overlay]
  [-6, -9],    // Ring 2 (negative = counter-clockwise)
  [10, 15],    // Ring 3
  [-5, -8],    // Ring 4
],

Add Custom States

Add to CONFIG.states in reactor.js:

myState: {
  color: { primary: '#ff8800', secondary: '#cc6600', core: '#ffaa00' },
  speeds: [[5, 8], [-8, -12], [15, 22], [-6, -10]],
  coreSpeed: 0.5,
  coreBrightness: 1.2,
},

---

Files

File	Description
server.js	Node.js bridge server (REST + WebSocket)
reactor.js	Animation engine (JS, no dependencies)
openclaw.js	OpenClaw Gateway integration
index.html	Main UI
favicon.svg	Browser icon

License

MIT

Credits

Inspired by Iron Man's J.A.R.V.I.S. interface and the clawd-face project.