前言

自从把 Hermes Agent 接入微信以后，日常使用中一个感受越来越明显：它就像一个长期在线的助手，查天气、写文案、总结资料、执行任务，发条消息过去就能得到结果，确实省了不少时间。

但用得越久，一个问题也变得越来越突出——我们只能看到结果，却看不到过程。

有时候回复特别快，有时候又要等上几十秒；有时候一句话就能解决问题，有时候却像卡住了一样半天没有反应。最让人心里没底的是，完全不知道它到底在后台做了什么。是模型响应慢了？工具调用超时了？网络出了问题？还是任务本身比较复杂？对于一个长期运行的 AI Agent 来说，这种“黑盒”状态其实挺让人没有安全感的。

后来有一次排查问题时，发现自己几乎只能盯着终端日志看。虽然能找到原因，但整个过程既不直观，也不方便。那时候我就在想：如果 Hermes Agent 能像 NAS、路由器或者服务器一样，拥有一个专门的管理后台会不会更舒服？

后来发现还真有这样的东西——Hermes Web UI。它并不会替代 Hermes Agent，而是给这个一直躲在后台工作的 AI 助手装上一个可视化控制台。对话记录、模型配置、频道管理、任务状态、日志信息都能直接在浏览器里查看。原本只能通过终端观察的东西，现在终于能够被“看见”了。

再结合 cpolar 提供的公网访问能力后，即使 Hermes Agent 跑在家里的电脑、NAS 或服务器上，也能够随时通过浏览器远程查看状态。对于长期运行 AI Agent 的用户来说，这种体验提升是非常明显的。

1 hermes-web-ui 是什么？

hermes-web-ui 是一个面向 Hermes Agent 的可视化 Web 控制台。它的定位不是替代 Hermes Agent 本身，而是给 Hermes Agent 加装一个浏览器能打开的交互和管理入口，让那些原本主要依赖终端、配置文件和后台日志完成的操作，变得直观起来。

简单来说，Hermes Agent 负责在后台运行和处理任务，而 hermes-web-ui 负责把这些能力通过 Web 页面展示出来。通过它，我们可以在浏览器中访问 Hermes Agent，进行对话测试、配置查看、运行观察和日常调试。

刚部署 Hermes Agent 的时候，终端方式其实已经够用。启动服务、查看输出、修改配置，都可以通过命令行完成。但当 Hermes Agent 真正接入到微信、飞书、企微这些平台，并且开始长期运行之后，终端方式的局限就会变得非常明显。

平时在聊天软件里看到的，其实只有两个结果：消息发出去了，回复回来了。

中间到底发生了什么，并不直观。比如一次回复很慢，我们很难马上判断：

• 它是卡在模型响应，还是卡在工具调用？
• 是 API 接口不稳定，还是网络连接出了问题？
• 是 Hermes Agent 还在处理任务，还是服务本身已经异常？

比如像下面这样，询问一个天气，可以简单地看到，询问以后，回答过来了，但是我们并不知道它在后面干了什么：

这时候，hermes-web-ui 的作用就体现出来了。

它相当于给后台运行的 Hermes Agent 安装了一个可视化观察窗口。我们可以直接在浏览器里打开控制台，查看当前服务状态，也可以通过 Web 页面进行对话测试，观察一次请求从输入到回复的完整过程：

相比只在微信、飞书里等待回复，Web 控制台最大的好处是：它能让 Hermes Agent 的运行过程变得可见。

当我们在 WebUI 中发起提问时，不只是能看到最终回答，还可以更直观地观察响应过程。

对于后期调试模型接口、排查调用异常、验证配置是否生效来说，这种可视化入口会方便很多：

另外，hermes-web-ui 的交互也设计得比较轻量，不是那种复杂的后台管理系统。

比如在等待回复的时候，页面上还会出现一个正在思考的小人动效，看起来比纯终端输出更有“AI 助手在线工作”的感觉：

更有意思的是，hermes-web-ui 还支持 TTS 语音配置。

也就是说，在网页对话时，我们不仅可以看到 Hermes Agent 的文字回复，还可以让它把回复内容自动播放出来，变成一个真正“会开口说话”的 AI 助手：

从设置页面可以看到，WebUI 支持多种语音方案，比如浏览器内置 WebSpeech API、OpenAI TTS、自定义 OpenAI 兼容端点、Edge TTS、MiMo TTS 等。

这样一来，用户就可以根据自己的喜好选择不同的语音服务。后续无论是做语音播报、消息朗读，还是单纯想让 AI 助手的回复更有陪伴感，这个功能都会很实用。

除了对话和语音体验之外，hermes-web-ui 还提供了一些常用的管理功能。

比如在模型页面中，可以看到当前已经添加的多个模型提供商：

这样后续切换模型、检查接口地址、调整默认模型时，就不用完全依赖配置文件了，直接在 WebUI 里查看会更直观。

除了模型配置，另一个比较核心的就是频道页面。

频道主要用来配置 Hermes Agent 接入不同的消息平台。比如 QQ、飞书、钉钉、微信、企业微信等，都可以在这里找到对应的配置入口：

有了 WebUI 之后，后续查看频道配置、调整接入参数、确认某个平台是否已经配置完成，就会比单纯翻配置文件更直观。

另外，WebUI 中还可以看到技能、插件、记忆、日志等功能入口。

这些功能我们这里就不一一展开了。

简单来说，hermes-web-ui 并不是只提供一个网页聊天框，而是把对话、模型、语音、频道、插件、日志这些常用能力集中到了一个控制台里。这样一来，Hermes Agent 就不再只是一个默默跑在后台的服务，而是变成了一个可以被看见、可以被配置、也可以被随时调试的 AI 助手。

2 开始安装hermes-web-ui

前面我们已经了解了 hermes-web-ui 的作用，接下来就开始正式安装。

本文提供两种安装方式：

1. 推荐方式：让 Hermes Agent 自己安装
2. 手动方式：使用 npm 安装

如果你的 Hermes Agent 已经可以正常运行，建议优先使用第一种方式。

2.1 推荐方式：让 Hermes Agent 自己安装

既然我们已经有了 Hermes Agent，那最省事的方式，就是直接让它自己完成安装。

我们可以直接把下面这段提示词发送给 Hermes Agent：

请帮我在当前设备上安装 hermes-web-ui。先检查 Node.js 和 npm 是否可用，如果环境正常，就使用 npm 全局安装 hermes-web-ui。安装完成后启动 hermes-web-ui，并告诉我本地和局域网访问地址还有登录的密码是什么，并且告诉我如何修改密码。如果端口被占用，请先提示我，不要删除任何文件。

这里可以在 Hermes Agent 的终端对话模式中发送这段提示词。如果已经把 Hermes Agent 接入了飞书、微信、企微等消息平台，也可以直接在对应平台里发送：

发送后，Hermes Agent 会根据提示先检查 Node.js 和 npm 环境，然后执行安装、启动 WebUI，并返回对应的访问地址和登录 Token：

从输出结果可以看到，hermes-web-ui 已经成功启动，并给出了本地访问地址、局域网访问地址以及登录 Token：

本地：https://localhost:8648
局域网：https://192.168.50.161:8648
登录 Token (即密码)：d7f898d566ecbc437e4b9fe89bcaf1bf515b656834a3996304111716bcc7ba3d

接着，我们这里用局域网地址访问测试一下：

页面能够正常打开后，再输入刚才输出的登录 Token：

成功进入 WebUI 后，就说明 hermes-web-ui 已经安装并启动完成了。

这种方式比较适合已经跑通 Hermes Agent 的用户，不需要自己一步步敲命令，只需要把目标告诉它，它就能自动完成环境检查、安装和启动。

这就有点像是：让 AI 助手自己给自己装上 Web 控制台。

2.2 手动方式：使用 npm 安装

如果不想让 Hermes Agent 自动安装，也可以直接手动安装。

手动方式的思路很简单：先确认 Node.js 和 npm 环境正常，然后安装 hermes-web-ui，最后启动服务。

首先检查 Node.js 和 npm 是否可用：

node -v
npm -v

如果能正常输出版本号，就说明基础环境没有问题。

需要注意的是，hermes-web-ui 对 Node.js 版本有要求，建议使用 Node.js 23 或更高版本。如果版本太低，建议先升级 Node.js，再继续安装。

接着执行下面的命令，使用 npm 全局安装 hermes-web-ui：

npm install -g hermes-web-ui

等待安装完成后，继续启动 WebUI：

hermes-web-ui start

启动成功后，终端里会输出访问地址和登录 Token。如果需要修改密码（即token），可以在终端输入如下命令：

echo "你的新密码" > ~/.hermes-web-ui/.token
hermes-web-ui restart

默认情况下，可以在当前设备浏览器中访问：

https://localhost:8648

如果是在同一个局域网内的其他设备访问，也可以使用终端里输出的局域网地址。

打开页面后，输入终端中显示的 Token，就可以进入 hermes-web-ui 控制台。到这里，手动安装也完成了。

不管是让 Hermes Agent 自己安装，还是手动使用 npm 安装，最终目的都是一样的：把 hermes-web-ui 启动起来，并通过浏览器进入 Web 控制台。

3 简单上手体验

到这里，hermes-web-ui 已经可以正常访问了。前面我们已经大概看过它的模型配置、频道接入、TTS 语音、插件和日志等功能，这些后面可以根据实际需求慢慢调整。这里就不再继续赘述了，而是从一个最直观的功能开始：创建一个定时任务。

比如，我们可以先创建一个最简单的定时任务：

让 Hermes Agent 每天早上 8 点，自动给我推送当天的天气情况。

在左侧边栏进入任务面板，点击创建任务，然后按照下面的方式填写即可：

任务创建完成后，可以先点击任务卡片上的“立即运行”按钮，手动测试一次执行效果。

稍等片刻后，微信端就会收到一条天气提醒。同时，在任务面板中也可以看到本次任务的运行历史，方便确认任务是否执行成功：

这样，一个最基础的定时提醒任务就配置完成了。后续如果想让它每天定时推送新闻、待办事项、服务器状态，或者其他自定义内容，也可以按照类似的方式创建任务。

4 使用 cpolar 实现公网访问

前面我们已经把 hermes-web-ui 跑起来了，在浏览器里也能正常打开 Hermes Agent 的 Web 控制台。这样一来，平时查看对话、检查任务、调整配置都会方便很多，不用再只靠聊天软件里的回复结果来判断它有没有正常工作。

不过这里还有一个很现实的问题：这个 Web 控制台目前只能在本地网络里访问。简单来说，在家里、办公室，或者和 Hermes Agent 处在同一个网络下时才可以正常打开；但如果出门在外，手机切到流量，或者人在公司，就没办法直接访问这个页面了。

所以接下来，我们就用 cpolar 内网穿透给 hermes-web-ui 生成一个公网访问地址。这样即使 Hermes Agent 还跑在家里的电脑、NAS 或者内网设备上，我们也可以在外面通过浏览器打开它的 Web 控制台，随时查看和管理这个 AI 助手。

4.1 什么是cpolar?

• cpolar 是一款内网穿透工具，可以将你在局域网内运行的服务（如本地 Web 服务器、SSH、远程桌面等）通过一条安全加密的中间隧道映射至公网，让外部设备无需配置路由器即可访问。
• 广泛支持 Windows、macOS、Linux、树莓派、群晖 NAS 等平台，并提供一键安装脚本方便部署。

4.2 安装cpolar

以mac为例，macos安装cpolar可通过Homebrew包管理器进行安装，无需手动下载安装包。

首先在你的 Mac键盘上，按下 【Command + 空格键】,键盘上没有该键则按【Win + 空格键】，在弹出的搜索框里输入 【终端】 或 【Terminal】，点击回车打开它。

接着，在终端输入如下命令，确认是否安装Homebrew：

brew -v

如图提示版本信息，则可以【跳过Homebrew的安装】，如没有安装Homebrew可以使用如下命令进行安装即可：

# 官方安装脚本（需要良好的网络环境）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安装完成后，执行如下命令即可安装cpolar：

brew tap probezy/core && brew install cpolar

如下图：

接着，执行如下命令，进行安装服务：

sudo cpolar service install

然后启动服务：

sudo cpolar service start

如下图所示：

然后可以通过如下命令验证版本信息以进一步确认安装：

cpolar version

出现版本信息即代表安装成功!

4.3 注册及登录cpolar web ui管理界面

访问cpolar官网，点击【免费注册】按钮，进行账号注册：

进入到如下的注册页面进行账号注册：

注册完成后,在浏览器中输入如下地址访问 web ui管理界面:

https://127.0.0.1:9200

输入刚才注册好的cpolar账号登录即可进入后台页面:

5 配置hermes-web-ui公网隧道

前面我们已经完成了 cpolar 的安装和登录，接下来就可以正式给 hermes-web-ui 创建公网隧道了。这里要注意一点：hermes-web-ui 默认运行在本地的 8648 端口，所以我们在 cpolar 中创建隧道时，本地地址就填写这个端口。简单理解就是：cpolar 负责把本地的 8648 端口映射成一个公网地址，外面访问这个公网地址，就等于访问本地的 hermes-web-ui。

首先，进入侧边的【隧道管理>隧道列表】，可以看到有2条隧道：

选择website这条隧道，点击编辑进行修改（也可以创建新的隧道），设置一个方便辨识的隧道名称（如:hermesweb），然后协议选择http,本地地址填写hermes-web-ui的访问端口【8648】，地地区这里选择的China Top，最后点击更新，如下图所示：

接着来到【状态>在线隧道列表】,可以看到一条hermesweb隧道生成了2条不同协议的公网访问地址：

这里以https协议的公网地址进行访问一下：

可以看到，已经成功打开了 hermes-web-ui 的登录页面。这里输入前面启动 WebUI 时生成的 Token，就可以通过公网地址访问 Hermes Agent 的 Web 控制台了。

6 配置固定域名访问

到这里，我们已经可以通过 cpolar 生成的公网地址访问 hermes-web-ui 了。也就是说，即使 Hermes Agent 还运行在本地电脑、NAS 或者内网设备里，我们也能在外面通过浏览器打开它的 Web 控制台。

不过，前面使用的是随机公网地址，适合临时测试，但不太适合长期使用。因为随机地址可能会发生变化，如果每次访问都要重新查看地址，再复制到浏览器里，就会比较麻烦。

所以接下来，我们给 hermes-web-ui 配置一个固定二级子域名。这样后续就可以通过一个固定不变的公网地址访问 Hermes Agent 的 Web 控制台，用起来会更稳定，也更适合长期远程管理。

6.1 设置二级子域名

首先，进入官网的预留页面：

https://dashboard.cpolar.com/reserved

然后，选择预留菜单，即可看到保留二级子域名项，填写其中的地区、名称、描述（可不填）项，然后点击保留按钮，操作步骤图如下：

列表中显示了一条已保留的二级子域名记录：

• 地区：显示为China Top。
• 二级域名：显示为hermes01。

注：二级域名是唯一的，每个账号都不相同，请以自己设置的二级域名保留的为主

6.2 修改隧道为子域名方式

进入侧边菜单栏的【隧道管理】下的【隧道列表】，可以看到名为【hermesweb】的隧道：

点击编辑按钮，进入编辑页，将域名类型修改为【二级子域名】类型，然后在【Sub Domain】填写前面预留的二级子域名名称，然后点击更新：

接着再来到【状态>在线隧道列表】,可以看到 hermesweb隧道的公网已经变更为我们刚才设置好的二级子域名前缀的方式了：

这里继续使用 https 公网地址进行访问测试：

可以看到，通过固定二级子域名生成的公网地址，也可以正常打开 hermes-web-ui 的登录页面。接着输入前面生成的 Token，测试一下是否可以正常登录：

登录成功后，就可以通过固定公网地址进入 Hermes Agent 的 Web 控制台了。到这里，hermes-web-ui 的固定二级子域名访问就配置完成了。后续无论是在外面用手机，还是在其他电脑上远程管理，都可以直接通过这个固定地址打开 WebUI，不用每次重新查看随机公网地址。

总结

体验下来，Hermes Web UI 带来的最大改变并不是多了一个聊天窗口，而是让 Hermes Agent 从一个“黑盒”变成了一个真正可管理的系统。

以前看到的只有消息输入和消息输出，中间发生了什么只能靠猜。现在无论是模型调用、任务执行、频道配置还是日志状态，都能够通过 Web 控制台直接查看。对于长期运行的 AI Agent 来说，这种可视化能力往往比增加几个功能更重要。

尤其是在接入微信、飞书、企微等平台之后，Hermes Agent 已经不再只是一个聊天机器人，而更像一个持续工作的数字助手。而当助手开始承担越来越多任务时，拥有一个能够观察和管理它的后台几乎成为刚需。

再结合 cpolar 提供的公网访问能力后，无论 Hermes Agent 部署在家里还是办公室，都能够通过固定地址远程访问控制台。查看任务状态、调整模型配置、排查运行问题，都不再受网络环境限制。

很多人觉得 AI Agent 最重要的是模型能力。

但真正长期使用之后你会发现：