免费解锁 Claude 同款三栏工作区:Hermes WebUI 自托管指南(2026)
引言
Claude 网页版把一种布局做到了极致,许多重度用户不愿放弃:左侧历史、中间对话、右侧 Artifacts / 文件。问题在于 每月 20 美元 的订阅费与会话速率限制——偶尔聊天够用,做 Agent、工具循环和日常研究就很痛苦。
Hermes WebUI(截至 2026 年 GitHub 星标已超 1 万)是 Hermes Agent(Nous Research 的自进化 Agent 运行时)的社区 Web 前端。你无需重写 Agent 代码,一条 Docker 命令(或 docker compose up)即可获得深色三栏界面,带实时工具调用卡片和Workspace 文件浏览器,体验比纯终端更接近 Claude 产品 UI。
本指南面向想要自托管 AI 聊天 UI、Claude 同款开源界面且不愿按席位付 SaaS 费用的读者,是一份实用的 Hermes WebUI 教程,涵盖架构、安装、安全与六个常见避坑点。
若你已在别处运行 Agent,可对照我们的 OpenClaw 多智能体路由指南——Hermes 还提供 hermes claw migrate 供 OpenClaw 用户迁移。
什么是 Hermes WebUI(以及它不是什么)
| 层级 | 项目 | 职责 |
|---|---|---|
| UI | nesquena/hermes-webui | React Web 应用,端口 8787,三栏 UX |
| Agent | NousResearch/hermes-agent | 工具执行、技能、网关(Telegram/Discord)、记忆 |
| 配置 | ~/.hermes/config.yaml |
模型、API 密钥、工具白名单 |
| Workspace | ~/workspace(默认) |
Agent 读写的文件——显示在右侧栏 |
Hermes WebUI 不是托管版 Claude API 克隆。你通过 hermes model 自带模型密钥(Anthropic、OpenRouter、Nous Portal、本地端点等),灵活度与 CLI 相同,文档见 hermes-agent.nousresearch.com/docs。
贴近「Claude 工作区」心智模型的界面功能
三栏布局
| 栏位 | 典型内容 |
|---|---|
| 左侧 | 会话列表、历史记录、快速切换 |
| 中间 | 流式聊天、Markdown、中断与重定向 |
| 右侧 | Workspace——实时文件树、预览、类 Artifact 输出 |
深色模式与工具透明化
不同于扁平聊天气泡,Hermes WebUI 会实时展开工具调用——Shell 命令、文件编辑、搜索——以卡片形式呈现,无需翻日志。这正是 Claude 重度用户留在网页端、而非仅用 API 脚本的原因。
Workspace 文件浏览器
右侧栏对应挂载的 /workspace 目录(主机路径可配置)。Agent 写入图表、代码或报告时,浏览器中即时可见——比 ChatGPT 单线程视图更接近 Claude Artifacts + 项目文件。
官方演示与截图:GitHub 上的 Hermes WebUI 与 社区演示站。
Claude / ChatGPT 网页版 vs Hermes WebUI(决策矩阵)
| 维度 | Claude 网页($20/月) | ChatGPT Plus | Hermes WebUI(自托管) |
|---|---|---|---|
| 布局 | 三栏 + Artifacts | 以单线程为主 | 三栏 + Workspace 浏览器 |
| 速率限制 | 会话上限 | 模型上限 | 仅受你的硬件与 API 配额限制 |
| 数据驻留 | Anthropic 云端 | OpenAI 云端 | 你的本机 / VPS |
| Agent 工具 | 绑定产品能力 | 插件 / GPTs | 40+ Hermes 工具、定时任务、子 Agent |
| 上手成本 | 零 | 零 | Docker + API 密钥(约 15 分钟) |
| 移动端 | 官方 App | 官方 App | 浏览器访问你的服务器(SSH 隧道) |
推荐路径:
- 若只需偶尔聊天、追求零运维 → 继续用 Claude/ChatGPT。
- 若触达限制、需要大量文件型 Agent 工作,或希望Telegram + 网页共用同一 Agent → 选 Hermes Agent + WebUI。
- 若从 OpenClaw 迁移 → 运行
hermes claw migrate后挂载 WebUI(见 Hermes 文档)。
前置条件
| 要求 | 说明 |
|---|---|
| Docker | Docker Desktop(Mac/Windows)或 Linux 引擎 |
| 磁盘 | 镜像约 2–5 GB;本地模型缓存需更多空间 |
| API 密钥 | Anthropic、OpenRouter,或 Nous Portal 一键配置 |
| 可选:Hermes CLI | 若不用一体化镜像:curl -fsSL .../install.sh | bash |
在 Apple Silicon Mac 上,绑定挂载应使用真实 UID(id -u——常为 501,而非 1000)。下文 Docker 示例显式设置 WANTED_UID / WANTED_GID。
分步指南:Docker 安装(快速路径)
步骤 1 — 安装 Hermes Agent 配置(仅首次)
curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash
source ~/.bashrc # 或 ~/.zshrc
hermes setup # 向导:模型提供商 + API 密钥
若仅使用一体化 WebUI 镜像且已有 ~/.hermes,可跳过。
步骤 2 — 拉取 WebUI 镜像
docker pull ghcr.io/nesquena/hermes-webui:latest
国内从 ghcr.io 拉取镜像可能较慢,可配置镜像加速或使用代理后再执行 docker pull。
步骤 3 — 运行单容器(官方一行命令)
docker run -d \
-e WANTED_UID=$(id -u) -e WANTED_GID=$(id -g) \
-v ~/.hermes:/home/hermeswebui/.hermes \
-e HERMES_WEBUI_STATE_DIR=/home/hermeswebui/.hermes/webui \
-v ~/workspace:/workspace \
-p 127.0.0.1:8787:8787 \
ghcr.io/nesquena/hermes-webui:latest
打开 http://localhost:8787。
步骤 4 — 在 UI 或 CLI 中设置模型
hermes model # 例如 anthropic:claude-sonnet-4-6 或 openrouter 路由
WebUI 从挂载卷读取 ~/.hermes/config.yaml。
步骤 5 — 安全远程访问(可选)
默认仅绑定本机(127.0.0.1:8787)。若在 VPS 上部署:
# 在服务器:在 compose/.env 中设置 HERMES_WEBUI_PASSWORD,仅在反向代理后绑定 0.0.0.0
ssh -N -L 8787:127.0.0.1:8787 user@your-server
随后在本地浏览器访问 http://localhost:8787。若通过公网或跨境链路访问,注意出口带宽与延迟对流式聊天的影响。无头 Mac/Linux 的 SSH 基础可参考 Mac mini M4 SSH 远程连接教程。
步骤 6 — Docker Compose(生产环境)
git clone https://github.com/nesquena/hermes-webui
cd hermes-webui
cp .env.docker.example .env
# macOS 上按需修正 UID/GID
docker compose up -d
仓库内 docs/docker.md 说明双容器(Agent + UI)部署与升级注意事项。
步骤 7 — Agent + UI 冒烟测试
在中间栏提问:「列出 workspace 中的文件并创建 hello.md。」 确认右侧栏更新,且出现 Shell/文件工具的工具卡片。
架构:WebUI 如何与 Agent 通信
Browser (:8787)
│
▼
Hermes WebUI (Node/React)
│ WebSocket / HTTP API
▼
Hermes Agent process (tools, LLM, memory)
│
├── ~/.hermes/ (config, sessions, skills)
└── ~/workspace/ (project files → right column)
可对同一 ~/.hermes 状态运行 CLI(hermes)、网关(hermes gateway) 与 WebUI——按设备选择界面。详见 架构文档。
故障排除
docker run 后界面空白或「无法连接」
现象:浏览器访问 :8787 一直加载。
处理:查看容器日志(docker logs <id>),确认端口映射,确保 8787 未被占用。Linux 可试 curl -s http://127.0.0.1:8787。
~/.hermes 挂载权限被拒绝
现象:Agent 已启动但配置缺失;模型列表为空。
处理:传入与主机 id -u / id -g 一致的 WANTED_UID / WANTED_GID。macOS 用户:在 compose 的 .env 中修改——默认假定 UID 1000。
WebUI 显示 Workspace 但 Agent 无响应
现象:聊天挂起,无流式输出。
处理:检查 ~/.hermes/config.yaml 中的 API 密钥,在主机运行 hermes doctor,核对提供商配额。先在终端用 hermes 测试 CLI。
未设密码就暴露端口
现象:为局域网访问将绑定改为 0.0.0.0:8787。
处理:设置 HERMES_WEBUI_PASSWORD,并在前方部署带 TLS 的 nginx/Caddy。切勿将裸 :8787 暴露到公网。
国内拉取 ghcr.io 镜像很慢
现象:docker pull ghcr.io/nesquena/hermes-webui:latest 长时间无进度或频繁超时。
处理:在 Docker 守护进程或注册表镜像中配置镜像加速;必要时使用代理或先在网络较好的环境拉取再导出镜像。也可考虑 OpenRouter 等国内更易访问的 API 作为模型备选。
常见问题
hermes claw migrate,以及 Telegram/Discord 网关。若你需要 Nous Agent 闭环而非单纯聊天外壳,选 Hermes。docs/docker.md。Hermes WebUI 是 Agent 重度用户最接近 免费、自托管 的 Claude 同款三栏工作区:历史、聊天与文件同屏——加上透明工具卡片,Docker 可在 8787 端口 几分钟内启动。
从官方 docker run 开始,挂载 ~/.hermes 与 ~/workspace,用 hermes setup 配置模型,再用真实写文件任务压测。官方仓库:nesquena/hermes-webui · NousResearch/hermes-agent。
继续查阅 Hermes 官方资源
Docker 运行手册、模型配置与架构说明见上游仓库。部署或升级 Hermes WebUI 时请与本指南对照使用。