一天一个开源项目（第67篇）：OpenClaw-Admin - AI Agent 网关的可视化管理驾驶舱

引言“把 AI Agent 部署到每个人最常用的聊天工具里让 AI 无处不在。”这是「一天一个开源项目」系列的第 67 篇文章。今天介绍的项目是OpenClaw-AdminGitHub。在 AI Agent 大规模落地的今天一个棘手的问题摆在开发者面前我部署了一个强大的 AI Agent但用户要在哪里使用它专门开发一个 App 成本太高而OpenClaw的思路是——让 Agent 直接入驻用户已有的 IM 平台QQ、飞书、钉钉、企业微信这样用户无需改变习惯Agent 就能触达每一个人。OpenClaw-Admin就是这个多渠道 AI Agent 网关的驾驶舱——一个基于Vue 3 TypeScript的现代化 Web 管理后台提供从 Agent 配置、会话管理、模型接入到远程终端、系统监控的全套可视化管理能力。你将学到什么OpenClaw 生态的整体架构与 OpenClaw-Admin 的定位Vue 3 Composition API Naive UI 的管理后台最佳实践如何通过 Web 界面管理多渠道 AI Agent 的完整生命周期基于 Express SQLite WebSocket 的轻量全栈方案远程终端xterm.js、SSH 连接、系统监控等高级功能实现思路前置知识了解 Vue 3 基本概念Composition API、Pinia有 AI Agent / LLM API 使用经验熟悉 Node.js 基本生态项目背景项目简介OpenClaw-Admin是 OpenClaw Gateway 生态的前端管理控制台。OpenClaw Gateway 是一个多渠道 AI Agent 运行时核心价值是将 AI 智能体桥接到 QQ、飞书、钉钉、企业微信等主流 IM 平台让用户在熟悉的聊天软件里直接与 Agent 交互。OpenClaw-Admin 作为网关的大脑提供完整的 Web 可视化管理能力智能体管理配置 Agent 身份、能力、权限渠道配置连接各 IM 平台的 API/机器人模型接入管理 OpenAI、Claude、本地模型等多模型提供商会话监控实时追踪所有用户与 Agent 的对话运维工具内置远程终端、SSH、桌面访问、文件浏览器作者介绍作者itq5背景西南大学继续教育学院个人开发者风格高频迭代从 2026 年 3 月到 4 月持续发布新版本v0.1.x → v0.2.x专长API 格式转换代理、Web 工具、AI/LLM 集成项目数据⭐GitHub Stars: 276Forks: 87Open Issues: 11最新版本: v0.2.6License: MIT活跃状态: 最近更新于 2026 年 4 月主要功能核心作用OpenClaw-Admin 提供约17 个功能模块覆盖 AI Agent 管理的完整生命周期功能模块说明登录 仪表盘安全登录实时展示 Token 用量趋势、活跃会话统计在线对话支持斜杠命令/new、/skill、/model的实时对话界面会话管理创建、监控、删除 Agent 会话含历史导出记忆管理内置 Markdown 编辑器编辑 AGENTS/SOUL/IDENTITY 等核心文档定时任务Cron 表达式配置自动化任务含执行历史多渠道支持集成 QQ、飞书、钉钉、企业微信模型配置管理多模型 API安全存储密钥技能管理插件安装、控制技能在对话中的可见性多智能体协作创建独立身份和权限的多个 Agent远程终端SSE 实现终端模拟支持 SSH 远程连接远程桌面Linux/Windows 远程桌面访问文件浏览器远程文件浏览、编辑和传输系统监控CPU、内存、磁盘、网络实时可视化虚拟办公室多角色交互的虚拟协作环境Agent 工坊多实体协作场景编排备份/恢复系统数据一键备份与恢复PDF 查看器内置 PDF 查看支持 LaTeX 公式渲染使用场景企业 AI 助手部署将 ChatGPT/Claude 等 AI 能力接入企业飞书/钉钉员工无需切换工具即可使用 AI开发者个人 Agent 托管在个人服务器部署 OpenClaw 网关通过 Admin 界面管理多个专属 AI 助手多模型路由管理统一管理多个 AI 模型提供商根据场景灵活切换模型运维辅助 Agent结合远程终端和系统监控功能让 Agent 直接参与服务器运维团队知识 AI 化通过记忆管理功能为 Agent 注入团队专属知识库快速开始# 克隆仓库gitclone https://github.com/itq5/OpenClaw-Admin.gitcdOpenClaw-Admin# 安装依赖Node.js 18npminstall# 配置环境变量cp.env.example .env# 编辑 .env填写 OpenClaw Gateway 连接地址等# 同时启动前端和后端推荐npmrun dev:all# 访问管理界面# http://localhost:3000生产部署# 构建前端npmrun build# 启动生产服务器npmrun start核心特性Vue 3 Composition API全面使用script setup语法逻辑按功能组织而非选项分离可维护性更强Naive UI 组件库基于 Naive UI 构建组件风格统一支持暗色/亮色主题切换Pinia 状态管理按业务域拆分 Storesession、agent、model 等状态流转清晰轻量全栈后端仅用 Express SQLite无需重型数据库适合个人或小团队部署实时通信前后端通过 WebSocket 实现实时数据推送终端和监控数据无延迟内置国际化开箱支持中文/英文双语可在设置中无缝切换多模型统一管理安全存储多个 AI 提供商 API Key界面化配置模型参数xterm.js 远程终端基于xterm/xterm6.x 实现浏览器终端支持 SSH 远程连接项目优势对比维度OpenClaw-AdminDifyOne-APIIM 平台集成✅ QQ/飞书/钉钉/企微❌ 无原生支持❌ 无原生支持管理后台✅ 全功能 Web UI✅ 全功能✅ 基础功能远程运维工具✅ 终端桌面文件管理❌❌部署复杂度✅ Node.js 单栈中Docker✅ 低多模型管理✅✅✅ 专注于此开源协议MITApache 2.0MIT为什么选择 OpenClaw-Admin唯一专为 IM 平台 Agent 部署设计的管理后台前后端一体的轻量部署无需额外运维内置运维工具减少切换工具的成本项目详细剖析整体架构OpenClaw-Admin 采用前后端一体的架构同一个 Node.js 进程同时提供静态资源服务分发 Vite 构建的 Vue 3 前端REST API处理前端的数据请求Agent 配置、会话数据等WebSocket 服务实时推送终端输出、系统监控数据SSEServer-Sent Events单向实时数据流Browser (Vue 3 SPA) │ ├── HTTP REST ────────→ Express Routes │ │ ├── WebSocket ────────→ ws Server ──→ node-pty (终端) │ │ ssh2 (SSH) └── SSE ──────────────→ Express SSE ─→ 系统指标采集 │ SQLite (better-sqlite3) │ OpenClaw Gateway API前端架构剖析目录结构src/ ├── api/ # RPC 客户端封装所有后端 API 调用 ├── stores/ # Pinia Store按业务域分类 │ ├── session.ts # 会话状态 │ ├── agent.ts # Agent 配置 │ ├── model.ts # 模型提供商 │ └── ... ├── views/ # 各功能页面组件约 17 个功能对应的视图 ├── composables/ # 可复用 Vue 3 组合函数use* 命名约定 │ ├── useTheme.ts # 主题切换 │ ├── useTerminal.ts # 终端控制 │ └── ... └── i18n/ # 中英文国际化资源Composition API 最佳实践项目严格遵循script setup风格以useTerminal.ts为例// composables/useTerminal.tsimport{ref,onMounted,onUnmounted}fromvueimport{Terminal}fromxterm/xtermimport{FitAddon}fromxterm/addon-fitexportfunctionuseTerminal(containerId:string){constterminalrefTerminal|null(null)constfitAddonnewFitAddon()onMounted((){terminal.valuenewTerminal({cursorBlink:true,theme:{background:#1e1e1e}})terminal.value.loadAddon(fitAddon)terminal.value.open(document.getElementById(containerId)!)fitAddon.fit()})onUnmounted((){terminal.value?.dispose()})constwrite(data:string)terminal.value?.write(data)constresize()fitAddon.fit()return{terminal,write,resize}}逻辑完全封装在 Composable 里View 组件只关心 UI 渲染!-- views/Terminal.vue -- script setup langts import { useTerminal } from /composables/useTerminal const { write, resize } useTerminal(terminal-container) // 其余逻辑WebSocket 连接、输入处理... /script template div idterminal-container classh-full / /template后端架构剖析Express SQLite 轻量全栈后端位于server/目录核心设计原则是极简// server/index.js简化示意importexpressfromexpressimport{WebSocketServer}fromwsimportDatabasefrombetter-sqlite3constappexpress()constdbnewDatabase(data.sqlite)// REST API 路由app.use(/api/agents,agentRouter(db))app.use(/api/sessions,sessionRouter(db))app.use(/api/models,modelRouter(db))// 静态资源生产环境app.use(express.static(dist))// HTTP 服务器constserverapp.listen(3000)// WebSocket 附着于同一端口constwssnewWebSocketServer({server})wss.on(connection,handleTerminalConnection)SQLite 通过better-sqlite3同步 API 操作避免了异步数据库操作的复杂性// 同步读取代码简洁constagentsdb.prepare(SELECT * FROM agents WHERE active 1).all()constagentdb.prepare(SELECT * FROM agents WHERE id ?).get(agentId)终端实现node-pty xterm.js远程终端是项目的技术亮点之一通过node-pty伪终端在服务器端模拟终端进程再通过WebSocket实时传输到前端的xterm.js渲染// server/terminal.js简化示意importptyfromnode-ptyfunctioncreateTerminalSession(ws){// 创建伪终端进程bash/shconstptyProcesspty.spawn(bash,[],{name:xterm-color,cols:80,rows:24,cwd:process.env.HOME,env:process.env})// 终端输出 → WebSocket → 前端 xterm.jsptyProcess.onData((data){ws.send(JSON.stringify({type:output,data}))})// 前端输入 → WebSocket → 伪终端ws.on(message,(msg){const{type,data}JSON.parse(msg)if(typeinput)ptyProcess.write(data)if(typeresize)ptyProcess.resize(data.cols,data.rows)})ws.on(close,()ptyProcess.kill())}记忆管理SOUL/IDENTITY 设计OpenClaw 体系中最有意思的设计之一是将 Agent 的人格和知识拆分为多个 Markdown 文档文档类型作用AGENTS.mdAgent 的能力边界和权限设定SOUL.mdAgent 的个性、语气、行为风格IDENTITY.mdAgent 的身份背景和角色设定USER.md用户相关的上下文信息OpenClaw-Admin 提供内置 Markdown 编辑器让管理员直接编辑这些文档相当于在给 Agent “写灵魂”。这个设计让非技术用户也能调整 Agent 行为而不需要修改提示词工程代码。国际化实现项目的 i18n 基于src/i18n/目录的 JSON 资源文件通过 Vue I18n 实现// 中文资源{dashboard:{title:仪表盘,tokenUsage:Token 使用量,activeSessions:活跃会话}}// 英文资源{dashboard:{title:Dashboard,tokenUsage:Token Usage,activeSessions:Active Sessions}}用户在设置界面切换语言后整个界面无需刷新即可完成语言切换。项目地址与资源官方资源GitHub: https://github.com/itq5/OpenClaw-AdminIssue Tracker: https://github.com/itq5/OpenClaw-Admin/issues最新版本: v0.2.6OpenClaw 生态相关项目OpenClaw Gateway主体: AI Agent 多渠道运行时awesome-openclaw-agents: 187 个生产就绪的 AI Agent 模板SOUL.md 格式技术栈参考Vue 3 文档 - 核心框架Naive UI - UI 组件库Pinia - 状态管理xterm.js - 终端模拟总结与展望核心要点回顾定位独特OpenClaw-Admin 是专为 IM 平台 AI Agent 部署设计的管理后台解决了Agent 如何触达用户这个关键问题技术现代Vue 3 TypeScript Composition API Naive UI是 2025 年现代 Web 管理后台的典型实践功能完整从 Agent 配置到远程终端17 个模块覆盖 Agent 运维全生命周期部署简单前后端一体的 Node.js 栈无需复杂的微服务架构设计亮点SOUL/IDENTITY 文档化 Agent 人格的思路让非技术用户也能参与 Agent 定制适用人群AI 应用开发者需要将 AI 能力接入企业 IM 平台的工程师Vue 3 学习者想参考生产级 Vue 3 TypeScript 管理后台实现的开发者个人 AI 爱好者想在私有服务器部署和管理多个 AI 助手的技术玩家企业技术团队探索 AI 辅助运维和知识管理的团队欢迎来我的个人主页找到更多有用的知识和有趣的产品