Hermes Web UI 深度解析 | Open Source AI Dashboard

📦 项目概述 Project Overview

⚠️ 重要区分 ⚠️ Important Distinction

EKKOLearnAI/hermes-web-ui（本研究对象）：Vue 3 + Koa BFF，专为国内用户优化
nesquena/hermes-webui：Python + 纯JS实现，更简洁，三个面板布局
NousResearch/hermes-agent：核心Agent系统本身，6493次提交，87k星

EKKOLearnAI/hermes-web-ui (this study): Vue 3 + Koa BFF, China-optimized
nesquena/hermes-webui: Python + vanilla JS, minimalist
NousResearch/hermes-agent: Core agent system, 6,493 commits, 87k stars

Hermes Web UI 是 Hermes Agent 的全功能Web管理面板，提供会话管理、平台渠道配置、技能浏览、记忆管理、日志查看、模型管理、使用分析、定时任务等功能。

Hermes Web UI is a full-featured web dashboard for Hermes Agent, providing session management, platform channel configuration, skill browsing, memory management, log viewing, model management, usage analytics, and scheduled tasks.

技术栈

Tech Stack

层级	Layer	技术选型	Tech Stack
Frontend	Vue 3 + TypeScript + Vite + Naive UI + Pinia
i18n	vue-i18n (8 languages: en, zh, de, es, fr, ja, ko, pt)
Backend	Koa 2 + @koa/router v15+
Real-time	Socket.IO, EventSource (SSE)
Terminal	node-pty + @xterm/xterm

🏗️ 架构设计 Architecture Design

系统架构图

System Architecture

┌─────────────────────────────────────────────────────┐
│                    Browser (Vue 3)                   │
│  ┌─────────────────────────────────────────────────┐│
│  │ Chat │ Jobs │ Models │ Channels │ Terminal     ││
│  └─────────────────────────────────────────────────┘│
│                      │                              │
│                      ▼ SSE / WebSocket / HTTP       │
│  ┌─────────────────────────────────────────────────┐│
│  │           Koa 2 BFF Server (:8648)             ││
│  │  Routes │ Controllers │ Services │ Auth       ││
│  └─────────────────────────────────────────────────┘│
│         │                      │                    │
│    Hermes CLI            Tencent iLink API         │
│    ~/.hermes/*             (WeChat QR)             │
└─────────────────────────────────────────────────────┘

多Agent可扩展设计

Multi-Agent Extensible Design

所有Agent相关代码命名空间隔离在 `hermes/` 目录下，便于未来接入其他Agent：

All agent-specific code is namespaced under `hermes/` directories:

Layer	Shared	Hermes-specific
API	`api/client.ts`	`api/hermes/*.ts`
Components	`components/layout/`	`components/hermes/*/`
Views	`views/LoginView.vue`	`views/hermes/*.vue`
Stores	-	`stores/hermes/*.ts`
Routes	-	`routes/hermes/*.ts`

BFF层职责

BFF Responsibilities

API Proxy

路径重写，SSE流式传输

Path rewriting, SSE streaming

File Upload/Download

多后端支持：local/Docker/SSH/Singularity

Multi-backend: local/Docker/SSH/Singularity

Session Management

通过Hermes CLI封装实现CRUD

CRUD via Hermes CLI wrapper

WeChat QR Login

集成腾讯iLink Bot API

Tencent iLink Bot API integration

⚡ 核心功能 Core Features

AI Chat

SSE实时流式、Markdown渲染、工具调用展示、文件上传下载、Ctrl+K全局搜索

SSE streaming, Markdown, tool call display, file upload/download, Ctrl+K search

Platform Channels

8大平台：Telegram, Discord, Slack, WhatsApp, Matrix, 飞书, 微信, 企业微信

8 platforms: Telegram, Discord, Slack, WhatsApp, Matrix, Feishu, WeChat, WeCom

Scheduled Jobs

Cron表达式、立即触发、暂停/恢复

Cron expressions, immediate trigger, pause/resume

Model Management

自动发现模型、多Provider管理、OAuth登录

Auto-discover models, multi-provider, OAuth login

Multi-Profile

Profile隔离、克隆/导入/导出、多Gateway管理

Profile isolation, clone/import/export, multi-gateway

File Browser

多后端文件浏览、语法高亮预览

Multi-backend file browsing, syntax highlighting

Web Terminal

node-pty集成、多会话支持、WebSocket实时

node-pty integration, multi-session, WebSocket

Group Chat

多Agent聊天室、@mention路由、上下文压缩

Multi-agent rooms, @mention routing, context compression

💬 微信扫码登录机制 WeChat QR Login Mechanism

✅ 技术方案

使用腾讯官方iLink Bot API（非第三方破解），通过 `hermes gateway setup` 交互式向导完成。

Uses Tencent official iLink Bot API, completed via `hermes gateway setup` wizard.

登录流程

Login Flow

运行 `hermes gateway setup`
Run `hermes gateway setup`
选择 WeChat (ilink / ClawBot)
Select WeChat (ilink / ClawBot)
向导请求iLink服务生成二维码
Wizard requests iLink service to generate QR code
手机微信扫码 → 确认登录
Scan with WeChat → Confirm login
凭证自动写入 `~/.hermes/weixin/accounts/`
Credentials auto-saved to `~/.hermes/weixin/accounts/`

环境变量配置

Environment Configuration

                    WEIXIN_ACCOUNT_ID=your-account-id
WEIXIN_TOKEN=your-bot-token
WEIXIN_DM_POLICY=open  # 或 allowlist
WEIXIN_ALLOWED_USERS=user_id_1,user_id_2
WEIXIN_GROUP_POLICY=disabled  # 或 allowlist
                

⚠️ 注意事项

长回复可能被切成多段（微信单消息上限4000字符）
Long replies may be split (WeChat limit: 4000 chars)
Session过期需重新扫码
Session expiry requires re-scanning
媒体文件需安装 `cryptography`
Media files require `cryptography` package

⚖️ 竞品对比 Competitive Comparison

vs nesquena/hermes-webui

维度	Dimension	EKKOLearnAI	nesquena
Tech	技术栈	Vue 3 + Koa BFF	Python + Vanilla JS
Scale	代码规模	~9000 TS	~7000 Python+JS
i18n	国际化	8 languages built-in	需额外汉化
WeChat	微信	Native support	Not included
Port	端口	8648	8787

vs Open WebUI / Claude.ai

特性	Feature	Hermes	Open WebUI	Claude.ai
Self-hosted	自托管	✅	✅	❌
Shell commands	Shell命令	✅	Limited	❌
WeChat	微信	✅	❌	❌
Cron jobs	定时任务	✅	Plugin	❌
Skills system	技能系统	✅	Limited	❌
Provider-agnostic	Provider无关	✅	✅	❌

💡 借鉴价值 Key Insights

架构层面

Architecture Level

BFF + Agent CLI

Koa做API聚合，封装Hermes CLI，支持多Agent扩展

Koa aggregation, Hermes CLI wrapper, multi-agent extensible

SSE Streaming

流式渲染、rAF节流、自动重连

Streaming render, rAF throttling, auto-reconnect

Session Management

分组、置顶、搜索、全局Ctrl+K

Grouping, pin, search, global Ctrl+K

i18n Pattern

vue-i18n分组结构，中英双语可参考

vue-i18n grouping pattern for bilingual

与我们的关联

Relevance to Our Project

                    知识库网站的AI对话可借鉴SSE流式渲染
AI dialogue can use SSE streaming pattern
会话管理UI可参考分组和搜索设计
Session management UI for grouping & search
未来微信登录可考虑iLink方案
Future WeChat login can use iLink
多Agent可扩展架构值得学习
Multi-agent extensible architecture worth studying

                

🚀 快速部署 Quick Deploy

                    # npm 安装 (推荐)
npm install -g hermes-web-ui
hermes-web-ui start
# 访问 http://localhost:8648

# Docker 一键部署
WEBUI_IMAGE=ekkoye8888/hermes-web-ui:latest docker compose up -d
# 访问 http://localhost:6060
                

📂 GitHub GitHub 📑 返回索引 Back to Index