用Hermes WebUI 5分钟搭Agent网页
你写了一个Agent，能力很强，但每次测试都要开终端敲命令？团队协作时想让非技术人员也能试用，却卡在怎么给Agent套一个网页界面？
Hermes WebUI 就是来解决这个问题的。它从 nesquena/hermes-webui 一天拿到13000+ stars，说明市场急需这种“开箱即用”的Agent前端。
这个Skill解决什么具体问题
核心痛点：Agent后端有了，缺一个响应式、可手机访问、带对话历史的Web界面。自己写Flask前端至少半天，还要调样式、处理流式输出、管理会话。Hermes WebUI已经封装好这些，你只需要：
- 准备一个兼容OpenAI Chat Completion API的Agent后端（Hermes Agent、vLLM、Ollama都可以）
- 克隆仓库，改一行配置
- 启动，访问
http://localhost:5000
实测整个流程 少于5分钟，比手写代码快一个数量级。
Skill的触发条件和适用场景
触发条件：你有一个可用的HTTP API端点，格式为 POST /v1/chat/completions，返回标准流式或非流式响应。
适用场景：
- 快速给本地Agent搭建测试界面
- 内部分享Agent能力给非技术同事
- 将Agent嵌入已有的Web Dashboard（通过iframe）
- 移动端调试（响应式UI，手机浏览器直接访问）
完整Skill结构（SKILL.md 示例）
克隆项目后，目录结构非常清晰：
hermes-webui/
├── app.py # Flask主入口，路由、对话逻辑
├── requirements.txt # 依赖：flask, requests, markdown...
├── config.py # 配置：API端点、模型名、系统提示词
├── templates/
│ └── index.html # 单页聊天UI（Bootstrap + 原生JS）
├── static/
│ ├── style.css # 自定义样式，深色/浅色主题
│ └── favicon.ico
└── README.md你的核心配置在 config.py，直接复制下面模板就能用：
# config.py — 可直接复制的模板
import os
# Agent后端API地址（支持OpenAI兼容格式）
API_BASE_URL = os.getenv("API_BASE_URL", "http://localhost:8000/v1")
# 模型名称（你的Agent对应的模型名）
MODEL_NAME = os.getenv("MODEL", "hermes-3-llama-3.1-70b")
# 系统提示词（可选）
SYSTEM_PROMPT = "You are a helpful AI assistant. Respond in markdown."
# 是否启用流式输出
STREAM = True只需要改 API_BASE_URL 和 MODEL_NAME，其他默认直接运行。
实际案例演示
假设你本地用Ollama运行了 llama3.2:1b，API默认在 http://localhost:11434/v1。
步骤1：克隆 & 安装
git clone https://github.com/nesquena/hermes-webui.git
cd hermes-webui
pip install -r requirements.txt步骤2：修改配置
编辑 config.py：
API_BASE_URL = "http://localhost:11434/v1"
MODEL_NAME = "llama3.2:1b"步骤3：启动
python app.py步骤4：打开浏览器
访问 http://localhost:5000，你会看到一个干净的聊天界面。支持：
- 发送消息，流式显示回复
- 对话历史（会话切换）
- 清空对话
- 手机自适应布局
对比：如果自己手写，至少需要写Flask路由、前端HTML/CSS/JS处理流式fetch、会话管理。上述步骤不到1分钟，剩下4分钟用来测试。
复用和组合技巧
1. 替换为不同后端
只需要改 API_BASE_URL 和 MODEL_NAME。支持：
- Hermes Agent
- OpenAI / Azure OpenAI
- Anthropic（需兼容层）
- 任何实现了
/v1/chat/completions的本地推理服务
2. 嵌入到现有系统中
在 config.py 里增加一个 ALLOW_IFRAME = True 配置，然后在你的Dashboard中用 <iframe src="http://your-server:5000" width="100%" height="600px"></iframe> 直接嵌入。
3. 自定义系统提示词
修改 SYSTEM_PROMPT 可以让Agent扮演特定角色，比如代码助手、客服、翻译。不同场景可以启动多个实例，每个实例对应一个 SYSTEM_PROMPT 配置。
4. 扩展能力
在 app.py 中，你可以很轻松地：
- 添加用户登录（Flask-Login）
- 记录所有对话到数据库（SQLite）
- 增加文件上传功能（在
/upload路由处理）
这个Skill的内核是 “一个配置驱动的Agent Web聊天界面”，你可以在它的基础上叠加任何功能，而不必从零搭建。
为什么这种模式受欢迎
Hermes WebUI爆火不是因为技术有多新，而是它精准抓住了AI开发者的一个高频需求：“我要一个能用的界面，但不想花时间写前端”。
我自己在内部工具开发中，也一直强调“优先用现成的UI骨架”。Hermes WebUI就是一个现成的骨架：Flask后端处理会话路由，前端用Bootstrap+原生JS搞定流式解析。你只需要提供API连接信息，就立刻拥有一个产品级别的Agent聊天界面。
如果你还在为Agent没有一个好看的门面而发愁，直接拿这个Skill去用，5分钟后你的Agent就能在手机浏览器里和你对话。