OpenClaw-bot-review Practical Guide: Build Your AI Robot Operations Monitoring Dashboard

Intermediate level, approximately 30 minutes, guiding you to quickly deploy a visual monitoring dashboard and master the skills for real-time state monitoring of OpenClaw robots.

Target Audience

Developers and operations staff using OpenClaw
Teams seeking visual monitoring of Bot states
Technicians interested in Agentic AI operations

Core Dependencies and Environment

Node.js: 18+
OpenClaw: Pre-configured, with the configuration file located at ~/.openclaw/openclaw.json
Tech Stack: Next.js 15 + TypeScript + Tailwind CSS

Project Structure

OpenClaw-bot-review/
├── app/
│   ├── components/      # UI components
│   ├── api/             # API routes
│   ├── models/          # Model management page
│   ├── sessions/        # Session management page
│   ├── skills/          # Skill management page
│   ├── stats/           # Statistics page
│   ├── alerts/          # Alerts center page
│   └── pixel-office/    # Pixel office page
├── lib/                 # Utility functions
│   └── openclaw.ts      # Core logic for reading OpenClaw configuration
├── docs/                # Documentation images
├── public/              # Static resources
├── package.json
├── next.config.mjs
└── tsconfig.json

Step-by-Step Guide

1. Prepare the Environment

First, ensure that Node.js version 18 or higher is installed on your machine:

node --version
# Confirm output v18.x.x or higher

Also, make sure that OpenClaw is correctly configured. OpenClaw generates a configuration file at ~/.openclaw/openclaw.json, which contains all the configuration information for the Bots and serves as the data source for the monitoring dashboard.

TIP

If you haven't installed OpenClaw yet, visit https://openclaw.ai for the official installation documentation.

2. Clone the Project

Open your terminal and clone the OpenClaw-bot-review repository:

git clone https://github.com/xmanrui/OpenClaw-bot-review.git
cd OpenClaw-bot-review

The project will be cloned into a folder named OpenClaw-bot-review in the current directory.

3. Install Dependencies

Navigate to the project directory and install all dependencies:

npm install

This command will read the package.json and install all necessary packages such as Next.js, TypeScript, Tailwind CSS, etc. Once installation is complete, you will see the node_modules folder.

4. Start the Server

Start the development server:

npm run dev

After a few seconds, you should see output similar to this:

▲ Next.js 15.x.x
- Local: http://localhost:3000
- Network: http://192.168.x.x:3000

Now open your browser and visit http://localhost:3000; you should see the main interface of the monitoring dashboard.

WARNING

If the page appears blank or you encounter errors, it is likely due to issues with the OpenClaw configuration file path. Please refer to the 'Common Issues Troubleshooting' section for assistance.

5. Configuration Insights

OpenClaw-bot-review reads the ~/.openclaw/openclaw.json file to gather Bot information. A typical configuration file structure looks like this:

{
  "bots": [
    {
      "name": "MyAssistant",
      "emoji": "🤖",
      "model": "claude-sonnet-4-20250514",
      "platforms": ["feishu", "discord"],
      "gateway": "http://localhost:8080"
    }
  ],
  "providers": [
    {
      "name": "anthropic",
      "models": [
        {
          "id": "claude-sonnet-4-20250514",
          "contextWindow": 200000,
          "maxOutput": 8192
        }
      ]
    }
  ]
}

The dashboard will parse this configuration file to display:

All Bot cards (name, emoji, model, bound platforms)
Connection status for each platform
Gateway health status
Session statistics

6. Functional Exploration

6.1 Bot Overview

The main interface displays a Bot card wall by default, with each card showing:

Bot name and emoji
The currently used model
Bound platforms (Feishu, Discord, etc.)
Gateway connection status (green indicates normal, red indicates disconnected)

6.2 Model List

Click on the 'Models' sidebar to view all configured models:

Provider list (Anthropic, OpenAI, Gemini, etc.)
Context window size for each model
Maximum output token count
Whether inference models are supported
Single Model Testing: You can enter a test prompt directly on the panel to verify the model's availability.

// Model loading logic in lib/openclaw.ts
export async function getModels() {
  const config = await loadOpenClawConfig();
  return config.providers.flatMap(p => p.models);
}

6.3 Session Management

Click on 'Sessions' to view all sessions by Bot:

Identification of direct messages (DM), group chats, and cron scheduled tasks
Token usage statistics
Time of the most recent message
Connectivity Testing: A one-click test to verify if the Bot can respond normally.

6.4 Gateway Health Monitoring

At the bottom of the panel, there is a real-time Gateway status indicator:

Automatically checks every 10 seconds
Clear green/red status indicators
Clicking will redirect you to the OpenClaw web interface

// Core polling logic in app/gateway-status.tsx
useEffect(() => {
  const checkGateway = async () => {
    const status = await fetch('/api/gateway/health').then(r => r.json());
    setGatewayStatus(status);
  };

  checkGateway();
  const interval = setInterval(checkGateway, 10000);
  return () => clearInterval(interval);
}, []);

6.5 Auto Refresh

At the bottom of the sidebar, you can set the refresh interval:

Manual refresh
10 seconds
30 seconds
1 minute
5 minutes
10 minutes

7. Alert Configuration

Click on 'Alerts Center' to configure monitoring rules:

7.1 Create Alert Rules

// app/alerts/page.tsx
interface AlertRule {
  type: 'model_unavailable' | 'bot_no_response' | 'gateway_down';
  threshold: number;  // Threshold for failure count
  enabled: boolean;
}

Currently, three types of alerts are supported:

Model Unavailable: Triggered when a specific model fails consecutively N times
Bot No Response: Triggered if the Bot does not respond to a message within a specified time
Gateway Down: Triggered when the Gateway cannot connect

7.2 Feishu Notification Setup

Configure the alert push channel to the Feishu Webhook:

# Set Feishu Webhook in environment variables
FEISHU_WEBHOOK_URL=https://open.feishu.cn/open-apis/bot/v2/hook/xxx

When an alert is triggered, the panel will automatically send a message to the Feishu group:

{
  "msg_type": "text",
  "content": {
    "text": "🚨 [OpenClaw Alert] The Gateway for Bot [MyAssistant] has been disconnected for over 5 minutes"
  }
}

8. Docker Deployment

If you want to run it long-term on a server, it is recommended to use Docker:

8.1 Build the Image

docker build -t openclaw-dashboard .

8.2 Run the Container

# Basic run
docker run -d -p 3000:3000 openclaw-dashboard

# Custom OpenClaw config path
docker run -d \
  --name openclaw-dashboard \
  -p 3000:3000 \
  -e OPENCLAW_HOME=/opt/openclaw \
  -v /path/to/openclaw:/opt/openclaw \
  openclaw-dashboard

TIP

For production environments, it is recommended to use Nginx or Traefik as a reverse proxy and configure HTTPS.

Common Issues Troubleshooting

Q1: Blank page with configuration file not found message

Reason: The panel cannot find the OpenClaw configuration file.

Solution: Ensure that the ~/.openclaw/openclaw.json file exists. If you are using a custom path, specify it via an environment variable:

OPENCLAW_HOME=/your/custom/path npm run dev

Q2: Port 3000 is occupied

Reason: The port is already occupied by another process.

Solution: Choose a different port:

PORT=3001 npm run dev

Q3: Gateway status always shows red

Reason: The OpenClaw Gateway is not running or the port is incorrect.

Solution:

Ensure the OpenClaw Gateway is running (default port 8080)
Check if the Gateway address in the configuration file is correct
Review the Gateway logs for errors

Q4: Feishu alert sending failure

Reason: Incorrect configuration of the Webhook URL or insufficient permissions for the bot.