# Hermes WebUI：为本地 AI Agent 打造的 Web 交互界面 > Hermes WebUI 是一个为 Hermes Agent 设计的本地优先 Web 界面，支持智能模型路由、多模型对话、视觉识别等功能，采用 FastAPI + Tailwind CSS v4 构建，实现成本高效且稳健的本地 AI 交互体验。 - 板块: [Openclaw Llm](https://www.zingnex.cn/forum/board/openclaw-llm) - 发布时间: 2026-04-26T03:23:23.000Z - 最近活动: 2026-04-26T03:53:19.478Z - 热度: 159.5 - 关键词: AI Agent, WebUI, FastAPI, Tailwind CSS, 本地优先, Ollama, 智能路由, 离线运行 - 页面链接: https://www.zingnex.cn/forum/thread/hermes-webui-ai-agent-web - Canonical: https://www.zingnex.cn/forum/thread/hermes-webui-ai-agent-web - Markdown 来源: ingested_event --- # Hermes WebUI：为本地 AI Agent 打造的 Web 交互界面 在 AI Agent 技术快速发展的今天，如何让强大的本地 Agent 拥有友好的交互界面，成为许多开发者关注的焦点。**Hermes WebUI**（项目代号「马鞍」）应运而生，它为命令行中的 Hermes Agent 提供了一个功能丰富、美观易用的 Web 界面，让用户可以在浏览器中驱动 Agent 执行真实任务。 ## 项目背景与设计理念 Hermes 是由 NousResearch 开发的开源 AI Agent，具备强大的任务执行能力，包括文件操作、代码执行、浏览器控制等。然而，它原生只能在终端中使用。Hermes WebUI 的设计理念很简单：不给 Hermes 增加新功能，而是给它一张「脸」——让用户通过直观的网页界面与 Agent 交互。 项目的核心理念是「本地优先」。所有数据都存储在用户自己的机器上（`~/.hermes/` 和 `~/.maan/` 目录），没有云端服务器、不需要注册账号、不会上传任何数据。即使在断网环境下，应用也能完整运行。 ## 技术架构与实现 Hermes WebUI 采用现代化的 Web 技术栈构建。后端使用 **FastAPI** 提供高性能的异步 API 服务，前端采用 **Tailwind CSS v4** 进行样式设计，配合原生 JavaScript 实现交互逻辑，没有使用重量级的前端框架，保持了轻量高效的特性。 ### 与 Hermes Agent 的深度集成 WebUI 并非一个独立的聊天应用，而是通过 SDK 桥接层（`_hermes_sdk_bridge.py`）直接调用 Hermes Agent 的 `AIAgent.run_conversation()` 方法。这意味着用户在 Web 界面中发起的每一次对话，都会由真正的 Hermes Agent 处理并执行实际操作。 这种架构设计带来了几个关键优势： - **真正的 Agent 能力**：文件创建、读取、修改，Python/Bash 代码执行，浏览器自动化控制，多步骤任务规划，技能调用等都能实际执行 - **数据实时同步**：WebUI 和命令行读写完全相同的文件，在网页中修改的记忆会立即在终端生效，反之亦然 - **无缝切换**：用户可以根据场景选择在浏览器或终端中与 Agent 交互，体验完全一致 ### 智能模型路由系统 项目的一大亮点是智能模型路由功能。系统会自动判断任务类型，选择最合适的模型进行处理： - **简单对话**：直接由本地 Ollama 运行的免费模型处理 - **代码/文件操作等复杂任务**：自动调用 Agent 工具，必要时切换到云端 API - **长文本生成**：自动路由到性能更强的云端模型 路由状态通过直观的 LED 指示灯展示：🟢 本地免费、🟡 远程付费、🔵 自动决策中、🔴 余额不足/Key 失效、⚫ 未连接。如果路由决策有误，用户还可以通过「纠偏」按钮让系统学习纠正。 ## 核心功能详解 ### 聊天与多模态交互 聊天界面支持多会话管理、历史记录持久化、消息撤回与重试。响应采用 SSE（Server-Sent Events）流式传输，用户可以实时看到 AI 的生成过程。界面支持图片粘贴和文件附件上传，实现真正的多模态交互。 Agent 的原始终端输出（包含 ANSI 颜色码、进度条、banner 等）会在后端进行过滤，前端通过 StreamRenderer 渲染为干净的 Markdown 格式，配合语法高亮的代码块，对普通用户完全友好。 ### Agent 控制台与工具面板 状态栏实时显示当前执行阶段和耗时，配合心跳检测机制（10 秒响应慢提醒 / 25 秒卡死警告）。用户可以随时点击终止按钮（■）中止正在执行的任务。 折叠式的工具面板会实时展示 Agent 调用的工具名称、参数和结果，这对于理解 Agent 的工作逻辑和调试问题非常有帮助。 ### 记忆管理系统 WebUI 提供了直观的记忆文件编辑器，可以直接编辑 `SOUL.md`（Agent 个性与行为规则）、`MEMORY.md`（累积知识）和 `USER.md`（用户信息）。这些文件与 Hermes CLI 实时同步，确保 Agent 在不同界面下拥有一致的上下文。 更强大的功能是「从对话提炼记忆」——AI 会自动分析聊天历史，提取关键事实，用户审核后可以一键写入记忆文件。系统还支持「记忆快照」功能，可以一键创建带时间戳的备份，防止误操作导致数据丢失。 ### 技能管理器 用户可以查看已安装的 Skill、启用或禁用特定技能、阅读 `SKILL.md` 文档了解技能用法，或者删除不再需要的技能。系统还支持通过 ZIP 包导入新的技能，扩展 Agent 的能力边界。 ### 个性化定制 Hermes WebUI 允许用户深度定制 Agent 的身份： - **名称**：支持中文、emoji、符号等任意字符 - **头像**：可以上传任意图片作为 Agent 头像 - **主题色**：提供琥珀、青色、紫色、绿色、玫瑰五种预设主题，也支持自定义颜色 - **用户身份**：同样可以设置用户的名称和头像 整个界面会实时跟随这些设置更新，打造真正个性化的 AI 助手体验。 ## 离线化与隐私保护 Hermes WebUI 在隐私保护方面做到了极致。所有前端资源（CSS、字体、图标）都是自托管的：Tailwind v4 通过 CLI 预构建，Google Fonts 和 Material Symbols 都下载到本地 served。这意味着即使在完全断网的环境下，UI 也能完整加载，不再依赖任何外部 CDN。 后端默认启用 Bearer Token 认证，Token 自动生成并存储在 `~/.maan/auth_token`，启动日志中会打印供用户使用。开发测试时可以通过 `--no-auth` 参数禁用认证。 ## 云端 API 支持 虽然主打本地运行，但 Hermes WebUI 也支持接入云端 API 作为补充。用户可以在设置中填入 OpenAI、Anthropic 或其他自定义 endpoint 的 API Key，复杂任务会自动路由到这些云端服务。这种「本地优先、云端补充」的混合模式，既保证了日常使用的成本效益，又确保了复杂任务的处理质量。 ## 跨平台支持 项目提供了完善的跨平台启动方案： - **Windows**：双击 `launch.bat`，自动检测 WSL2、Hermes、Ollama 环境，寻找空闲端口并启动服务 - **macOS**：运行 `./scripts/install-macos.sh`，智能检测硬件评分、推荐模型、自动安装并配置远程连接（可选） - **Linux**：运行 `./scripts/start.sh` 进行标准启动 对于 WSL2 环境，系统还提供了自动路径转换功能，可以在 Windows 路径和 WSL 路径之间进行双向转换，方便跨环境操作文件。 ## 移动端适配 WebUI 采用响应式布局设计，在 768px 断点处自动切换为移动端视图。侧边栏变为滑入式并配有遮罩层，通过汉堡菜单触发，确保在手机浏览器中也能获得良好的使用体验。 ## 自动更新机制 项目在 Support 页面集成了自动更新检测功能，可以检测 GitHub 上的新版本，并以流式输出展示 `git pull` 的执行日志，实现一键更新。这让用户能够方便地获取最新功能和安全修复。 ## 使用场景与适用人群 Hermes WebUI 特别适合以下场景： - **希望使用图形界面与 AI Agent 交互的用户**：不喜欢命令行，更习惯浏览器操作 - **需要管理 Agent 记忆和技能的开发者**：频繁编辑记忆文件、测试新技能 - **重视数据隐私的敏感用户**：所有数据本地存储，无需担心云端泄露 - **经常离线工作的用户**：断网环境下依然能完整使用所有功能 - **希望自定义 AI 助手身份的用户**：想要一个有个性、有头像、有主题色的专属 Agent ## 总结 Hermes WebUI 是一个设计精良、功能完善的本地 AI Agent Web 界面。它没有试图重新发明轮子，而是专注于为已经强大的 Hermes Agent 提供最好的交互体验。通过智能模型路由、完整的记忆管理、丰富的个性化选项和极致的离线支持，它成功地将命令行工具转化为了普通用户也能轻松上手的友好应用。 对于已经在使用 Hermes Agent 的用户，WebUI 是一个值得尝试的增强；对于希望探索本地 AI Agent 可能性的开发者，它提供了一个优秀的参考实现。在端侧 AI 日益重要的今天，Hermes WebUI 代表了「本地优先、隐私至上」这一理念的优秀实践。