给 Hermes Agent 装上 Web 控制台：后台运行的 AI 助手，终于看得见了

前言

相信很多人用 Hermes Agent，也就是大家常说的 爱马仕，都不是直接在终端里和它聊天，而是把它接入到 微信、飞书、企微 这类平台，当成一个长期在线的 AI 助手来用。

这种方式确实方便，但真正用久了就会发现一个问题：消息是发出去了，回复也会回来，可中间到底发生了什么，其实基本看不见。
比如某次回答特别慢，它是在调用工具，还是卡在模型响应？是网络问题、API 问题，还是任务本身比较复杂？想临时 更换 API、查看运行状态、排查日志，也都不够直观。

所以这篇文章，我们就给 Hermes Agent 装上 hermes-web-ui网页的可视化管理页面，让这个原本在后台默默运行的 AI 助手，拥有一个可以直接打开的 Web 控制台。

最后我们再配合 cpolar 实现公网远程访问。这样不管 Hermes 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：

本  地：http://localhost:8648
局域网：http://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

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

http://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?

官网地址：https://www.cpolar.com

• 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管理界面

官网链接：https://www.cpolar.com/

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

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

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

http://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 的安装、基础体验，以及通过 cpolar 实现公网远程访问。原本长期运行在后台的 Hermes Agent，现在终于有了一个可以直接打开的 Web 控制台。

• 通过 hermes-web-ui，我们可以更直观地查看对话过程、模型配置、任务运行状态以及相关日志，不用再只靠微信、飞书里的回复结果来判断服务是否正常。
• 通过 cpolar 内网穿透，即使 Hermes Agent 部署在本地电脑、NAS 或者内网设备上，也可以生成公网地址，在外面通过浏览器远程访问 Web 控制台。
• 通过固定二级子域名，我们还可以把随机公网地址变成固定入口，后续访问更加稳定，也更适合长期管理这个 AI 助手。

对于已经把 Hermes Agent 接入微信、飞书、企微等消息平台的用户来说，hermes-web-ui 更像是一个后台观察窗口。它让这个原本“只会回复消息”的 AI 助手，变得可见、可配置，也更方便后期维护和排查问题。

感谢您阅读本篇文章，有任何问题欢迎留言交流。 cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站