全程零代码，15 分钟，AI 自己研究、自己写、自己修——然后我的管理系统多了一个实时监控面板。

前两天我在命令行里随口问了 Hermes Agent 一个问题：

“既然你可以自进化，哪么你能给 Hermes Dashboard 上添加功能吗？”

它说"可以"，然后花了大概十几分钟，全程没让我写一行代码，给我的管理系统加了一个完整的实时系统监控面板——CPU、内存、磁盘、网络、进程，全齐了，每 3 秒自动刷新。

这篇文章就是记录这件事的全过程，包括它背后的技术原理、踩的坑，以及我的一些观察。不是什么营销文，是真实的实操记录。

为什么会问这个问题

Hermes Agent 是 Nous Research 开源的一个 AI Agent 框架，它有一个 Web Dashboard（管理面板），跑在 localhost:9119，可以看 Sessions、配置、Cron 任务等。

我之前一直在用它做自动化任务。突然想到一个事儿：它说自己有 self-evolving 能力，会自己学习、写技能、积累经验。那能不能自己给 Dashboard 加功能？

于是我在命令行里问它了上面那个问题。

它花了多长时间

从我发出提问，到功能跑通，大概经历了这么几个阶段：

阶段	耗时	做了什么
1. 理解架构	~3 分钟	读取 Dashboard 源码，分析插件系统结构
2. 写后端 API	~2 分钟	用 psutil 写 CPU/内存/磁盘/网络数据采集
3. 写前端 UI	~4 分钟	React IIFE 组件，暗色主题，自动刷新
4. 调试修复	~5 分钟	修了两个 Bug：注册方式和 API 认证
5. 上线	~1 分钟	重启 Dashboard，打开浏览器验收

总共大概一刻钟。其中大部分时间花在踩坑上——如果再来一次，我相信 5 分钟能搞定。

它是怎么做到的

Hermes Dashboard 有一个 插件系统，任何放在 ~/.hermes/plugins/<name>/dashboard/ 目录下的插件文件，都会被自动发现和加载。

一个 Dashboard 插件由三部分组成：

~/.hermes/plugins/system-monitor/dashboard/
├── manifest.json     ← 插件声明（名称、图标、Tab位置）
├── plugin_api.py     ← 后端 API 路由（FastAPI）
└── dist/
    ├── index.js      ← 前端 React UI（纯 IIFE）
    └── style.css     ← 暗色主题样式

manifest.json

插件的身份证，告诉 Dashboard 这个插件的名字、图标、放在侧边栏哪个位置：

{
  "name": "system-monitor",
  "label": "系统监控",
  "icon": "Activity",
  "tab": { "path": "/system-monitor", "position": "after:dashboard" },
  "entry": "dist/index.js",
  "css": "dist/style.css",
  "api": "plugin_api.py"
}

plugin_api.py（后端）

用 psutil 采集系统数据，8 个 API 端点：

@router.get("/stats")
async def get_all_stats():
    return {
        "cpu": _get_cpu_info(),      # 使用率、每核、频率
        "memory": _get_memory_info(), # 物理内存、Swap
        "disk": _get_disk_info(),     # 分区、I/O
        "network": _get_network_info(),
        "system": _get_system_info(), # 主机名、运行时间
        "snapshot": _get_historical_snapshot(),
    }

每个子函数对应一个独立端点（/stats/cpu、/stats/memory 等），前端可以按需拉取。

dist/index.js（前端）

纯 IIFE 写的 React 组件，不依赖 JSX，不需要 Webpack/Vite 构建，直接在浏览器环境运行：

(function () {
  "use strict";

  const SDK = window.__HERMES_PLUGIN_SDK__;
  if (!SDK) return;

  const { React } = SDK;
  const h = React.createElement;
  const { useState, useEffect, useCallback, useRef } = SDK.hooks;
  const fetchJSON = SDK.fetchJSON;  // ← 自动带 session token

  function SystemMonitor() {
    const [data, setData] = useState(null);
    // ... 60 行 UI 代码：CPU / 内存 / 磁盘 / 网络 / 进程
  }

  // 关键是这行——必须用这个 API 注册
  if (window.__HERMES_PLUGINS__) {
    window.__HERMES_PLUGINS__.register("system-monitor", SystemMonitor);
  }
})();

踩了哪两个坑

❌ 坑 1：注册方式不对

第一次我用 SDK.registerComponent() 注册组件，结果页面显示"插件脚本未调用 register()"。扒了 Kanban 插件的源码才发现，正确的注册方式是 window.__HERMES_PLUGINS__.register()——这是两个完全不同的 API，SDK 上暴露的那个不管用。

❌ 坑 2：API 请求不带 Token

注册修好了，UI 渲染出来了，但所有数据都显示"HTTP 401"。因为 Dashboard 的 API 需要 session token 认证，我用原生 fetch() 没有带 token。解决方案是用 SDK 提供的 fetchJSON()——它会自动从 window.__HERMES_SESSION_TOKEN__ 读取 token 并加到请求头里。这个设计是为了安全（防 CSRF），但确实容易踩坑。

最终效果

打开 http://localhost:9119，你就会看到一个完整的系统监控面板：

总共 5 个数据模块：

• 顶栏：主机名、运行时间、CPU 健康标记、进程总数
• CPU：使用率进度条、频率（当前/最大）、每核迷你条、12 秒历史曲线
• 内存：使用率、已用/可用/总计、交换分区、历史曲线
• 磁盘：所有分区进度条 + 读写 I/O 统计
• 网络：收发双列卡片、包统计
• 进程：Top 15 进程表（按 CPU 排序，每 5 秒刷新）

所有数据通过 psutil 采集，Windows / Linux / macOS 通用。

技术架构全景

┌─────────────────────────────────────────────────┐
│              你的浏览器 localhost:9119            │
│  ┌───────────────────────────────────────────┐  │
│  │   Hermes Dashboard (React SPA)            │  │
│  │   ├── Sessions / Models / Config / ...    │  │
│  │   ├── 系统监控 ◄── 我们加的 Tab            │  │
│  │   └── Plugin SDK (fetchJSON / hooks)      │  │
│  └────────────────┬──────────────────────────┘  │
│                   │ HTTP + Token Auth            │
│  ┌────────────────▼──────────────────────────┐  │
│  │   FastAPI Backend (web_server.py)          │  │
│  │   ├── 核心 API (/api/sessions, ...)        │  │
│  │   └── 插件 API (/api/plugins/sys-monitor/) │  │
│  └────────────────┬──────────────────────────┘  │
│                   │ psutil                      │
│  ┌────────────────▼──────────────────────────┐  │
│  │   系统硬件 (CPU / 内存 / 磁盘 / 网络)      │  │
│  └───────────────────────────────────────────┘  │
└─────────────────────────────────────────────────┘

一些观察和思考

关于"自进化"

很多人说 AI 自进化是噱头。但这次我亲眼看到了——它确实能：

• 读源码理解架构：它读了 Dashboard 的 4000 多行 web_server.py，找到了插件发现机制、路由挂载逻辑、认证方式
• 模仿现有插件：看了 Kanban 插件的实现，搞懂了 manifest.json 的结构、注册方式、前端 SDK 用法
• 出错后自动修复：第一次注册方式不对，它对比了 Kanban 插件后找到正确的 API，自己改好了
• 记住经验：我把这个流程存入了记忆，下次再做 Dashboard 插件，它不会再踩同样的坑

对开发者的启发

这件事让我觉得，AI Agent 正在从一个"提问-回答"工具变成"提需求-交付"工具。我甚至不需要知道 Dashboard 的插件 API——我只说了一句"能不能加功能"，它就自己去研究了。

这个模式如果用在项目里：

• 你说"加个日志查看面板"——它读日志接口、写插件、上线
• 你说"加个 Cron 可视化编辑"——它看代码、写前端、部署
• 你说"看看数据库慢查询"——它连数据库、查状态、展示

开发者从"写代码的人"变成了"提需求的人"。听起来有点夸张，但这次我是真体验到了。

局限

当然不是万能的。这次的限制很明显：

• Hermes 本来就设计了插件系统，让 AI 能扩展自己是刻意设计的结果
• 如果是一个没有插件机制的系统，AI 也能改，但每次更新会被覆盖
• 改编译后的 JS 包（minified bundle）几乎不可能，必须动源码

你能复现吗

如果你也装了 Hermes Agent：

curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash

在命令行里输入 hermes，然后问它：“能给 Dashboard 加个系统监控面板吗？”

如果它像我遇到的一样聪明，十几分钟后你打开 http://localhost:9119 就能看见。

如果不行，你也可以直接看完整源码：

~/.hermes/plugins/system-monitor/dashboard/
├── manifest.json
├── plugin_api.py       # 后端 8 个 API 端点
└── dist/
    ├── index.js        # 前端 React UI
    └── style.css       # 暗色主题样式

最后

这篇文章是 Hermes Agent 帮我写的——包括标题、排版、代码块。我只是看了一遍，改了几个字。

AI 写文章、AI 写代码、AI 给 AI 的管理系统加功能。这感觉挺魔幻的，但它是真的。