这是「一天一个开源项目」系列的第 67 篇。今天聊的这个项目——OpenClaw-Admin，解决的是一个非常实际的问题：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: 276
• ? Forks: 87
• ? Open Issues: 11
• ? 最新版本: v0.2.6
• ? License: MIT
• ? 活跃状态: 最近更新于 2026 年 4 月

主要功能

核心作用

OpenClaw-Admin 提供约 17 个功能模块，覆盖 AI Agent 管理的完整生命周期：

使用场景

1. 企业 AI 助手部署
   将 ChatGPT/Claude 等 AI 能力接入企业飞书/钉钉，员工无需切换工具即可使用 AI。

2. 开发者个人 Agent 托管
   在个人服务器部署 OpenClaw 网关，通过 Admin 界面管理多个专属 AI 助手。

3. 多模型路由管理
   统一管理多个 AI 模型提供商，根据场景灵活切换模型。

4. 运维辅助 Agent
   结合远程终端和系统监控功能，让 Agent 直接参与服务器运维。

5. 团队知识 AI 化
   通过记忆管理功能为 Agent 注入团队专属知识库。

快速开始

# 克隆仓库
git clone https://github.com/itq5/OpenClaw-Admin.git
cd OpenClaw-Admin

# 安装依赖（Node.js >= 18）
npm install

# 配置环境变量
cp .env.example .env
# 编辑 .env，填写 OpenClaw Gateway 连接地址等

# 同时启动前端和后端（推荐）
npm run dev:all

# 访问管理界面
# https://localhost:3000

生产部署：

# 构建前端
npm run build

# 启动生产服务器
npm run start

核心特性

1. Vue 3 + Composition API
   全面使用

   后端架构剖析

   Express + SQLite 轻量全栈

   后端位于 server/ 目录，核心设计原则是极简：

   // server/index.js（简化示意）
   import express from 'express'
   import { WebSocketServer } from 'ws'
   import Database from 'better-sqlite3'
   
   const app = express()
   const db = new Database('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 服务器
   const server = app.listen(3000)
   
   // WebSocket 附着于同一端口
   const wss = new WebSocketServer({ server })
   wss.on('connection', handleTerminalConnection)
   

   SQLite 通过 better-sqlite3 同步 API 操作，避免了异步数据库操作的复杂性：

   // 同步读取，代码简洁
   const agents = db.prepare('SELECT * FROM agents WHERE active = 1').all()
   const agent = db.prepare('SELECT * FROM agents WHERE id = ?').get(agentId)
   

   终端实现：node-pty + xterm.js

   远程终端是项目的技术亮点之一，通过 node-pty（伪终端）在服务器端模拟终端进程，再通过 WebSocket 实时传输到前端的 xterm.js 渲染：

   // server/terminal.js（简化示意）
   import pty from 'node-pty'
   
   function createTerminalSession(ws) {
     // 创建伪终端进程（bash/sh）
     const ptyProcess = pty.spawn('bash', [], {
       name: 'xterm-color',
       cols: 80,
       rows: 24,
       cwd: process.env.HOME,
       env: process.env
     })
   
     // 终端输出 → WebSocket → 前端 xterm.js
     ptyProcess.onData((data) => {
       ws.send(JSON.stringify({ type: 'output', data }))
     })
   
     // 前端输入 → WebSocket → 伪终端
     ws.on('message', (msg) => {
       const { type, data } = JSON.parse(msg)
       if (type === 'input') ptyProcess.write(data)
       if (type === 'resize') ptyProcess.resize(data.cols, data.rows)
     })
   
     ws.on('close', () => ptyProcess.kill())
   }
   

   记忆管理：SOUL/IDENTITY 设计

   OpenClaw 体系中最有意思的设计之一是将 Agent 的「人格」和「知识」拆分为多个 Markdown 文档：

   文档类型	作用
   AGENTS.md	Agent 的能力边界和权限设定
   SOUL.md	Agent 的个性、语气、行为风格
   IDENTITY.md	Agent 的身份背景和角色设定
   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-Admin
   • ? Issue Tracker: https://github.com/itq5/OpenClaw-Admin/issues
   • ? 最新版本: v0.2.6

   OpenClaw 生态相关项目

   • OpenClaw Gateway（主体）: AI Agent 多渠道运行时
   • awesome-openclaw-agents: 187 个生产就绪的 AI Agent 模板（SOUL.md 格式）

   技术栈参考

   • Vue 3 文档 - 核心框架
   • Naive UI - UI 组件库
   • Pinia - 状态管理
   • xterm.js - 终端模拟

   ---

   总结与展望

   核心要点回顾

   1. 定位独特：OpenClaw-Admin 是专为 IM 平台 AI Agent 部署设计的管理后台，解决了「Agent 如何触达用户」这个关键问题
   2. 技术现代：Vue 3 + TypeScript + Composition API + Naive UI，是 2025 年现代 Web 管理后台的典型实践
   3. 功能完整：从 Agent 配置到远程终端，17 个模块覆盖 Agent 运维全生命周期
   4. 部署简单：前后端一体的 Node.js 栈，无需复杂的微服务架构
   5. 设计亮点：SOUL/IDENTITY 文档化 Agent 人格的思路，让非技术用户也能参与 Agent 定制

   适用人群

   • AI 应用开发者：需要将 AI 能力接入企业 IM 平台的工程师
   • Vue 3 学习者：想参考生产级 Vue 3 + TypeScript 管理后台实现的开发者
   • 个人 AI 爱好者：想在私有服务器部署和管理多个 AI 助手的技术玩家
   • 企业技术团队：探索 AI 辅助运维和知识管理的团队