Hermes Web UI：把 AI Agent 装进浏览器，一个面板管到底

你用 Hermes Agent 管着 Telegram Bot、Discord Bot、微信公众号，每天在 CLI 里敲命令看日志。说实话，挺折腾的。

Hermes Web UI 解决的就是这个问题——给你一个浏览器里的控制面板，把聊天、渠道、定时任务、用量分析、文件管理、Web 终端全塞进去，一个页面搞定。

本文提纲

1. 两套 Web UI，别搞混了
2. 安装：一行命令搞定
3. 核心功能一览
4. 平台渠道配置
5. 用量分析与成本追踪
6. 多 Agent 聊天室
7. Web 终端和文件浏览器
8. 定时任务管理
9. 安全和权限

两套 Web UI，别搞混了

Hermes 生态里有两个 Web 界面，容易混淆：

内置 Dashboard（hermes dashboard）—— Hermes 官方自带，React + FastAPI，轻量级。覆盖配置管理、会话浏览、Skills、Cron、日志、状态、分析等 8 个页面。启动命令：

hermes dashboard --port 9119

特点：开箱即用，和 Hermes CLI 同源发布，但功能相对基础。

Hermes Web UI（hermes-web-ui）—— 社区项目 EKKOLearnAI/hermes-web-ui，Vue 3 + Koa，功能更全面。4,200+ Stars，506 Forks，MIT 协议，目前版本 0.5.16。

本文主要介绍后者，因为它的功能覆盖更广，适合需要完整管理面板的用户。

安装：一行命令搞定

npm 安装（推荐）：

npm install -g hermes-web-ui
hermes-web-ui start
# 打开 http://localhost:8648

一键脚本（自动检测系统、安装 Node.js）：

bash <(curl -fsSL https://raw.githubusercontent.com/EKKOLearnAI/hermes-web-ui/main/scripts/setup.sh)

Docker Compose（Web UI + Hermes Agent 一起跑）：

WEBUI_IMAGE=ekkoye8888/hermes-web-ui:latest docker compose up -d hermes-agent hermes-webui
# 打开 http://localhost:6060

常用 CLI 命令：

命令	说明
hermes-web-ui start	后台启动守护进程
hermes-web-ui start --port 9000	自定义端口
hermes-web-ui stop	停止
hermes-web-ui restart	重启
hermes-web-ui status	查看运行状态
hermes-web-ui update	升级到最新版并重启

第一次启动时会自动做几件事：验证 ~/.hermes/config.yaml、补全缺失配置、检测并启动 Gateway、解决端口冲突、成功后自动打开浏览器。

核心功能一览

先把架构搞清楚：

浏览器 → BFF (Koa, :8648) → Hermes Gateway (:8642)
                ↓
           Hermes CLI (sessions, logs, version)
                ↓
           ~/.hermes/config.yaml  (渠道行为)
           ~/.hermes/auth.json    (模型凭证)

浏览器先连到 BFF 层（Koa），BFF 再通过 Hermes Gateway 和 CLI 操作底层资源。这种分层设计意味着 Web UI 本身不直接碰你的 API Key——都走 Gateway 中转。

功能模块速览：

模块	能做什么
AI Chat	实时流式对话、多会话管理、Markdown 渲染、文件上传下载
平台渠道	8 个平台统一配置（Telegram/Discord/Slack/WhatsApp/Matrix/飞书/微信/企微）
用量分析	Token 消耗、会话数、成本估算、模型分布、30 天趋势
定时任务	Cron 增删改查、立即触发、快捷预设
模型管理	自动发现模型、添加/更新 Provider、OAuth 登录
文件浏览器	远程文件管理（上传/下载/重命名/复制/移动/删除）
聊天室	多 Agent 群聊，@mention 路由，上下文压缩
Web 终端	浏览器里开终端（node-pty + xterm），多会话
Skills & Memory	浏览/搜索已安装 Skills、用户笔记、Profile 管理
日志	Agent/Gateway/错误日志，按级别/文件/关键词过滤

平台渠道配置

这是我觉得最实用的功能。以前配一个 Telegram Bot 要改 YAML、重启 Gateway、看日志排查；现在在 Web UI 里填几个字段就完事了。

支持 8 个平台：

平台	关键配置
Telegram	Bot Token、@提及控制、消息反应、自由聊天
Discord	Bot Token、@提及、自动建线程、频道白名单/黑名单
Slack	Bot Token、@提及控制、Bot 消息处理
WhatsApp	启用/禁用、@提及模式
Matrix	Access Token、Home Server、自动建线程
飞书（Lark）	App ID/Secret、@提及控制
微信	扫码登录（浏览器扫码，自动保存凭证）
企业微信	Bot ID/Secret

微信的扫码登录做得比较巧妙——直接在 Web UI 页面里弹出二维码，用手机微信扫一下就行，不用手动搞 Cookie 之类的。

用量分析与成本追踪

跑 AI Agent 最怕什么？不知道花了多少钱。Web UI 的 Analytics 页面提供：

• Token 用量明细：按会话、按模型拆分
• 成本估算：基于模型定价自动计算
• 模型使用分布：哪个模型调用量最大，一目了然
• 30 天趋势图：每天消耗了多少 Token

这个功能对同时跑多个模型（Claude、GPT、Gemini、DeepSeek）的用户特别有用——可以直观看到哪个模型性价比最高。

多 Agent 聊天室

这是个有意思的功能——多个 AI Agent 在同一个聊天室里协作，通过 @mention 路由消息给特定 Agent。

实现方式是 Socket.IO + 上下文压缩。当一个 Agent 的上下文快满时，自动压缩历史消息，保持对话连贯。还有邀请码机制控制谁能加入聊天室。

适用场景：让 Claude 做 Code Review、GPT 做文档、DeepSeek 做测试——各司其职，在一个房间里协调。

Web 终端和文件浏览器

这两个功能合在一起，基本上可以脱离 SSH 了。

Web 终端：基于 node-pty + xterm.js，支持多会话。直接在浏览器里执行命令，和 SSH 终端体验一致。

文件浏览器：支持本地、Docker、SSH、Singularity 四种后端。可以浏览文件、上传下载、重命名、复制移动。文件预览还带语法高亮。

对于远程管理 VPS 上的 Hermes 部署，这两个功能省了大量切窗口的时间。

定时任务管理

Cron 管理界面比手写 crontab 直观多了。支持：

• 创建/编辑/删除 Cron Job
• 立即手动触发
• 快捷预设（每 30 分钟、每小时、每天 9 点等）

和 Hermes 内置的 cron 系统打通，在 Web UI 里创建的任务会同步到 Hermes 调度器。

安全和权限

Web UI 默认启动时自动生成 Token 认证。关键安全设计：

• 每次 Server 启动生成新 Session Token，注入到 SPA HTML
• 敏感端点有速率限制（30 秒内最多 5 次请求）
• CORS 限制为 localhost
• AUTH_DISABLED=1 可以关闭认证（仅限本地开发）
• --insecure 模式绑定 0.0.0.0 时会明确警告网络暴露风险

关键环境变量：

变量	默认值	说明
PORT	8648	监听端口
AUTH_DISABLED	false	关闭认证
AUTH_TOKEN	自动生成	自定义 Token
HERMES_BIN	PATH 中的 hermes	Hermes CLI 路径
UPSTREAM	http://127.0.0.1:8642	Hermes Gateway 地址

支持 8 种语言的国际化：英语、中文、德语、西班牙语、法语、日语、韩语、葡萄牙语。

---

如果你想快速体验，最快的方式：

npm install -g hermes-web-ui
hermes-web-ui start

30 秒后浏览器就会打开控制面板。如果你已经在跑 Hermes Agent，它会自动发现你的配置和会话，不需要额外设置。

---

作者: itech001
来源: 公众号：AI人工智能时代
主页: https://www.theaiera.cn（每日分享最前沿的AI新闻和技术）

本文首发于 AI人工智能时代，转载请注明出处。