前言自从把 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的作用接下来就开始正式安装。本文提供两种安装方式推荐方式让 Hermes Agent 自己安装手动方式使用 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-vnpm-v如果能正常输出版本号就说明基础环境没有问题。需要注意的是hermes-web-ui对 Node.js 版本有要求建议使用Node.js 23 或更高版本。如果版本太低建议先升级 Node.js再继续安装。接着执行下面的命令使用 npm 全局安装hermes-web-uinpminstall-ghermes-web-ui等待安装完成后继续启动 WebUIhermes-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?cpolar 是一款内网穿透工具可以将你在局域网内运行的服务如本地 Web 服务器、SSH、远程桌面等通过一条安全加密的中间隧道映射至公网让外部设备无需配置路由器即可访问。 广泛支持Windows、macOS、Linux、树莓派、群晖 NAS等平台并提供一键安装脚本方便部署。4.2 安装cpolar以mac为例macos安装cpolar可通过Homebrew包管理器进行安装无需手动下载安装包。首先在你的 Mac键盘上按下 【Command 空格键】,键盘上没有该键则按【Win 空格键】在弹出的搜索框里输入 【终端】 或 【Terminal】点击回车打开它。接着在终端输入如下命令确认是否安装Homebrewbrew-v如图提示版本信息则可以【跳过Homebrew的安装】如没有安装Homebrew可以使用如下命令进行安装即可# 官方安装脚本需要良好的网络环境/bin/bash-c$(curl-fsSLhttps://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)安装完成后执行如下命令即可安装cpolarbrew tap probezy/corebrewinstallcpolar如下图接着执行如下命令进行安装服务sudocpolarserviceinstall然后启动服务sudocpolarservicestart如下图所示然后可以通过如下命令验证版本信息以进一步确认安装cpolar version出现版本信息即代表安装成功!4.3 注册及登录cpolar web ui管理界面访问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 给我最大的改变并不是多了一个聊天窗口而是让 Hermes Agent 从一个“黑盒”变成了一个真正可管理的系统。