当前位置:首页 > 技术教程 > 正文

给 hermes 装个正经界面:hermes-web-ui 安装教程

给 hermes 装个正经界面:hermes-web-ui 安装教程给 hermes 装个正经界面:hermes-web-ui 安装教程

AI 聊天

SSE 实时流式输出是标配。消息以 Markdown 渲染,支持语法高亮和代码块一键复制。

给 hermes 装个正经界面:hermes-web-ui 安装教程  第3张


更实用的是多会话管理。之前用命令行的时候,找两周前的对话上下文要在终端里上下翻半天;现在按来源分组(Telegram、Discord、Slack 等),手风琴面板可折叠,活跃会话置顶并显示旋转指示器。工具调用的参数和返回值可以直接展开查看,不用再扒日志。

全局模型选择器会从 ~/.hermes/auth.json 凭证池自动发现可用模型,不需要手动配置。每个会话还显示当前模型标签和上下文 Token 用量。

平台渠道:8 个平台统一配置

在一个页面里管理 8 个平台:

  • Telegram

     — Bot Token、提及控制、表情回应、自由回复聊天
  • Discord

     — Bot Token、提及控制、自动线程、表情回应、频道白名单/黑名单
  • Slack

     — Bot Token、提及控制、Bot 消息处理
  • WhatsApp

     — 启用/禁用、提及控制、提及模式
  • Matrix

     — Access Token、Homeserver、自动线程、私信提及线程
  • 飞书

     — App ID / Secret、提及控制

    给 hermes 装个正经界面:hermes-web-ui 安装教程  第4张

  • 微信

     — 扫码登录(浏览器扫码,自动保存凭证)
  • 企业微信

     — Bot ID / Secret

凭证写入 ~/.hermes/.env,渠道行为写入 ~/.hermes/config.yaml。配置变更后网关自动重启。

用量分析

  • Token 总用量明细(输入 / 输出)
  • 会话数及日均统计
  • 预估费用追踪及缓存命中率
  • 模型使用分布图
  • 30 天每日趋势(柱状图 + 数据表格)

给 hermes 装个正经界面:hermes-web-ui 安装教程  第5张


对免费额度党和成本敏感的用户来说,这个面板把之前藏在日志里的数据直接可视化出来了。

定时任务

图形化创建、编辑、暂停、恢复、删除 Cron 任务,不用自己写 cron 表达式,点几个预设就够。还有「立即触发执行」按钮用来调试。

给 hermes 装个正经界面:hermes-web-ui 安装教程  第6张


模型管理

从凭证池自动发现模型,从每个 Provider 端点获取可用模型列表。支持添加、更新、删除 Provider(预设 & 自定义 OpenAI 兼容),Provider URL 自动检测非 v1 API 版本(如 /v4)。

给 hermes 装个正经界面:hermes-web-ui 安装教程  第7张


多配置文件与网关

如果你同时跑了好几个 Hermes 实例,这个功能就很实用:创建、重命名、删除、切换配置文件,克隆现有配置或从归档导入(.tar.gz),导出于备份或分享。多网关按 Profile 启动、停止、监控,自动端口冲突解决。

给 hermes 装个正经界面:hermes-web-ui 安装教程  第8张

文件浏览器

内置文件浏览支持多种后端:local、Docker、SSH、Singularity。可以上传、下载、重命名、复制、移动、删除文件和创建目录,查看文件内容带语法高亮。

给 hermes 装个正经界面:hermes-web-ui 安装教程  第9张

Web 终端

基于 node-pty 和 @xterm/xterm 的集成终端,多会话支持(创建、切换、关闭),通过 WebSocket 实时传输键盘输入和 PTY 输出,支持窗口大小调整。

群聊

多 Agent 聊天房间,通过 Socket.IO 实时通信。@提及路由触发上下文回复,历史消息超过 Token 阈值时自动摘要压缩(上下文压缩)。输入状态和回复进度指示器,房间创建、删除和邀请码管理,SQLite 消息持久化。

给 hermes 装个正经界面:hermes-web-ui 安装教程  第10张


技能与记忆

浏览和搜索已安装的技能,查看技能详情和附件,用户笔记和档案管理。

给 hermes 装个正经界面:hermes-web-ui 安装教程  第11张


日志

查看 Agent / Gateway / Error 日志,按日志级别、日志文件和关键词过滤。HTTP 访问日志高亮显示。

给 hermes 装个正经界面:hermes-web-ui 安装教程  第12张


安装方式

npm 安装(推荐)

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

打开 http://localhost:8648

一键安装脚本

自动检测系统并安装 Node.js(如未安装):

bash <(curl -fsSL https://cdn.jsdelivr.net/gh/EKKOLearnAI/hermes-web-ui@main/scripts/setup.sh)

支持 Debian/Ubuntu/macOS。WSL 会自动使用 hermes gateway run 后台启动,无需 launchd/systemd。

Docker Compose

# 使用预构建镜像(推荐)
WEBUI_IMAGE=ekkoye8888/hermes-web-ui:latest docker compose up -d hermes-agent hermes-webui

# 或从源码构建
docker compose up -d --build hermes-agent hermes-webui

docker compose logs -f hermes-webui

打开 http://localhost:6060

Hermes 持久化数据目录为 ./hermes_data,Web UI 认证 Token 存储在 ./hermes_data/hermes-web-ui/.token。首次启动时 Token 会打印到容器日志中。

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-web-ui -v
显示版本号
hermes-web-ui -h
显示帮助

自动配置

启动时 BFF 服务器会自动:

  • 校验 ~/.hermes/config.yaml 并补全缺失的 api_server 字段,备份原配置到 config.yaml.bak
  • 检测并启动网关(如未运行)
  • 解决端口冲突(清理残留进程)
  • 启动成功后自动打开浏览器

架构

浏览器 → BFF (Koa, :8648) → Hermes 网关 (:8642)
                ↓
           Hermes CLI (会话、日志、版本)
                ↓
           ~/.hermes/config.yaml  (渠道行为配置)
           ~/.hermes/auth.json    (凭证池)

前端采用多 Agent 可扩展架构,所有 Hermes 相关代码按命名空间组织在 hermes/ 目录下(API、组件、视图、Store),可以方便地并行接入新的 Agent。

技术栈:

  • 前端:Vue 3 + TypeScript + Vite + Naive UI + Pinia + Vue Router + vue-i18n + SCSS + markdown-it + highlight.js
  • 后端:BFF 服务器(Koa)+ node-pty(Web 终端)

开发者

git clone https://github.com/EKKOLearnAI/hermes-web-ui.git
cd hermes-web-ui
npm install
npm run dev
  • 前端:http://localhost:5173
  • BFF 服务器:http://localhost:8648(代理到 Hermes 网关 8642)

结语

对重度用户来说,hermes-web-ui 把之前散落在各处的管理能力收敛到了一个入口。用浏览器管理会话比在终端里翻日志舒服得多,截图分享也体面得多。

一个延伸思路:把这个项目地址扔给 AI,让它学会自己管理这个服务。「启动 web-ui」「web-ui 跑着呢吗」—— 自然语言就能控制,本质上是把工具的掌控权还给 AI。


相关文章:

文章已关闭评论!