Hermes WebUI编程辅助：开发者的AI结对编程伙伴

Hermes WebUI编程辅助：开发者的AI结对编程伙伴

【免费下载链接】hermes-webuiHermes WebUI: The best way to use Hermes Agent from the web or from your phone!项目地址: https://gitcode.com/GitHub_Trending/he/hermes-webui

在现代软件开发中，高效的编程辅助工具已成为开发者不可或缺的伙伴。Hermes WebUI作为一款功能强大的AI驱动编程辅助工具，为开发者提供了直观、高效的Web界面，让AI结对编程变得前所未有的简单。无论是代码编写、调试还是项目管理，Hermes WebUI都能成为你得力的助手，提升编程效率，让开发过程更加流畅。

认识Hermes WebUI：你的全能编程助手 🚀

Hermes WebUI是一个轻量级、深色主题的Web应用界面，专为Hermes Agent设计。它提供与CLI体验完全一致的功能——所有你能在终端中完成的操作，都可以通过这个UI来实现。无需构建步骤，无需框架，也无需打包器，只需Python和原生JS即可运行。

Hermes WebUI采用三面板布局：左侧边栏用于会话和导航，中间是聊天界面，右侧则是工作区文件浏览。模型、配置文件和工作区控制位于** composer footer中——在编写代码时始终可见。一个圆形的上下文环可以一目了然地显示token使用情况。所有设置和会话工具都在Hermes Control Center**中（侧边栏底部的启动器）。

图1：Hermes WebUI三面板布局，展示了会话管理、聊天界面和工作区文件浏览的集成视图

核心功能：让编程更高效 🌟

Hermes WebUI提供了一系列强大功能，旨在提升你的编程体验：

聊天与代理功能

• 通过SSE实现流式响应（token生成后立即显示）
• 多提供商模型支持——任何Hermes API提供商（OpenAI、Anthropic、Google、DeepSeek、Nous Portal、OpenRouter、MiniMax、Xiaomi MiMo、Z.AI）；动态模型下拉菜单根据配置的密钥填充
• 处理消息时发送新消息——自动排队
• 内联编辑任何过去的用户消息并从该点重新生成
• 一键重试上次助手响应
• 直接从composer footer取消正在运行的任务（发送按钮旁边的停止按钮）
• 内联工具调用卡片——每个卡片显示工具名称、参数和结果片段；多工具轮次的全部展开/折叠切换
• 子代理委托卡片——子代理活动以独特图标和缩进边框显示
• 内联Mermaid图表渲染（流程图、序列图、甘特图）
• 思考/推理显示——可折叠的金色主题卡片，用于Claude扩展思考和o3推理块
• 危险shell命令的批准卡片（允许一次/会话/始终/拒绝）
• 网络中断时SSE自动重连（SSH隧道弹性）

会话管理

• 创建、重命名、复制、删除会话，按标题和消息内容搜索
• 每个会话的⋯下拉菜单中的会话操作——固定、移动到项目、归档、复制、删除
• 将会话固定/星标到侧边栏顶部（金色指示器）
• 归档会话（隐藏而不删除，可切换显示）
• 会话项目——带颜色的命名组，用于组织会话
• 会话标签——在标题中添加#tag以获得彩色芯片和点击过滤
• 侧边栏中按今天/昨天/更早分组（可折叠日期组）
• 下载为Markdown transcript、完整JSON导出或从JSON导入
• 会话在页面重新加载和SSH隧道重新连接后保持
• 浏览器标签标题反映活动会话名称
• CLI会话桥——来自hermes-agent的SQLite存储的CLI会话在侧边栏中显示金色"cli"徽章；点击即可导入完整历史并正常回复
• 令牌/成本显示——每次对话显示输入令牌、输出令牌和估计成本（在设置或/usage命令中切换）

图2：会话项目、标签和工具调用卡片，展示了Hermes WebUI的会话管理和工作区功能

工作区文件浏览器

• 带有展开/折叠功能的目录树（单击切换，双击导航）
• 带有可点击路径段的面包屑导航
• 内联预览文本、代码、Markdown（已渲染）和图像
• 使用workspace://path/to/file的聊天链接在右侧预览窗格中打开文件
• 编辑、创建、删除和重命名文件；创建文件夹
• 二进制文件下载（从服务器自动检测）
• 目录导航时文件预览自动关闭（带有未保存编辑保护）
• Git检测——工作区标题中的分支名称和脏文件计数徽章
• 右面板可拖动调整大小
• 语法高亮代码预览（Prism.js）

快速开始：只需几步即可上手 🚀

开始使用Hermes WebUI非常简单，只需按照以下步骤操作：

基本安装

运行仓库引导程序：

git clone https://gitcode.com/GitHub_Trending/he/hermes-webui hermes-webui cd hermes-webui python3 bootstrap.py

或者继续使用shell启动器：

./start.sh

对于自托管VM或家庭实验室安装，ctl.sh包装了常见的守护进程生命周期命令，无需fuser或pkill：

./ctl.sh start # 后台守护进程，PID位于~/.hermes/webui.pid ./ctl.sh status # PID、正常运行时间、绑定的主机/端口、日志路径、/health ./ctl.sh logs --lines 100 # 查看~/.hermes/webui.log的最后100行 ./ctl.sh restart ./ctl.sh stop

ctl.sh start在守护进程包装器后面以前台/无浏览器模式运行引导程序，将日志写入~/.hermes/webui.log，并尊重.env以及内联覆盖，例如HERMES_WEBUI_HOST=0.0.0.0 ./ctl.sh start。

Docker安装

预构建镜像（amd64 + arm64）在每次发布时都会发布到GHCR。

5分钟快速启动（单容器）：

最简单的设置：一个在进程内运行代理的WebUI容器。

git clone https://gitcode.com/GitHub_Trending/he/hermes-webui cd hermes-webui cp .env.docker.example .env # 如果你的主机UID不是1000，请编辑.env（例如，在macOS上UID从501开始） docker compose up -d # 打开http://localhost:8787

以拥有Hermes主目录的用户身份运行Compose。sudo docker compose up -d可能会使${HOME}扩展到root用户的主目录，因此Docker会挂载错误的.hermes目录而不是你真正的~/.hermes，并且WebUI会以config.yaml (not found, using defaults)启动。最好将你的用户添加到Docker组并运行docker compose up -d；如果你必须使用sudo，请先设置绝对路径，例如HERMES_HOME=/home/you/.hermes HERMES_WORKSPACE=/home/you/workspace sudo -E docker compose up -d，然后使用docker compose config验证。

容器会从挂载的~/.hermes卷自动检测你的UID/GID，因此代理写入的文件在主机上仍然可读。

要启用密码保护（如果你将端口暴露在127.0.0.1之外，则需要）：

echo "HERMES_WEBUI_PASSWORD=change-me-to-something-strong" >> .env docker compose up -d --force-recreate

高级功能：提升你的编程体验 🚀

语音输入

• 作曲家工具栏中的麦克风按钮（Web Speech API）
• 点击录制，再次点击或发送以停止
• 实时临时转录显示在文本区域中
• 沉默约2秒后自动停止
• 附加到现有文本区域内容（不替换）
• 当浏览器不支持Web Speech API时隐藏（Chrome、Edge、Safari）

配置文件管理

• composer footer中的配置文件芯片——下拉菜单显示所有配置文件，包括网关状态和模型信息
• 网关状态点（绿色=运行中）、模型信息、每个配置文件的技能计数
• 配置文件管理面板——从侧边栏创建、切换和删除配置文件
• 创建时从活动配置文件克隆配置
• 创建时的可选自定义端点字段——Base URL和API密钥在创建时写入配置文件的config.yaml，因此Ollama、LMStudio和其他本地端点可以无需手动编辑文件进行配置
• 无缝切换——无需服务器重启；重新加载配置、技能、内存、cron、模型
• 每个会话的配置文件跟踪（记录创建时哪个配置文件处于活动状态）

身份验证和安全

• 可选密码认证——默认关闭，本地主机零摩擦
• 通过HERMES_WEBUI_PASSWORD环境变量或设置面板启用
• 可选passkeys/WebAuthn——使用密码登录后从设置->系统注册；至少存在一个passkey后，登录页面才会显示passkey登录
• 注册至少一个passkey后，设置->系统可以删除密码并保持仅passkey登录启用。在你选择无密码之前，密码认证仍然是引导/恢复路径；passkeys是同源的，存储在WebUI状态目录中
• 带24小时TTL的签名HMAC HTTP-only cookie
• /login处的最小深色主题登录页面
• 所有响应上的安全头（X-Content-Type-Options、X-Frame-Options、Referrer-Policy）
• 20MB POST主体大小限制
• 使用SRI完整性哈希固定的CDN资源

主题定制

• 外观分为两个轴：主题（system、dark、light）和皮肤（default、ares、mono、slate、poseidon、sisyphus、charizard、sienna、catppuccin、nous、geist-contrast/Geist Contrast）
• 通过设置->外观（即时实时预览）或/theme <theme-or-skin>切换
• 在重新加载时保持（服务器端在settings.json中+localStorage用于无闪烁加载）
• 皮肤使用data-skin和CSS变量；暗模式通过.dark类解析，而不是data-theme自定义主题轴——参见THEMES.md

总结：为什么选择Hermes WebUI？

大多数AI工具在每个会话中都会重置。它们不知道你是谁，你在做什么工作，或者你的项目遵循什么约定。你每次都要重新解释自己。

Hermes在会话之间保留上下文，在你离线时运行计划任务，并且运行时间越长，对环境的了解就越深入。它使用你现有的Hermes代理设置，你现有的模型，并且无需额外配置即可开始使用。

Hermes WebUI将这种强大的AI辅助能力带到了直观的Web界面中，让你可以随时随地访问你的AI结对编程伙伴。无论你是在办公室的台式机上，还是在旅途中的笔记本电脑上，甚至是在手机上，Hermes WebUI都能为你提供一致、高效的编程辅助体验。

立即开始使用Hermes WebUI，体验AI驱动的编程新时代！

【免费下载链接】hermes-webuiHermes WebUI: The best way to use Hermes Agent from the web or from your phone!项目地址: https://gitcode.com/GitHub_Trending/he/hermes-webui