DEV Community

Cover image for One Open Source Project a Day (No.32): OpenClaw-Admin - The Visual Control Center for AI Agent Gateways
WonderLab
WonderLab

Posted on

One Open Source Project a Day (No.32): OpenClaw-Admin - The Visual Control Center for AI Agent Gateways

#opensource #ai #openclaw #vue

Introduction

"Deploy AI Agents where your users already are — in the chat apps they use every day."

This is article No.32 in the "One Open Source Project a Day" series. Today's project is OpenClaw-Admin (GitHub).

One of the biggest challenges in AI Agent deployment is distribution: how do you get users to actually interact with your Agent? Building a dedicated app is expensive, and asking users to open yet another tool creates friction. OpenClaw takes a different approach — bridge AI Agents directly into the IM platforms users already live in (QQ, Lark/Feishu, DingTalk, WeCom/WeChat for Work).

OpenClaw-Admin is the "cockpit" for this multi-channel AI Agent gateway — a modern web management console built on Vue 3 + TypeScript that provides everything from Agent configuration and session management to remote terminal access and real-time system monitoring.

What You'll Learn

  • The OpenClaw ecosystem architecture and where OpenClaw-Admin fits
  • Vue 3 + Composition API + Naive UI best practices for admin dashboards
  • Managing the full lifecycle of multi-channel AI Agents via a web UI
  • Lightweight full-stack design with Express + SQLite + WebSocket
  • Advanced features: remote terminal (xterm.js), SSH connection, system monitoring

Prerequisites

  • Basic understanding of Vue 3 (Composition API, Pinia)
  • Some experience with AI Agents / LLM APIs
  • Familiarity with Node.js ecosystem

Project Background

What Is It?

OpenClaw-Admin is the frontend management console for the OpenClaw Gateway ecosystem. The OpenClaw Gateway is a multi-channel AI Agent runtime that bridges AI agents to mainstream IM platforms — letting users chat with AI directly inside the apps they already use.

OpenClaw-Admin serves as the "brain" of the gateway, providing full visual management capabilities:

  • Agent Management: Configure agent identities, capabilities, and permissions
  • Channel Configuration: Connect to IM platform APIs and bots
  • Model Integration: Manage multiple AI model providers
  • Session Monitoring: Track all user-agent conversations in real time
  • DevOps Tools: Built-in remote terminal, SSH, desktop access, and file browser

About the Author

  • GitHub: itq5
  • Affiliation: College of Training and Continuing Education, Southwest University
  • Style: Rapid iteration — continuously releasing new versions from v0.1.x to v0.2.x between March and April 2026
  • Expertise: API proxy/translation, web tools, AI/LLM integration

Project Stats

  • ⭐ GitHub Stars: 276
  • 🍴 Forks: 87
  • 🐛 Open Issues: 11
  • 📦 Latest Version: v0.2.6
  • 📄 License: MIT
  • 🔄 Last Updated: April 2026

Key Features

dashboard

Agents

virtual-company

Core Purpose

OpenClaw-Admin provides approximately 17 functional modules covering the complete lifecycle of AI Agent management:

Module Description
Login & Dashboard Secure login, real-time Token usage trends, active session stats
Online Chat Real-time chat interface with slash commands (/new, /skill, /model)
Session Management Create, monitor, delete Agent sessions; export history
Memory Management Built-in Markdown editor for AGENTS/SOUL/IDENTITY/USER documents
Scheduled Tasks Cron-based automation with execution history
Multi-Channel Support QQ, Lark/Feishu, DingTalk, WeCom integration
Model Configuration Multi-provider API key management with secure storage
Skill Management Plugin installation and visibility control
Multi-Agent Collaboration Create agents with independent identities and permissions
Remote Terminal SSE-based terminal emulation with SSH support
Remote Desktop Linux/Windows remote desktop access
File Browser Remote file browsing, editing, and transfer
System Monitoring Real-time CPU, memory, disk, network visualization
Virtual Office Multi-role virtual collaboration environment
Agent Workshop Multi-entity collaboration scenario orchestration
Backup/Restore One-click system data backup and recovery
PDF Viewer Built-in PDF viewer with LaTeX formula rendering

Use Cases

  1. Enterprise AI Assistant Deployment

    • Integrate ChatGPT/Claude capabilities into enterprise Lark/DingTalk — employees use AI without leaving their existing tools

  2. Personal Agent Hosting

    • Deploy OpenClaw on a personal server and manage multiple specialized AI assistants via the Admin UI

  3. Multi-Model Routing

    • Unified management of multiple AI providers — switch models based on use case from a single interface

  4. DevOps AI Agent

    • Combine the remote terminal and system monitoring features to let Agents participate directly in server operations

  5. Team Knowledge AI

    • Use the memory management feature to inject team-specific knowledge into Agents

Quick Start 

# Clone the repository
git clone https://github.com/itq5/OpenClaw-Admin.git
cd OpenClaw-Admin

# Install dependencies (Node.js >= 18 required)
npm install

# Configure environment variables
cp .env.example .env
# Edit .env with your OpenClaw Gateway connection details

# Start both frontend and backend (recommended)
npm run dev:all

# Access the admin interface
# http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

Production deployment:

# Build frontend
npm run build

# Start production server
npm run start
Enter fullscreen mode Exit fullscreen mode

Core Features

  1. Vue 3 + Composition API

    • Fully embraces <script setup> syntax; logic is organized by feature rather than option-based, making it highly maintainable

  2. Naive UI Component Library

    • Built on Naive UI for consistent design; supports seamless dark/light theme switching

  3. Pinia State Management

    • Stores split by business domain (session, agent, model, etc.) for clear state flow

  4. Lightweight Full Stack

    • Backend uses only Express + SQLite — no heavyweight database required, ideal for self-hosting

  5. Real-time Communication

    • WebSocket enables zero-latency data push for terminal output and monitoring metrics

  6. Built-in i18n

    • Ships with Chinese/English support, switchable without page reload

  7. Unified Multi-Model Management

    • Securely store API keys for multiple providers; configure model parameters from the UI

  8. xterm.js Remote Terminal

    • Browser-based terminal powered by @xterm/xterm 6.x with SSH remote connection support

How It Compares

Dimension OpenClaw-Admin Dify One-API
IM Platform Integration ✅ QQ/Lark/DingTalk/WeCom ❌ Not native ❌ Not native
Admin Web UI ✅ Full-featured ✅ Full-featured ✅ Basic
Remote DevOps Tools ✅ Terminal + Desktop + Files ❌ ❌
Deployment Complexity ✅ Single Node.js stack Medium (Docker) ✅ Low
Multi-Model Management ✅ ✅ ✅ Primary focus
License MIT Apache 2.0 MIT

Why choose OpenClaw-Admin?

  • The only admin console designed specifically for IM-platform AI Agent deployment
  • All-in-one Node.js stack reduces operational overhead
  • Built-in DevOps tools eliminate the need to switch between multiple tools

Deep Dive

System Architecture

OpenClaw-Admin uses an integrated full-stack architecture where a single Node.js process serves:

  • Static Assets: Distributes the Vite-built Vue 3 SPA
  • REST API: Handles frontend data requests (Agent config, session data, etc.)
  • WebSocket Server: Real-time push for terminal output and system metrics
  • SSE (Server-Sent Events): Unidirectional real-time data streams 
Browser (Vue 3 SPA)
     │
     ├── HTTP REST ────────→ Express Routes
     │                          │
     ├── WebSocket ────────→ ws Server ──→ node-pty (Terminal)
     │                          │         ssh2 (SSH)
     └── SSE ──────────────→ Express SSE ─→ System Metrics
                               │
                          SQLite (better-sqlite3)
                               │
                          OpenClaw Gateway API
Enter fullscreen mode Exit fullscreen mode

Frontend Architecture

Directory Structure 

src/
├── api/          # RPC client — encapsulates all backend API calls
├── stores/       # Pinia stores, organized by business domain
│   ├── session.ts      # Session state
│   ├── agent.ts        # Agent configuration
│   ├── model.ts        # Model providers
│   └── ...
├── views/        # Page components (~17 views matching functional modules)
├── composables/  # Reusable Vue 3 composables (use* naming convention)
│   ├── useTheme.ts     # Theme switching
│   ├── useTerminal.ts  # Terminal control
│   └── ...
└── i18n/         # Internationalization resource files
Enter fullscreen mode Exit fullscreen mode

Composition API Best Practices

The project strictly follows <script setup> style. Here's useTerminal.ts as an example:

// composables/useTerminal.ts
import { ref, onMounted, onUnmounted } from 'vue'
import { Terminal } from '@xterm/xterm'
import { FitAddon } from '@xterm/addon-fit'

export function useTerminal(containerId: string) {
  const terminal = ref<Terminal | null>(null)
  const fitAddon = new FitAddon()

  onMounted(() => {
    terminal.value = new Terminal({
      cursorBlink: true,
      theme: { background: '#1e1e1e' }
    })
    terminal.value.loadAddon(fitAddon)
    terminal.value.open(document.getElementById(containerId)!)
    fitAddon.fit()
  })

  onUnmounted(() => {
    terminal.value?.dispose()
  })

  const write = (data: string) => terminal.value?.write(data)
  const resize = () => fitAddon.fit()

  return { terminal, write, resize }
}
Enter fullscreen mode Exit fullscreen mode

All logic is encapsulated in the Composable — the View component only handles UI rendering:

<!-- views/Terminal.vue -->
<script setup lang="ts">
import { useTerminal } from '@/composables/useTerminal'

const { write, resize } = useTerminal('terminal-container')
// Rest: WebSocket connection, input handling...
</script>

<template>
  <div id="terminal-container" class="h-full" />
</template>
Enter fullscreen mode Exit fullscreen mode

Backend Architecture

Express + SQLite Lightweight Full Stack

The backend lives in server/, designed around the principle of extreme simplicity:

// server/index.js (simplified)
import express from 'express'
import { WebSocketServer } from 'ws'
import Database from 'better-sqlite3'

const app = express()
const db = new Database('data.sqlite')

// REST API routes
app.use('/api/agents', agentRouter(db))
app.use('/api/sessions', sessionRouter(db))
app.use('/api/models', modelRouter(db))

// Static files (production)
app.use(express.static('dist'))

// HTTP server
const server = app.listen(3000)

// WebSocket attached to same port
const wss = new WebSocketServer({ server })
wss.on('connection', handleTerminalConnection)
Enter fullscreen mode Exit fullscreen mode

better-sqlite3's synchronous API keeps database code clean and readable:

// Synchronous reads — no async/await complexity
const agents = db.prepare('SELECT * FROM agents WHERE active = 1').all()
const agent = db.prepare('SELECT * FROM agents WHERE id = ?').get(agentId)
Enter fullscreen mode Exit fullscreen mode

Terminal Implementation: node-pty + xterm.js

The remote terminal is one of the project's technical highlights. node-pty spawns a pseudo-terminal process on the server, and its output streams over WebSocket to xterm.js in the browser:

// server/terminal.js (simplified)
import pty from 'node-pty'

function createTerminalSession(ws) {
  // Spawn a pseudo-terminal (bash/sh)
  const ptyProcess = pty.spawn('bash', [], {
    name: 'xterm-color',
    cols: 80,
    rows: 24,
    cwd: process.env.HOME,
    env: process.env
  })

  // Terminal output → WebSocket → browser xterm.js
  ptyProcess.onData((data) => {
    ws.send(JSON.stringify({ type: 'output', data }))
  })

  // Browser input → WebSocket → pseudo-terminal
  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())
}
Enter fullscreen mode Exit fullscreen mode

Memory Management: The SOUL/IDENTITY Design

One of OpenClaw's most interesting design decisions is splitting an Agent's "personality" and "knowledge" into separate Markdown documents:

Document Purpose
AGENTS.md Agent capability boundaries and permission settings
SOUL.md Agent personality, tone, and behavioral style
IDENTITY.md Agent background and role definition
USER.md User-specific context and preferences

OpenClaw-Admin provides a built-in Markdown editor for administrators to edit these documents directly — essentially "writing the soul" of each Agent. This design allows non-technical users to customize Agent behavior without touching prompt engineering code.

Internationalization

The i18n system is based on JSON resource files in src/i18n/, powered by Vue I18n:

// Chinese resources
{
  "dashboard": {
    "title": "仪表盘",
    "tokenUsage": "Token 使用量",
    "activeSessions": "活跃会话"
  }
}

// English resources
{
  "dashboard": {
    "title": "Dashboard",
    "tokenUsage": "Token Usage",
    "activeSessions": "Active Sessions"
  }
}
Enter fullscreen mode Exit fullscreen mode

Language switching in the settings page updates the entire UI instantly without a page reload.

Resources

Official

OpenClaw Ecosystem

  • OpenClaw Gateway: The AI Agent multi-channel runtime (core backend)
  • awesome-openclaw-agents: 187 production-ready AI Agent templates (SOUL.md format)

Tech Stack References

Summary

Key Takeaways

  1. Unique Positioning: OpenClaw-Admin solves the Agent distribution problem — instead of asking users to adopt new tools, bring Agents to the platforms they already use
  2. Modern Tech Stack: Vue 3 + TypeScript + Composition API + Naive UI represents the state of the art for web admin dashboards in 2025
  3. Complete Feature Set: 17 modules cover the entire AI Agent operations lifecycle, from configuration to production monitoring
  4. Simple Deployment: The all-in-one Node.js stack eliminates complex microservice overhead
  5. Design Insight: The SOUL/IDENTITY document approach for Agent personality is clever — it makes Agent customization accessible to non-technical team members

Who Should Use This

  • AI Application Developers: Engineers integrating AI capabilities into enterprise IM platforms
  • Vue 3 Learners: Developers looking for a production-grade Vue 3 + TypeScript admin panel reference
  • AI Enthusiasts: Technically inclined individuals who want to self-host and manage multiple AI assistants
  • Enterprise Tech Teams: Teams exploring AI-assisted DevOps and knowledge management

Visit my personal site for more useful knowledge and interesting products

Top comments (0)