A real-time React control dashboard for the OpenClaw multi-agent AI framework — built with React 19, TypeScript 5.9, Vite 8, and Tailwind CSS 4.
This project provides a browser-based control dashboard for the OpenClaw multi-agent AI platform running on macOS (Mac mini M4). It connects to a locally-hosted OpenClaw gateway via WebSocket, giving operators full visibility and control over agent sessions, model selection, skill management, and runtime health — all through a single-page application.
OpenClaw orchestrates multiple AI models (local via Ollama, cloud via Moonshot/Kimi K2.5 and others) through a tiered routing strategy, with specialised agents handling distinct responsibilities under granular tool-permission control (tools.allow / tools.deny). This dashboard is the observation and control layer for that system.
- Real-time Agent Monitoring: Live WebSocket connection to OpenClaw gateway with streaming token counts, session status, and agent activity
- 7-Page Dashboard UI: Dashboard (command centre), Situation Room (live operations), Agent Studio (profile & workflow editing), Skills Hub, Models Hub, Runtime Health, and Changelog
- Agent Studio: Create, configure, and manage agents with inline file editing (AGENTS.md, SOUL.md), model assignment, and workflow design
- Models Hub: View all configured model providers and available models with context window and token limit details
- Skills Hub: Browse, inspect, and manage installed OpenClaw skills with enable/disable controls
- Runtime Health: Gateway uptime, connection status, session count, total token usage, and manual reconnect/refresh controls
- Bilingual UI: Full English / Chinese (中文) interface with a language toggle, powered by a centralised translation system
- Ed25519 Device Authentication: Cryptographic challenge–response handshake with the OpenClaw gateway using Web Crypto API
┌─────────────────────────────────────────────────────────────┐
│ Browser (React SPA) │
│ │
│ ┌──────────┐ ┌──────────────┐ ┌──────────┐ ┌───────────┐ │
│ │Dashboard │ │Agent Studio │ │Skills Hub│ │Models Hub │ │
│ │ │ │ │ │ │ │ │ │
│ │ Worker │ │ ProfileCard │ │ SkillRow │ │ ModelRow │ │
│ │ Pool │ │ FileEditor │ │ SkillDtl │ │ ModelDtl │ │
│ │ TaskFlow │ │ WorkflowEdit │ │ │ │ │ │
│ │ Chat │ │ ProfileForm │ │ │ │ │ │
│ │ Inspector│ │ │ │ │ │ │ │
│ └────┬─────┘ └──────┬───────┘ └────┬─────┘ └─────┬─────┘ │
│ │ │ │ │ │
│ ┌────v──────────────v──────────────v──────────────v──────┐ │
│ │ useOpenClaw (custom hook) │ │
│ │ WebSocket lifecycle · RPC calls · Event streaming │ │
│ └────────────────────────┬──────────────────────────────┘ │
│ │ │
└───────────────────────────┼──────────────────────────────────┘
│ ws://127.0.0.1:18789
│ (JSON-RPC over WebSocket)
┌───────────────────────────v──────────────────────────────────┐
│ OpenClaw Gateway (local) │
│ │
│ sessions.list · chat.send · chat.abort · models.list │
│ skills.list · agents.list · agents.create · config.get │
│ agents.files.get · agents.files.set · health · ... │
│ │
│ ┌────────────┐ ┌────────────┐ ┌────────────────────┐ │
│ │ Ollama │ │ Moonshot / │ │ Agent Workspaces │ │
│ │ (local LLM)│ │ Kimi K2.5 │ │ AGENTS.md SOUL.md │ │
│ └────────────┘ └────────────┘ └────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
| Category | Technologies |
|---|---|
| UI Framework | React 19 + TypeScript 5.9 |
| Build Tool | Vite 8 |
| Styling | Tailwind CSS 4 |
| Animation | Framer Motion 12 |
| Icons | Lucide React |
| Markdown | react-markdown + remark-gfm + rehype-highlight |
| AI Platform | OpenClaw (multi-agent framework) |
| Transport | WebSocket (JSON-RPC, Protocol v3) |
| Authentication | Ed25519 challenge–response (Web Crypto API) |
| Local Models | Ollama |
| Cloud Models | Moonshot / Kimi K2.5 |
| Platform | macOS (Mac mini M4, Apple Silicon) |
- Node.js 20+ and npm
- A running OpenClaw gateway on
localhost:18789 - Ollama installed (for local model inference)
git clone https://github.com/[username]/openclaw-agent-platform.git
cd openclaw-agent-platform/dashboard
# Install dependencies
npm install
# Configure gateway credentials
cp .env.example .env
# Edit .env with your gateway token and device keys
# Start development server
npm run devThe dashboard will be available at http://localhost:5173.
npm run build
npm run previewopenclaw-agent-platform/
├── dashboard/ # React SPA (this is the main codebase)
│ ├── src/
│ │ ├── app/ # App entry point
│ │ ├── components/
│ │ │ ├── agents/ # AgentCard, AgentModal, LobsterAvatar
│ │ │ ├── chat/ # ChatPanel (main session chat)
│ │ │ ├── dashboard/ # ChatBubble, Inspector, TaskFlowPanel,
│ │ │ │ # MainAgentConsole, WorkerPool, LangDropdown
│ │ │ └── shared/ # NavBar, HelpOverlay, InfoTile, ProgressBar
│ │ ├── pages/
│ │ │ ├── Dashboard/ # Command centre — agent grid, task flow, chat
│ │ │ ├── SituationRoom/ # Live operations view
│ │ │ ├── AgentStudio/ # Agent profiles, file editor, workflow editor
│ │ │ ├── SkillsHub/ # Skill browser with detail panel
│ │ │ ├── ModelsHub/ # Model provider browser with detail panel
│ │ │ ├── RuntimeHealth/ # Gateway health, logs, status cards
│ │ │ └── Changelog/ # Version history with add-entry form
│ │ ├── hooks/
│ │ │ └── useOpenClaw.ts # Core hook: WebSocket, RPC, state management
│ │ ├── lib/
│ │ │ └── openclaw.ts # OpenClawClient: WebSocket + Ed25519 auth
│ │ ├── services/openclaw/ # Service-layer abstractions
│ │ ├── data/ # Static data, translations, mock data
│ │ ├── types/ # TypeScript type definitions
│ │ └── utils/ # Formatting and text utilities
│ ├── public/ # Static assets (favicon, icons)
│ ├── index.html
│ ├── package.json
│ ├── vite.config.ts
│ ├── tsconfig.json
│ └── .env.example # Credential template (never commit .env)
├── docs/
│ └── ARCHITECTURE.md # Detailed architecture documentation
├── .gitignore
├── LICENSE
└── README.md
| Page | Description |
|---|---|
| Dashboard | Command centre with agent grid (WorkerPool), task flow visualisation, chat panel, and inspector |
| Situation Room | Real-time operational view of all active sessions |
| Agent Studio | Create and configure agents — edit profile files (AGENTS.md, SOUL.md), assign models, design workflows |
| Skills Hub | Browse all installed OpenClaw skills with description, version, author, and enable/disable |
| Models Hub | View configured model providers, available model IDs, context windows, and token limits |
| Runtime Health | Gateway uptime, connection status, session metrics, log feed, manual reconnect |
| Changelog | Version history with the ability to add new entries |
- Add persistent chat history with local storage
- Implement drag-and-drop workflow builder in Agent Studio
- Add model performance benchmarking view
- Support multiple gateway connections
- Add dark mode theme
- Build end-to-end test suite with Playwright
This project is licensed under the MIT License — see the LICENSE file for details.
Yishen Qu — quyishen111@outlook.com
Last updated: 2026-04-12