https://github.com/itq5/openclaw-admin
OpenClaw Admin 是一个基于 Vue 3 构建的现代化 AI 智能体管理平台，为 OpenClaw Gateway 提供完整的 Web 管理界面。通过直观的可视化操作，用户可以轻松管理 AI 智能体、会话、模型、频道、技能等核心功能。
https://github.com/itq5/openclaw-admin
openclaw web
Last synced: about 10 hours ago
JSON representation
OpenClaw Admin 是一个基于 Vue 3 构建的现代化 AI 智能体管理平台，为 OpenClaw Gateway 提供完整的 Web 管理界面。通过直观的可视化操作，用户可以轻松管理 AI 智能体、会话、模型、频道、技能等核心功能。
- Host: GitHub
- URL: https://github.com/itq5/openclaw-admin
- Owner: itq5
- License: mit
- Created: 2026-03-10T11:05:32.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-09T10:33:01.000Z (18 days ago)
- Last Synced: 2026-04-09T12:24:49.512Z (18 days ago)
- Topics: openclaw, web
- Language: Vue
- Homepage: https://claw.227727.xyz
- Size: 10.4 MB
- Stars: 361
- Watchers: 3
- Forks: 99
- Open Issues: 14
-
Metadata Files:
- Readme: README.en.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Claw Admin - AI Agent Management Platform
Modern AI Agent Gateway Management Console
GitHub •
Features •
Tech Stack •
Quick Start •
Hermes Agent Integration •
Project Structure •
Development Guide •
中文
***
## Introduction
Claw Admin is a modern AI agent management platform built with Vue 3, supporting both **OpenClaw Gateway** and **Hermes Agent**. Through intuitive visual operations, users can easily manage AI agents, sessions, models, channels, skills, and other core features, with a full-featured Web CLI terminal experience.
### Version Compatibility
| OpenClaw Admin | OpenClaw Gateway | Hermes Agent | Status |
| -------------- | ---------------- | ------------ | ---------- |
| 0.2.7 | 2026.4.5 | 2026.4.9 | ✅ Verified |
### Highlights
- 🎯 **Dual Gateway Support**: Manage both OpenClaw Gateway and Hermes Agent from a single platform
- 🖥️ **Web CLI Terminal**: Real CLI experience powered by xterm.js, with session persistence, reconnection, and launch parameter configuration
- 🤖 **Multi-Agent Collaboration**: Create and manage multiple AI agents for complex task collaboration
- 📊 **Real-time Monitoring**: System resources, session status, token usage, and more
- 🌍 **Internationalization**: Built-in Chinese and English support, seamless switching
- 🎨 **Modern UI**: Responsive design based on Naive UI, supports light/dark themes
***
## Features
### I. OpenClaw Gateway Module
#### Dashboard
- Runtime overview and key metrics
- Token usage trend charts
- Session activity statistics
- Real-time event stream monitoring
- Top models/channels/tools distribution
#### Chat
- Real-time chat interface
- Support for slash commands (`/new`, `/skill`, `/model`, `/status`, `/subagents`)
- Message filtering and search
- Quick replies
- Real-time token usage statistics
#### Sessions
- Session list and details
- Create, reset, delete sessions
- Multi-dimensional filtering and sorting
- Message history export
#### Memory
- Agent document management
- Edit AGENTS, SOUL, IDENTITY, USER, and other core documents
- Markdown editor
- Quick template snippets
#### Cron
- Scheduled task creation and management
- Support for Cron expressions, fixed intervals, specific times
- Task execution history
- Quick templates (morning report, health check, etc.)
#### Models
- Multi-model channel configuration
- API Key security management (masked display)
- Model probing
- Default model settings
- Coding package quick configuration
#### Channels
- QQ, Feishu, DingTalk, WeCom channel configuration
- Channel status monitoring
- Credential security management
- One-click installation and configuration
#### Skills
- Skill plugin list
- Built-in/user skill classification
- Skill installation and updates
- Chat visibility control
#### Agents
- Agent creation and management
- Identity, model, tool permission configuration
- Session statistics and token usage
- Workspace file management
#### Office
- Multi-agent collaboration space
- Scene creation wizard
- Task delegation and execution
- Inter-agent communication
- Team management
#### MyWorld
- Visual office scenes
- Character movement and interaction
- Area interaction features
- Real-time communication
#### Terminal
- SSE protocol remote terminal
- Multi-node support
- Full-screen mode
- Custom shell and working directory
#### Remote Desktop
- Linux/Windows remote desktop
- Real-time screen transmission
- Mouse and keyboard operations
- Clipboard synchronization
#### Files
- Workspace file browsing
- File editing and preview
- File upload and download
- Directory management
#### System
- CPU, memory, disk usage
- Network connection status
- Instance online status
- Runtime statistics
#### Settings
- Connection configuration management
- Appearance and theme settings
- Environment variable configuration
***
### II. Hermes Agent Module
#### Hermes Dashboard
- System status overview (version, uptime, active sessions)
- Token usage and cost analytics (daily / by model)
- Gateway platform status
#### Hermes Chat
- Real-time chat via OpenAI-compatible API (SSE streaming)
- 17+ slash commands (`/new`, `/model`, `/skills`, `/commands`, `/help`, etc.)
- Command panel auto-completion (type `/` to trigger, Tab to complete, arrow keys to navigate)
- Tool Calls visualization
- Markdown rendering + code highlighting + LaTeX formulas
- Real-time token usage statistics
#### Hermes Sessions
- Session list (pagination, search)
- Session message history
- Full-text search (FTS5)
- Session deletion
#### Hermes Models
- Model list (OpenAI-compatible format)
- Current model switching
- Model capability tags (vision, function\_calling, etc.)
#### Hermes Channels
- Messaging platform configuration (Telegram, Discord, Slack, etc.)
- Platform status monitoring
- OAuth authentication management
#### Hermes Skills
- Skill list (enable/disable toggle)
- Skill categories and version info
- Skill descriptions and status
#### Hermes Cron
- Scheduled task CRUD
- Task pause/resume/manual trigger
- Cron expression configuration
#### Hermes Memory
- SOUL.md personality configuration editor
- AGENTS.md agent instructions editor
- Markdown editor + template snippets
#### Hermes System
- Configuration management (structured form + raw YAML editor)
- Environment variable management (masked display, reveal plaintext)
- Log viewer (filter by level/component/keyword)
- Toolset list
#### Hermes CLI Terminal 🔥
- **Real CLI Experience**: Spawns Hermes CLI process via node-pty for full terminal emulation
- **Session Persistence**: Browser disconnect does not terminate the CLI process; supports reconnection with output buffer replay
- **Launch Configuration Panel**: Visual configuration of CLI parameters (model, provider, skills, toolsets, yolo, etc.)
- **Multi-Session Management**: Create multiple CLI sessions with reconnect, detach, rename, and destroy
- **Full CLI Commands**: Supports all CLI-only commands (`/skills`, `/tools`, `/cron`, `/config`, `/browser`, etc.)
- **No WebSocket**: Pure SSE + HTTP POST dual-channel, compatible with strict network policies
- **Terminal Features**: Fullscreen mode, right-click paste, selection copy, auto-fit
***
## Tech Stack
### Frontend Framework
| Technology | Version | Description |
| ---------- | ------- | ----------------------------------- |
| Vue | 3.5.x | Progressive JavaScript Framework |
| Vue Router | 4.x | Official Router |
| Pinia | 3.x | State Management |
| TypeScript | 5.x | Type-safe JavaScript Superset |
| Vite | 7.x | Next-generation Frontend Build Tool |
### UI Components
| Technology | Version | Description |
| ----------------- | ------- | ----------------------- |
| Naive UI | 2.43.x | Vue 3 Component Library |
| @vicons/ionicons5 | 0.13.x | Icon Library |
| @fortawesome | 7.x | Font Awesome Icons |
### Communication & Data
| Technology | Version | Description |
| ------------ | ------- | ------------------------------------------------ |
| WebSocket | - | Real-time Bidirectional Communication (OpenClaw) |
| SSE | - | Server-Sent Events (Hermes) |
| markdown-it | 14.x | Markdown Parser |
| highlight.js | 11.x | Code Highlighting |
| KaTeX | 16.x | LaTeX Math Formula Rendering |
### Backend Services
| Technology | Version | Description |
| -------------- | ------- | -------------------------------------- |
| Express | 5.x | Node.js Web Framework |
| ws | 8.x | WebSocket Implementation |
| better-sqlite3 | 12.x | SQLite Database |
| node-pty | 1.x | Pseudo Terminal Support (CLI Terminal) |
| ssh2 | 1.x | SSH Client |
### Terminal
| Technology | Version | Description |
| ---------------------- | ------- | ----------------- |
| @xterm/xterm | 6.x | Terminal Emulator |
| @xterm/addon-fit | 0.11.x | Terminal Fit |
| @xterm/addon-web-links | 0.12.x | Link Support |
***
## Quick Start
### Requirements
- Node.js >= 18.0.0
- npm >= 9.0.0
- Python >= 3.10 (required for Hermes CLI terminal only)
### Install Dependencies
```bash
npm install
```
### Initialize Environment Variables
```bash
cp .env.example .env
```
### Development Mode
Start frontend development server:
```bash
npm run dev
```
Start backend server:
```bash
npm run dev:server
```
Start both frontend and backend:
```bash
npm run dev:all
```
Visit `http://localhost:3001` to access the management interface.
### Production Build
```bash
npm run build
```
### Preview Build
```bash
npm run preview
```
***
## Hermes Agent Integration
### Prerequisites
Hermes Agent must be installed and configured separately. OpenClaw Admin communicates with Hermes Agent via HTTP API. The following services need to be running:
| Service | Default Port | Description |
| ----------------- | ------------ | ---------------------------------------------------- |
| Hermes Web UI | 9119 | Management REST API (sessions, config, skills, etc.) |
| Hermes API Server | 8642 | OpenAI-compatible API (chat, models, runs) |
| Hermes CLI | - | Python CLI tool (used by Web terminal) |
### Installing Hermes Agent
```bash
# Clone Hermes Agent
git clone https://github.com/hermes-agent/hermes-agent.git ~/.hermes
cd ~/.hermes
# Create virtual environment
python3 -m venv .venv
source .venv/bin/activate
# Install dependencies
pip install -e .
# Run interactive setup wizard
hermes setup
```
### Configuring Hermes Agent
#### 1. Set Up AI Model Provider
Hermes Agent supports multiple AI providers. Choose one to configure:
**Option A: Via Setup Wizard (Recommended)**
```bash
hermes setup model
```
**Option B: Via Environment Variables**
Edit `~/.hermes/.env` file:
```bash
# OpenRouter (default)
OPENROUTER_API_KEY=sk-or-v1-xxxxx
# Or use Anthropic
ANTHROPIC_API_KEY=sk-ant-xxxxx
# Or use OpenAI
OPENAI_API_KEY=sk-xxxxx
# Or use a Custom Provider (e.g., locally deployed models)
CUSTOM_API_KEY=your-api-key
CUSTOM_BASE_URL=http://your-server:port/v1
```
#### 2. Configure Default Model
```bash
# Interactive selection
hermes model
# Or set via config file
# Edit ~/.hermes/config.yaml
# model: anthropic/claude-sonnet-4
```
#### 3. Start Hermes Gateway
```bash
# Foreground (for debugging)
hermes gateway run -v
# Background (for production)
hermes gateway start
# Check status
hermes gateway status
```
#### 4. Verify Connection
```bash
# Check API Server
curl http://localhost:8642/v1/health
# Check Web UI
curl http://localhost:9119/api/status
```
### Connecting Hermes in OpenClaw Admin
1. Log in to OpenClaw Admin
2. Go to the **Settings** page
3. In the **Hermes Agent** section, configure:
- **Web UI URL**: `http://localhost:9119` (default)
- **API Server URL**: `http://localhost:8642` (default)
- **API Key**: Fill in if `API_SERVER_KEY` is configured
4. Click **Test Connection** to verify
5. Save the configuration; the sidebar will display the Hermes module entries
### Environment Variables
Configure Hermes-related parameters in the `.env` file:
```env
# === Hermes Agent Configuration ===
HERMES_WEB_URL=http://localhost:9119 # Hermes Web UI URL
HERMES_API_URL=http://localhost:8642 # Hermes API Server URL
HERMES_API_KEY= # Hermes API key (optional)
HERMES_CLI_PATH=/path/to/hermes # Hermes CLI path (optional, auto-detected by default)
```
### CLI Terminal Usage
The Hermes CLI terminal supports the following launch parameters:
| Parameter | Type | Description |
| ------------------- | --------- | --------------------------------------------------------- |
| `-m` / `--model` | string | Specify model (e.g., `anthropic/claude-sonnet-4`) |
| `--provider` | string | Specify provider (auto/openrouter/anthropic/custom, etc.) |
| `-s` / `--skills` | string\[] | Pre-load skills (multiple allowed) |
| `-t` / `--toolsets` | string | Toolsets (comma-separated) |
| `-r` / `--resume` | string | Resume a specific session |
| `-c` / `--continue` | string | Continue a named session |
| `--yolo` | boolean | Skip dangerous command confirmations |
| `--checkpoints` | boolean | Enable filesystem checkpoints |
| `--max-turns` | number | Maximum tool iteration count |
| `-v` / `--verbose` | boolean | Verbose output |
| `-Q` / `--quiet` | boolean | Quiet mode |
In the Web interface, expand the **Launch Config** panel to visually configure these parameters.
***
## Project Structure
```
openclaw-admin/
├── src/
│ ├── api/ # API Layer
│ │ ├── hermes/ # Hermes API Client
│ │ │ └── client.ts # HermesApiClient class
│ │ ├── types/ # TypeScript Type Definitions
│ │ ├── connect.ts # Connection Management
│ │ ├── rpc-client.ts # RPC Client
│ │ └── websocket.ts # WebSocket Wrapper
│ │
│ ├── assets/ # Static Assets
│ │ └── styles/
│ │ └── main.css # Global Styles
│ │
│ ├── components/ # Components
│ │ ├── common/ # Common Components
│ │ ├── layout/ # Layout Components
│ │ └── office/ # Office Scene Components
│ │
│ ├── composables/ # Composables
│ │ ├── useEventStream.ts # Event Stream
│ │ ├── useResizable.ts # Resize Handling
│ │ └── useTheme.ts # Theme Management
│ │
│ ├── i18n/ # Internationalization
│ │ ├── messages/
│ │ │ ├── zh-CN.ts # Chinese
│ │ │ └── en-US.ts # English
│ │ └── index.ts
│ │
│ ├── layouts/ # Layouts
│ │ └── DefaultLayout.vue
│ │
│ ├── router/ # Router
│ │ ├── index.ts
│ │ └── routes.ts
│ │
│ ├── stores/ # Pinia State Management
│ │ ├── hermes/ # Hermes State Management
│ │ │ ├── connection.ts # Connection Management
│ │ │ ├── config.ts # Configuration
│ │ │ ├── chat.ts # Chat
│ │ │ ├── session.ts # Session Management
│ │ │ ├── model.ts # Model Management
│ │ │ ├── channel.ts # Channel Management
│ │ │ ├── skill.ts # Skill Management
│ │ │ ├── cron.ts # Scheduled Tasks
│ │ │ └── memory.ts # Memory
│ │ ├── hermes-cli.ts # Hermes CLI Terminal
│ │ ├── agent.ts # Agent
│ │ ├── auth.ts # Authentication
│ │ ├── channel.ts # Channel
│ │ ├── chat.ts # Chat
│ │ ├── config.ts # Configuration
│ │ ├── cron.ts # Scheduled Tasks
│ │ ├── memory.ts # Memory
│ │ ├── model.ts # Model
│ │ ├── session.ts # Session
│ │ ├── skill.ts # Skill
│ │ ├── terminal.ts # Terminal
│ │ ├── theme.ts # Theme
│ │ └── websocket.ts # WebSocket
│ │
│ ├── utils/ # Utilities
│ │ ├── channel-config.ts
│ │ ├── format.ts
│ │ ├── markdown.ts
│ │ └── secret-mask.ts
│ │
│ ├── views/ # Page Views
│ │ ├── hermes/ # Hermes Module Pages
│ │ │ ├── HermesDashboard.vue # Dashboard
│ │ │ ├── HermesChatPage.vue # Chat
│ │ │ ├── HermesSessionsPage.vue # Sessions
│ │ │ ├── HermesModelsPage.vue # Models
│ │ │ ├── HermesChannelsPage.vue # Channels
│ │ │ ├── HermesSkillsPage.vue # Skills
│ │ │ ├── HermesCronPage.vue # Cron
│ │ │ ├── HermesMemoryPage.vue # Memory
│ │ │ ├── HermesSystemPage.vue # System
│ │ │ └── HermesCliPage.vue # CLI Terminal
│ │ ├── agents/ # Multi-Agent
│ │ ├── channels/ # Channel Management
│ │ ├── chat/ # Online Chat
│ │ ├── cron/ # Scheduled Tasks
│ │ ├── memory/ # Memory Management
│ │ ├── models/ # Model Management
│ │ ├── sessions/ # Session Management
│ │ ├── skills/ # Skill Management
│ │ ├── system/ # System Monitoring
│ │ ├── terminal/ # Remote Terminal
│ │ ├── remote-desktop/ # Remote Desktop
│ │ ├── files/ # File Browser
│ │ ├── office/ # Agent Workshop
│ │ ├── myworld/ # Virtual Company
│ │ ├── monitor/ # Operations Center
│ │ ├── settings/ # System Settings
│ │ ├── Dashboard.vue # Dashboard
│ │ └── Login.vue # Login Page
│ │
│ ├── App.vue # Root Component
│ ├── main.ts # Entry File
│ └── env.d.ts # Environment Type Declarations
│
├── server/ # Backend Services
│ ├── index.js # Server Entry (includes Hermes CLI proxy)
│ ├── hermes-proxy.js # Hermes API Proxy
│ ├── gateway.js # Gateway Connection
│ └── database.js # Database Operations
│
├── public/ # Public Static Assets
├── dist/ # Build Output
├── data/ # Data Storage
│
├── vite.config.ts # Vite Configuration
├── tsconfig.json # TypeScript Configuration
├── package.json # Project Configuration
├── .env.example # Environment Variables Example
└── .env # Local Environment Variables (copied from .env.example)
```
***
## Development Guide
### Code Style
- Use Vue 3 Composition API + ``
- Follow 2-space indentation, single quotes, trailing commas, no semicolons
- Use `@/` alias for `src` path imports
### Naming Conventions
| Type | Convention | Example |
| ----------- | -------------- | ---------------------- |
| Components | PascalCase.vue | `ConnectionStatus.vue` |
| Route Pages | \*Page.vue | `HermesChatPage.vue` |
| Store | camelCase.ts | `hermes-cli.ts` |
| Composable | use\*.ts | `useTheme.ts` |
### Build Verification
Before submitting, ensure:
```bash
npm run build
```
Build passes with no type errors.
### Environment Variables
First copy the example file, then fill in according to your local environment:
```bash
cp .env.example .env
```
Then configure in `.env` file:
```env
# === Application ===
VITE_APP_TITLE=OpenClaw Admin
PORT=3000
DEV_PORT=3001
# === Authentication ===
AUTH_USERNAME=admin
AUTH_PASSWORD=admin
# === OpenClaw Gateway ===
OPENCLAW_WS_URL=ws://localhost:18789
OPENCLAW_AUTH_TOKEN=
OPENCLAW_AUTH_PASSWORD= # Gateway password, either one with Token is enough
# === Hermes Agent ===
HERMES_WEB_URL=http://localhost:9119
HERMES_API_URL=http://localhost:8642
HERMES_API_KEY=
HERMES_CLI_PATH= # Hermes CLI path (optional, auto-detected by default)
# === Other ===
LOG_LEVEL=INFO
MEDIA_DIR=
```
***
## API Reference
### OpenClaw WebSocket RPC Methods
The project communicates with OpenClaw Gateway via WebSocket, supporting the following RPC methods:
#### Configuration Management
- `config.get` - Get configuration
- `config.patch` - Update configuration
- `config.set` - Set configuration
- `config.apply` - Apply configuration
#### Session Management
- `sessions.list` - List sessions
- `sessions.get` - Get session details
- `sessions.reset` - Reset session
- `sessions.delete` - Delete session
- `sessions.spawn` - Create session
- `sessions.history` - Get history
- `sessions.usage` - Get usage statistics
#### Channel Management
- `channels.status` - Get channel status
- `channel.auth` - Channel authentication
- `channel.pair` - Channel pairing
#### Agent Management
- `agents.list` - List agents
- `agents.create` - Create agent
- `agents.update` - Update agent
- `agents.delete` - Delete agent
- `agents.files.list` - List files
- `agents.files.get` - Get file
- `agents.files.set` - Set file
#### Model Management
- `models.list` - List models
#### Scheduled Tasks
- `cron.list` - List tasks
- `cron.add` - Add task
- `cron.update` - Update task
- `cron.delete` - Delete task
- `cron.run` - Execute task
#### System Monitoring
- `health` - Health check
- `status` - Status query
- `system-presence` - Instance status
- `logs.tail` - View logs
### Hermes REST API Proxy
The backend proxies requests to two Hermes Agent services via `hermes-proxy.js`:
| Target Service | Default Port | Proxy Prefix | Description |
| ----------------- | ------------ | ----------------- | ----------------------------------------------- |
| Hermes Web UI | 9119 | `/api/hermes/` | Management API (sessions, config, skills, etc.) |
| Hermes API Server | 8642 | `/api/hermes/v1/` | OpenAI-compatible API (chat, models, runs) |
### Hermes CLI Terminal API
| Method | Path | Description |
| ------ | --------------------------------- | ----------------------------------------- |
| GET | `/api/hermes-cli/stream` | Create/reconnect CLI session (SSE stream) |
| POST | `/api/hermes-cli/input` | Send keyboard input to CLI process |
| POST | `/api/hermes-cli/resize` | Resize terminal |
| POST | `/api/hermes-cli/destroy` | Destroy CLI session |
| POST | `/api/hermes-cli/heartbeat` | Heartbeat keep-alive |
| GET | `/api/hermes-cli/sessions` | List all CLI sessions |
| POST | `/api/hermes-cli/sessions/rename` | Rename a session |
***
## Security Notes
- ⚠️ **Never commit** real Gateway tokens, API keys, or other sensitive information
- Credential fields use masked display, plain text is never echoed
- API Keys are only submitted when a new value is entered, otherwise the original value is kept
- Hermes CLI sessions have a 2-hour orphan timeout for automatic cleanup
***
## License
[MIT License](LICENSE)
***
## Contributing
Issues and Pull Requests are welcome!
**GitHub Repository**: <https://github.com/itq5/OpenClaw-Admin>
1. Fork this repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'feat: add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Create a Pull Request
***
## Contact
### Author Email
📧 <root@itq5.com>
### WeChat Group
Welcome to join our WeChat group for latest updates and technical support:
***
<p align="center">
Made with ❤️ by <a href="https://github.com/itq5/OpenClaw-Admin">Claw Admin</a> Team
</p>