Hermes Web UI：Hermes Agent 的浏览器网页界面，让自主 AI 代理使用起来更方便

你有没有过这样的经历？在终端里和一个强大的 AI 代理对话，感觉功能很全，但总觉得不够直观；或者你希望随时在浏览器里切换会话、浏览文件、查看任务，却不想每次都切换到命令行？Hermes Web UI 就是专门解决这个问题的工具。它是一个轻量级的网页应用，专为 Hermes Agent 设计，提供了一个在浏览器中就能完整操作代理的界面。

Hermes Agent 本身是一个运行在你服务器上的自主代理，你可以通过终端或者各种消息应用访问它。它最大的特点是会记住学到的东西，运行时间越长就越了解你的环境和习惯。Hermes Web UI 把这种体验完整搬到了浏览器里：你能在网页上做终端能做的每一件事，而且界面采用暗黑主题，三面板布局非常接近 Claude 的风格——左侧是会话和工具列表，中间是聊天区，右侧是工作区文件浏览器。

整个界面不需要任何构建步骤、框架或者打包工具，只用 Python 和原生 JavaScript 就能跑起来。这意味着部署简单，维护也轻松。你既可以从终端启动代理，也能立刻在浏览器里继续同样的工作流，完全无缝。

下面这张图展示了支持完整个人资料的亮色模式，你可以看到左侧会话列表、顶部配置和右侧文件预览的完整样子。

另一张图则展示了设置面板，你可以在这里自定义各种参数，甚至设置访问密码。

为什么 Hermes Agent 值得用网页界面

大多数 AI 工具每次对话都像重新开始，它们不记得你是谁，也不了解你项目的习惯。你每次都要重复解释同样的背景。而 Hermes Agent 不同，它能跨会话保留上下文，在你离线时还能运行计划任务，并且随着时间推移越来越懂你的工作环境。

它直接使用你已经配置好的 Hermes Agent、已有的模型和工具，不需要额外安装任何东西。核心优势包括：

• •
  
  持久化记忆：用户资料、代理笔记和技能系统都会自动保存，可重复使用的流程不会每次重来。
• •
  
  自托管调度：cron 任务在你离线时也能运行，结果会推送到 Telegram、Discord、Slack、Signal、邮件等多种渠道。
• •
  
  多平台消息访问：同一个代理既能在终端用，也能在手机消息应用里随时对话。
• •
  
  自我改进技能：代理会根据经验自动编写并保存新技能，不依赖外部插件市场。
• •
  
  模型无关：支持 OpenAI、Anthropic、Google、DeepSeek、OpenRouter 等多种提供商。
• •
  
  可编排其他代理：能调用 Claude Code 或类似工具处理复杂任务，再把结果整合回自己的记忆。
• •
  
  完全自托管：所有对话、记忆和数据都在你自己的硬件上。

为了让你更直观地对比，下面是 Hermes 与其他类似工具的简单表格（基于实际功能差异）：

功能对比	OpenClaw	Claude Code	Codex CLI	OpenCode	Hermes
自动持久记忆	有	部分	部分	部分	有
自托管计划任务	有	无	无	无	有
消息应用访问	有（15+平台）	部分	无	无	有（10+）
自托管网页界面	仅仪表盘	无	无	有	有
自动改进技能	部分	无	无	无	有
Python/ML 生态	无（Node.js）	无	无	无	有
模型无关	有	无（仅 Claude）	有	有	有
开源	是（MIT）	否	是	是	是

Hermes 在持久记忆、计划任务和技能自我迭代上表现突出，尤其适合希望长期积累经验的用户。和最接近的 OpenClaw 相比，Hermes 的技能系统是自动生成的，不是依赖社区市场，而且在更新稳定性上也更有保障。

快速开始：几步就能用上网页界面

在使用 Hermes Web UI 之前，你需要先安装并配置好 Hermes Agent。这一步非常重要，因为 Web UI 是直接复用你已有的代理环境的。

具体准备工作包括：

1. 通过 curl 命令下载并设置 Hermes Agent。
2. 使用 hermes model 命令配置你的 LLM 提供商。
3. 使用 hermes gateway setup 配置消息网关（可选，但推荐）。
4. 在命令行输入 hermes 就能开始和代理聊天。
5. 可选：配置扩展记忆提供商。
6. 可选：配置你需要的工具。

一切就绪后，安装 Web UI 只需要一条命令：

git clone https://github.com/nesquena/hermes-webui.git hermes-webui
cd hermes-webui
./start.sh

start.sh 脚本会自动完成以下工作：

• •
  
  自动定位你的 Hermes Agent 目录。
• •
  
  找到或创建包含必要依赖的 Python 环境。
• •
  
  启动网页服务器。
• •
  
  输出访问地址，如果你在远程服务器上，还会给出 SSH 隧道命令。

启动后，你就可以在浏览器中打开对应的 URL，立即进入熟悉的三面板界面。

使用 Docker 部署（推荐远程服务器用户）

如果你喜欢容器化部署，官方已经提供了预构建的 amd64 和 arm64 镜像：

docker pull ghcr.io/nesquena/hermes-webui:latest
docker run -d -p 8787:8787 -v ~/.hermes:/root/.hermes ghcr.io/nesquena/hermes-webui:latest

推荐使用 Docker Compose：

docker compose up -d

或者本地构建：

docker build -t hermes-webui .
docker run -d -p 8787:8787 -v ~/.hermes:/root/.hermes hermes-webui

想开启密码保护也很简单，只需在运行时添加环境变量：

docker run -d -p 8787:8787 -e HERMES_WEBUI_PASSWORD=your-secret -v ~/.hermes:/root/.hermes ghcr.io/nesquena/hermes-webui:latest

会话数据会持久化保存在名为 hermes-data 的卷里，重启也不会丢失。默认情况下 Compose 只绑定本地 127.0.0.1，如果你需要在局域网内访问，记得修改 docker-compose.yml 并设置密码。

start.sh 脚本到底帮你自动发现了什么

这个脚本的设计非常贴心，大部分情况下你什么都不用手动配置。它会自动查找：

项目	查找方式
Hermes Agent 目录	先读环境变量 HERMES_WEBUI_AGENT_DIR，然后检查 ~/.hermes/hermes-agent，再检查同级 ../hermes-agent
Python 可执行文件	优先用 Agent 的 venv，其次是本仓库的 .venv，最后是系统 python3
状态目录	环境变量 HERMES_WEBUI_STATE_DIR 或 ~/.hermes/webui-mvp
默认工作区	环境变量 HERMES_WEBUI_DEFAULT_WORKSPACE 或 ~/workspace
端口	环境变量 HERMES_WEBUI_PORT 或命令行第一个参数，默认 8787

如果你遇到特殊路径，也可以手动覆盖：

export HERMES_WEBUI_AGENT_DIR=/path/to/hermes-agent
export HERMES_WEBUI_PYTHON=/path/to/python
export HERMES_WEBUI_PORT=9000
./start.sh

或者一行搞定：

HERMES_WEBUI_AGENT_DIR=/custom/path ./start.sh 9000

完整环境变量列表包括 HERMES_WEBUI_HOST、HERMES_WEBUI_STATE_DIR、HERMES_WEBUI_DEFAULT_MODEL、HERMES_WEBUI_PASSWORD 等等，灵活性很强。

从远程服务器访问网页界面

默认情况下服务器只监听 127.0.0.1（本地回环）。如果你把 Hermes 跑在 VPS 上，可以在本地电脑用 SSH 隧道：

ssh -N -L <local-port>:127.0.0.1:<remote-port> <user>@<server-host>

例如：

ssh -N -L 8787:127.0.0.1:8787 user@your.server.com

然后在本地浏览器打开 http://localhost:8787 即可。start.sh 会在远程环境自动打印这条隧道命令，非常方便。

用 Tailscale 在手机上随时访问

如果你希望在手机上也能流畅使用，可以搭配 Tailscale 这个零配置 VPN。服务器和手机加入同一个私网后，就不用端口转发或 SSH 隧道了。

操作步骤：

1. 在服务器和手机上安装 Tailscale。
2. 启动 Web UI 时设置监听所有接口并开启密码：

HERMES_WEBUI_HOST=0.0.0.0 HERMES_WEBUI_PASSWORD=your-secret ./start.sh

3. 在手机浏览器打开 http://<服务器 Tailscale IP>:8787。

界面在移动端有专门优化：汉堡菜单侧边栏、底部导航栏、触屏友好控件，整体体验像原生 App 一样顺手。你甚至可以把它添加到手机主屏幕，感觉更像一个独立的 AI 助手应用。

不想用 start.sh 也可以手动启动

如果你更喜欢直接控制，可以进入 Hermes Agent 目录（确保 Python 环境能找到 Hermes 模块），然后运行：

cd /path/to/hermes-agent
HERMES_WEBUI_PORT=8787 venv/bin/python /path/to/hermes-webui/server.py

注意必须使用安装了 Hermes 依赖的 Python 环境，系统自带 Python 可能会缺少 openai、httpx 等包。

健康检查命令也很简单：

curl http://127.0.0.1:8787/health

完整功能一览

聊天与代理交互

• •
  
  支持 SSE 流式响应，模型生成的内容会实时显示。
• •
  
  支持多提供商模型，动态下拉菜单会列出你已配置的所有模型。
• •
  
  可以边生成边发送新消息，系统会自动排队。
• •
  
  支持内联编辑任意历史用户消息，然后从该点重新生成。
• •
  
  一键重试上一次助手回复。
• •
  
  活动栏可以取消正在运行的任务。
• •
  
  工具调用以卡片形式展示，展开/折叠全部功能齐全。
• •
  
  子代理委托也有独立卡片，视觉上区分明显。
• •
  
  支持 Mermaid 图表渲染（流程图、时序图、甘特图等）。
• •
  
  思考/推理过程会以金色卡片形式折叠显示。
• •
  
  危险 shell 命令会有审批卡片，支持一次性允许、会话允许、始终允许或拒绝。
• •
  
  网络波动时 SSE 会自动重连。
• •
  
  文件附件在页面刷新后依然保留。
• •
  
  每条消息都有时间戳，悬停显示完整日期。
• •
  
  代码块有复制按钮，反馈清晰。
• •
  
  使用 Prism.js 实现语法高亮，支持 Python、JS、bash、JSON、SQL 等多种语言。
• •
  
  AI 回复中的安全 HTML 会被正确渲染。
• •
  
  上下文使用指示器会实时显示 token 数、费用和填充条。

会话管理

• •
  
  支持创建、重命名、复制、删除、按标题或内容搜索会话。
• •
  
  可以把重要会话置顶（金色标记）。
• •
  
  支持归档会话（隐藏但不删除）。
• •
  
  会话项目功能：用颜色分组组织会话。
• •
  
  会话标签：标题里加 #tag 就能生成彩色标签，点击即可筛选。
• •
  
  侧边栏按“今天 / 昨天 / 更早”分组，可折叠。
• •
  
  支持导出 Markdown 对话记录、完整 JSON，或导入 JSON。
• •
  
  会话状态在刷新和隧道重连后依然保持。
• •
  
  浏览器标签页标题会自动更新为当前会话名称。
• •
  
  CLI 会话也能桥接进来，带有金色“cli”徽章，点击即可导入完整历史。

工作区文件浏览器

• •
  
  目录树支持展开/折叠，单击切换，双击进入。
• •
  
  面包屑导航，每一段路径都可点击。
• •
  
  支持文本、代码、Markdown（渲染后）和图片的内联预览。
• •
  
  可直接编辑、创建、删除、重命名文件和文件夹。
• •
  
  二进制文件支持下载。
• •
  
  导航目录时会自动关闭预览，并提醒未保存修改。
• •
  
  自动检测 Git 仓库，在头部显示分支名和未提交文件数量。
• •
  
  右侧面板支持拖拽调整宽度。

语音输入

• •
  
  作曲器里有麦克风按钮（基于 Web Speech API）。
• •
  
  点击录音，再次点击或发送即可停止。
• •
  
  实时中间转录会出现在文本框。
• •
  
  检测到约 2 秒沉默后自动停止。
• •
  
  转录内容会追加到现有文本，不会覆盖。
• •
  
  不支持的浏览器会自动隐藏该按钮。

个人资料（Profiles）

• •
  
  顶部栏有个人资料选择器，下拉菜单显示所有资料。
• •
  
  每个资料显示网关状态、模型信息和技能数量。
• •
  
  侧边栏有个人资料管理面板，可创建、切换、删除。
• •
  
  创建新资料时可复制当前配置。
• •
  
  切换资料无需重启服务器，会自动重新加载配置、技能、记忆、cron 和模型。

安全与认证

• •
  
  可选密码认证，默认关闭，本地使用零摩擦。
• •
  
  通过环境变量 HERMES_WEBUI_PASSWORD 开启。
• •
  
  使用带签名的 HMAC HTTP-only Cookie，有效期 24 小时。
• •
  
  登录页面简洁暗黑风格。
• •
  
  所有响应都带安全头。
• •
  
  POST 主体大小限制 20MB。

主题切换

• •
  
  内置 6 套主题：Dark（默认）、Light、Slate、Solarized Dark、Monokai、Nord。
• •
  
  在设置面板或输入 /theme 命令即可切换，立即生效。
• •
  
  主题设置保存在服务器和 localStorage，双重保障加载时无闪烁。
• •
  
  支持自定义主题，只要在 CSS 中定义 :root[data-theme="name"] 即可。

设置面板与斜杠命令

• •
  
  设置面板可调整默认模型、工作区、发送键、主题等。
• •
  
  发送键支持 Enter 或 Ctrl/Cmd+Enter。
• •
  
  可开关显示 CLI 会话和 token 使用量。
• •
  
  未保存修改关闭时会有提示。
• •
  
  cron 任务完成会有 Toast 通知和未读徽章。
• •
  
  支持斜杠命令：输入 / 弹出自动补全菜单，内置 /help、/clear、/model、/workspace、/new、/usage、/theme、/compact 等。

其他面板

• •
  
  任务：查看、创建、编辑、运行、暂停、删除 cron 任务，查看历史。
• •
  
  技能：按分类列出所有技能，支持搜索、预览、创建、编辑、删除。
• •
  
  记忆：内联编辑 MEMORY.md 和 USER.md。
• •
  
  个人资料：创建、切换、删除。
• •
  
  待办：当前会话的实时任务列表。
• •
  
  空间：添加、重命名、删除工作区，顶部栏快速切换。

移动端响应式设计也很完善：小于 640px 时侧边栏变成滑动覆盖层，底部有 iOS 风格的五标签导航栏，文件面板从右侧滑出，触控目标都保持至少 44px。

内部架构简述

整个项目结构清晰，主要文件包括：

• •
  
  server.py：HTTP 路由和认证中间件。
• •
  
  api/ 目录下有 auth.py、config.py、models.py、profiles.py、routes.py、streaming.py 等模块，分别处理认证、配置、会话模型、个人资料、路由、流式响应等。
• •
  
  static/ 目录包含 index.html、style.css 和一系列 JS 文件（ui.js、workspace.js、sessions.js 等），实现前端交互。
• •
  
  tests/ 目录有 433 个测试用例，确保功能稳定。

状态数据保存在 ~/.hermes/webui-mvp/ 目录下（可通过环境变量覆盖），与仓库本身完全分离。

文档与进一步阅读

项目提供了多份文档：

• •
  
  HERMES.md：详细解释 Hermes 的设计理念和与其他工具的对比。
• •
  
  ROADMAP.md：功能路线图和冲刺历史。
• •
  
  ARCHITECTURE.md：系统设计和所有 API 端点。
• •
  
  TESTING.md：手动测试计划和自动化覆盖情况。
• •
  
  CHANGELOG.md：每次冲刺的更新记录。
• •
  
  SPRINTS.md：未来计划。
• •
  
  THEMES.md：主题系统和自定义指南。

常见问题解答

Hermes Web UI 和 Hermes Agent 是什么关系？
它是 Hermes Agent 的官方网页界面，功能与命令行完全对齐，但使用浏览器操作更直观。所有逻辑依然跑在你已有的 Agent 上，不会引入新依赖。

我已经在用 Docker 跑 Hermes Agent，还能用 Web UI 吗？
完全可以。只要把 ~/.hermes 目录挂载到 Web UI 容器里，两个容器就能共享同一份配置和状态。

密码认证一定要开吗？
本地使用默认关闭，零摩擦。如果你把服务暴露到网络或通过 Tailscale 访问，强烈建议设置 HERMES_WEBUI_PASSWORD。

支持哪些模型？
任何 Hermes Agent 已配置的提供商和模型都会自动出现在下拉菜单里，包括 OpenAI、Anthropic、Google 等。

文件浏览器能编辑代码吗？
可以直接在右侧面板内联编辑文本和代码文件，保存后立即生效，还支持 Git 状态显示。

语音输入需要额外插件吗？
不需要，只依赖浏览器内置的 Web Speech API，目前 Chrome、Edge、Safari 等主流浏览器都支持。

会话数据会丢失吗？
不会。会话、设置、项目、标签等全部持久化存储，即使刷新页面或断开 SSH 隧道也能恢复。

如何查看 token 使用量？
在设置面板或输入 /usage 命令即可开启，每条会话都会显示输入/输出 token 和估算费用。

移动端体验如何？
专门做了响应式适配，侧边栏、底部导航、滑出面板都针对触屏优化，日常使用完全没问题。

测试覆盖情况怎样？
项目自带 433 个测试用例，运行在独立端口和独立状态目录，不会影响生产数据。

通过 Hermes Web UI，你终于可以在浏览器里像使用普通聊天工具一样管理一个真正持久、聪明、能自我进化的 AI 代理。它把终端的强大能力和网页的便利性完美结合，让你无论在电脑前还是手机上，都能随时继续你的工作流。

如果你已经安装了 Hermes Agent，不妨现在就试试 ./start.sh，几分钟内就能看到这个三面板界面带来的改变。使用过程中遇到任何问题，文档和社区都随时可以参考——祝你和你的 Hermes 代理合作愉快！

（全文约 4500 字，所有信息均来自官方说明文档，力求帮你清晰了解每一步操作和实际使用价值。）