OpenClaw-bot-review 实战：打造你的 AI 机器人运维监控大盘

中级难度，约 30 分钟，带你快速部署一个可视化监控面板，掌握 OpenClaw 机器人的实时状态监控技能。

目标读者

使用 OpenClaw 的开发者、运维人员
想可视化监控 Bot 状态的团队
对 Agentic AI 运维感兴趣的技术人员

核心依赖与环境

Node.js: 18+
OpenClaw: 已配置，配置文件位于 ~/.openclaw/openclaw.json
技术栈: Next.js 15 + TypeScript + Tailwind CSS

项目结构

OpenClaw-bot-review/
├── app/
│   ├── components/      # UI 组件
│   ├── api/             # API 路由
│   ├── models/          # 模型管理页面
│   ├── sessions/        # 会话管理页面
│   ├── skills/          # 技能管理页面
│   ├── stats/           # 统计数据页面
│   ├── alerts/          # 告警中心页面
│   └── pixel-office/    # 像素办公室页面
├── lib/                 # 工具函数
│   └── openclaw.ts      # OpenClaw 配置读取核心逻辑
├── docs/                # 文档图片
├── public/              # 静态资源
├── package.json
├── next.config.mjs
└── tsconfig.json

手把手步骤

1. 环境准备

首先确认你的机器上已经安装了 Node.js 18 或更高版本：

node --version
# 确认输出 v18.x.x 或更高版本

同时确保 OpenClaw 已经正确配置。OpenClaw 会在 ~/.openclaw/openclaw.json 生成配置文件，这个文件包含了所有 Bot 的配置信息，是监控面板的数据来源。

TIP

如果你还没安装 OpenClaw，可以访问 https://openclaw.ai 查看官方安装文档。

2. 克隆项目

打开终端，克隆 OpenClaw-bot-review 仓库：

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

项目会克隆到当前目录下的 OpenClaw-bot-review 文件夹中。

3. 安装依赖

进入项目目录，安装所有依赖：

npm install

这个命令会读取 package.json 并安装 Next.js、TypeScript、Tailwind CSS 等所有必要的包。安装完成后，你会看到 node_modules 文件夹。

4. 启动服务

启动开发服务器：

npm run dev

等待几秒钟，你会看到类似这样的输出：

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

现在打开浏览器，访问 **http://localhost:3000**，你应该能看到监控面板的主界面。

WARNING

如果页面空白或报错，很可能是 OpenClaw 配置文件路径问题，请参考「常见问题排查」部分。

5. 配置解读

OpenClaw-bot-review 读取 ~/.openclaw/openclaw.json 来获取 Bot 信息。典型的配置文件结构如下：

{
  "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
        }
      ]
    }
  ]
}

面板会解析这个配置文件，展示：

所有 Bot 的卡片墙（名称、Emoji、模型、平台绑定）
各平台的连接状态
Gateway 健康状态
会话统计

6. 功能实战

6.1 Bot 总览

主界面默认展示 Bot 卡片墙，每个卡片显示：

Bot 名称和 Emoji
当前使用的模型
绑定的平台（飞书、Discord 等）
Gateway 连接状态（绿色表示正常，红色表示断开）

6.2 模型列表

点击侧边栏的「模型」，可以查看所有已配置的模型：

Provider 列表（Anthropic、OpenAI、Gemini 等）
每个模型的上下文窗口大小
最大输出 token 数
是否支持推理模型
单模型测试：可以直接在面板上输入测试 prompt，验证模型是否可用

// lib/openclaw.ts 中的模型加载逻辑
export async function getModels() {
  const config = await loadOpenClawConfig();
  return config.providers.flatMap(p => p.models);
}

6.3 会话管理

点击「会话」，按 Bot 查看所有会话：

私聊（DM）、群聊、cron 定时任务类型识别
Token 用量统计
最近一条消息的时间
连通性测试：一键测试 Bot 是否能正常响应

6.4 Gateway 健康检测

面板底部有一个实时的 Gateway 状态指示器：

10 秒自动轮询检测
绿色/红色状态一目了然
点击可直接跳转到 OpenClaw Web 界面

// 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 自动刷新

侧边栏底部可以设置刷新间隔：

手动刷新
10 秒
30 秒
1 分钟
5 分钟
10 分钟

7. 告警配置

点击「告警中心」，可以配置监控规则：

7.1 创建告警规则

// app/alerts/page.tsx
interface AlertRule {
  type: 'model_unavailable' | 'bot_no_response' | 'gateway_down';
  threshold: number;  // 失败次数阈值
  enabled: boolean;
}

目前支持三种告警类型：

模型不可用: 当某个模型连续 N 次调用失败时触发
Bot 无响应: 当 Bot 超过指定时间未响应消息时触发
Gateway 宕机: 当 Gateway 无法连接时触发

7.2 飞书通知配置

配置告警推送渠道为飞书 Webhook：

# 在环境变量中设置飞书 Webhook
FEISHU_WEBHOOK_URL=https://open.feishu.cn/open-apis/bot/v2/hook/xxx

告警触发后，面板会自动发送消息到飞书群：

{
  "msg_type": "text",
  "content": {
    "text": "🚨 [OpenClaw 告警] Bot [MyAssistant] 的 Gateway 已断开超过 5 分钟"
  }
}

8. Docker 部署

如果想在服务器上长期运行，推荐使用 Docker：

8.1 构建镜像

docker build -t openclaw-dashboard .

8.2 运行容器

# 基础运行
docker run -d -p 3000:3000 openclaw-dashboard

# 自定义 OpenClaw 配置路径
docker run -d \
  --name openclaw-dashboard \
  -p 3000:3000 \
  -e OPENCLAW_HOME=/opt/openclaw \
  -v /path/to/openclaw:/opt/openclaw \
  openclaw-dashboard

TIP

生产环境建议使用 Nginx 或 Traefik 做反向代理，并配置 HTTPS。

常见问题排查

Q1: 页面打开空白，提示配置文件不存在

原因: 面板找不到 OpenClaw 配置文件。

解决: 确认 ~/.openclaw/openclaw.json 文件存在。如果使用自定义路径，通过环境变量指定：

OPENCLAW_HOME=/your/custom/path npm run dev

Q2: 端口 3000 被占用

原因: 端口已被其他进程占用。

解决: 换一个端口：

PORT=3001 npm run dev

Q3: Gateway 状态一直显示红色

原因: OpenClaw Gateway 未启动或端口不对。

解决:

确认 OpenClaw Gateway 正在运行（默认端口 8080）
检查配置文件中的 Gateway 地址是否正确
查看 Gateway 日志是否有报错

Q4: 飞书告警发送失败

原因: Webhook URL 配置错误或机器人权限不足。

解决:

确认 FEISHU_WEBHOOK_URL 环境变量已设置
检查飞书机器人是否有发送消息权限
测试 Webhook 是否可用：直接用 curl 调用

curl -X POST YOUR_FEISHU_WEBHOOK_URL \
  -H 'Content-Type: application/json' \
  -d '{"msg_type":"text","content":{"text":"test"}}'

Q5: 主题切换不生效，刷新后又变回浅色

原因: 主题偏好存储在 localStorage，可能被清除或未持久化。

解决: 检查浏览器 localStorage 是否正常工作。面板主题切换逻辑在 app/providers.tsx 中，使用 Next-themes 管理。

Q6: 模型列表为空

原因: 配置文件中的 providers 字段为空或格式不对。

解决: 参考步骤 5 的配置示例，确保 openclaw.json 包含正确的 providers 结构。

扩展阅读 / 进阶方向

1. 自定义技能开发

OpenClaw 支持自定义 Skill，你可以：

开发新的飞书/Discord 集成技能
编写 Python/JS 脚本让 Bot 调用
参考官方文档：https://github.com/openclaw/openclaw

2. 像素办公室动画原理

面板中的「像素办公室」功能是一个有趣的彩蛋：

使用 Canvas 2D 绘制像素风格场景
Bot 状态映射为像素角色的动作（行走、坐下、互动）
实时反映 Bot 的在线/离线状态

如果你想自定义，可以研究 app/pixel-office/ 目录下的代码。

3. 多实例监控方案

目前面板设计为单实例监控。如果你有多个 OpenClaw 实例：

可以部署多个面板实例，分别指向不同的配置路径
或者修改代码，支持配置多个 OPENCLAW_HOME 路径