Skills 2026-04-17 16:35

我让 AI 给自己写了个 WebUI！Hermes Agent 零代码搭建可视化控制台全记录

你是不是也觉得：Hermes Agent 很好用，但纯命令行操作太硬核？

每次开终端、输命令、切模型、调配置，对非技术选手太不友好。

于是我干了件疯狂的事：不写一行代码，让 Hermes Agent 自己给自己造 Web 界面。

全程自然语言对话、自动写代码、自主调试，30 分钟搞定一个支持工具调用、多模型切换、流式输出、深色模式的专属控制台，断网都能用。

这不是教程，是一场 AI 时代的 DIY 狂欢。

一、为什么要给 Hermes 做 WebUI？

Hermes Agent 轻量、稳定、长任务不崩、支持闭环学习，但有个小痛点：

  • 纯终端操作，不够直观

  • 切换模型要记命令，麻烦

  • 工具调用过程看不见，体验差

  • 想分享给同事用，门槛太高

对比市面上功能臃肿的工具，我就想要一个：简单、稳定、好看、完全可控的 AI 控制台。

所以思路很简单：人当产品经理，AI 当程序员，让 Agent 自己造界面给自己用。

有算力需求的朋友，建议使用算力云平台（www.suanlix.cn）：我们提供GPU云主机、海外VPS、跨境云电脑以及GPU整机（裸金属）租赁，大部分产品支持分钟计费/包月模式。
算力云平台已上线 OpenClaw，实现一键部署、开机即用，配置可视化 解决操作难点，提供免费大模型，且全球30+地域任选（免费闪连加速），让每一位用户在实现任务处理时都能提质增效。

 回到正题~

二、核心架构：AI 写代码，你只负责验收

整个系统极简、稳定、无冗余依赖：

浏览器 ↔ WebUI 后端 ↔ Hermes Agent ↔ 工具执行

  • 后端：FastAPI + WebSocket（实时通信、流式输出）

  • 前端：纯原生 HTML/CSS/JS（零 CDN、零框架、断网可用）

  • 能力：终端执行、文件读写、网络搜索、网页抓取、记忆搜索

  • 模型：支持 11 家厂商、40 + 模型一键切换

 

三、开发全过程：AI 干活，我摸鱼

全程分 4 阶段，Hermes 自主完成，我只提需求、点确认。

阶段 1：基础框架（30 分钟）

  • 创建项目结构

  • 生成 FastAPI 后端骨架

  • 写原生 HTML 前端

  • 搭建 WebSocket 通信

 

阶段 2：工具集成（1 小时）

把 CLI 能力完整搬到 Web：

  • 执行终端命令

  • 读写文件、浏览目录

  • 网页搜索与抓取

  • 跨会话记忆搜索

 

阶段 3：多模型支持（30 分钟）

支持 MiniMax、NVIDIA、智谱、SiliconFlow、OpenRouter 等厂商，Web 界面下拉一键切换。

阶段 4：体验打磨（2 小时）

  • 深色模式、响应式布局

  • 流式打字机输出

  • 工具调用进度提示

  • Ctrl+J 换行、回车发送

  • 连接状态指示灯

 

四、这个 WebUI 到底有多香？

1. 零代码搭建，不用懂 Python / 前端

你不用写任何代码，只需要会说人话。

2. 纯本地运行，数据不上云

单个 HTML 文件，打开即用，隐私完全可控。

3. 模型一键切换

不用记 /model 命令，点一下就换厂商、换模型。

4. 长任务稳到离谱

连续 20 + 轮工具调用，不崩溃、不自闭、能自我修复。

5. 自带兜底体验

异步不卡顿、自动端口管理、进程自动清理。

五、手把手教程：复制 Prompt，30 分钟拥有你的 Agent 控制台

核心心法：你是产品经理，AI 是程序员需求越具体，效果越精准。

第一步：初始化项目（5 分钟）

把这段 Prompt 丢给 Hermes：

  •  
  •  
  •  
  •  
  •  
  •  
  •  
帮我创建一个WebUI项目，让Hermes Agent可以在浏览器里运行。要求：1. 后端用FastAPI + WebSocket，支持实时对话2. 前端用纯HTML/CSS/JS，不依赖任何外部CDN（不要React/Vue）3. 项目路径：D:/hermes-web-ui/4. 端口用9000先创建目录结构，再写基础代码。

第二步：美化界面（10 分钟）

  •  
  •  
  •  
  •  
  •  
  •  
  •  
现在的界面太丑了，帮我改进：1. 深色模式，背景用#1a1a2e2. 顶部header用#667eea到#764ba2渐变3. 用户消息靠右（蓝紫色），AI消息靠左（深灰色）4. 输入框用textarea，支持多行5. 加状态指示灯：绿色正常、红色断开直接修改HTML部分。

第三步：添加工具调用能力（15 分钟）

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
我要让WebUI里的AI能调用工具执行任务，实现：工具1：terminal - 执行终端命令工具2：read_file - 读取文件工具3：write_file - 写入文件工具4：list_directory - 列出目录工具5：web_search - 网络搜索要求：1. 用装饰器注册工具2. 工具调用用JSON格式返回3. 结果特殊样式展示4. 支持多轮自动调用修改main.py实现。

第四步：多模型一键切换（10 分钟）

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
我要在Web里切换不同厂商大模型，配置：厂商1：MiniMax厂商2：智谱AI厂商3：NVIDIA要求：1. 前端加厂商+模型下拉框2. 选择后后端自动切换API3. API Key放在.env，不硬编码

第五步：自动端口管理（5 分钟）

  •  
  •  
  •  
  •  
  •  
  •  
帮我写start.py启动脚本：1. 启动前检查9000端口是否占用2. 占用则自动杀掉进程3. 释放端口后启动uvicorn4. 启动后自动打开浏览器5. Ctrl+C优雅退出

第六步：细节打磨（按需迭代）

  • 流式输出：改成打字机效果

  • 快捷键：Enter 发送、Ctrl+J 换行

  • 进度提示：显示 “正在调用工具…”

  • 响应式：手机 / 电脑都好用

 

六、关键技巧：怎么提需求，AI 一次做对？

别模糊说，要动作 + 细节 + 标准。

❌ 错误：界面好看一点、能执行命令、支持多模型 

✅ 正确：深色背景 #1a1a2e、加 terminal 工具、前端加下拉选择器

AI 报错 / 效果不对怎么办？

  • 直接把错误信息贴给它

  • 直接描述现象：消息没对齐、工具没调用

  • 它会自主 debug、自主修复

你只负责验收，不用动手改代码。

七、这套 WebUI 适合谁？

  • 觉得命令行太硬核，想要可视化界面的人

  • 需要稳定跑长任务自动化的人

  • 喜欢 DIY、想定制专属 AI 工具的人

  • 不想被复杂功能绑架，追求简单好用的人

  • 不想写代码、但想拥有专业控制台的零基础用户

 

八、写在最后：这才是 AI 时代的开发方式

以前做一个这样的 WebUI： 学前端 3 个月 + 学后端 1 个月 + 踩坑无限时间。

现在： 清晰提需求 30 分钟 + AI 写代码 30 分钟 = 专属控制台。

这不是 AI 替代人，而是AI 让每个人都能做产品。 你负责想，AI 负责做，你负责把关。

Hermes Agent 已经能独立完成：需求分析→代码编写→调试排错→体验优化。 这，就是未来。

温馨提示

  1. 本文不提供任何 API Key，需自行准备模型平台密钥

  2. 操作前建议备份重要文件，避免误修改

  3. 进程 / 端口操作有风险，按需执行

  4. 本文为技术 DIY 分享，仅供学习使用

注：本文转载自【今日头条 - 不帅，你别爱】，点击阅读原文进入原文链接

 

热门文章

最新文章