openclaw-office  by WW-AI-Lab

AI agent collaboration visualization and management frontend

Created 1 month ago
505 stars

Top 61.7% on SourcePulse

GitHubView on GitHub
Project Summary

OpenClaw Office provides a visual frontend for the OpenClaw Multi-Agent system, transforming agent collaboration into an interactive "digital office" experience. It allows users to monitor agent status, tool usage, and resource consumption in real-time through rich visualizations, while also offering a comprehensive console for system management. This tool is beneficial for developers and power users needing to oversee and interact with complex AI agent networks.

How It Works

The core metaphor treats AI agents as "digital employees" within a virtual "office" runtime, with desks representing sessions and collaboration contexts as "meeting pods." OpenClaw Office connects to the OpenClaw Gateway via WebSocket, ingesting real-time events and RPC responses. This data is processed through a WebSocket client and event parser, updating a Zustand store that drives React components. The visualization layer supports both 2D isometric SVG scenes and 3D React Three Fiber environments, rendering dynamic agent avatars, inter-agent communication lines, and live speech bubbles.

Quick Start & Requirements

  • Primary Install: Run directly via npx @ww-ai-lab/openclaw-office or install globally with npm install -g @ww-ai-lab/openclaw-office.
  • Prerequisites: Node.js 22+, pnpm package manager, and a running OpenClaw Gateway instance.
  • Remote Gateway: Supports connecting to remote gateways (e.g., Aliyun, Tencent Cloud) by providing their access URL during initial setup.
  • Development Setup: Requires pnpm install, configuring a .env.local file with VITE_GATEWAY_TOKEN, and critically, enabling gateway.controlUi.dangerouslyDisableDeviceAuth on the OpenClaw Gateway to bypass device identity signature requirements for operator scopes.
  • Links: A demo video is linked via a preview image in the README.

Highlighted Details

  • Virtual Office Environments: Features both 2D SVG isometric and 3D React Three Fiber office scenes, complete with detailed furniture, character models, and visual effects.
  • Agent Visualization: Displays deterministically generated SVG avatars with real-time status animations (idle, working, speaking, tool calling, error), visual collaboration lines, and live Markdown-rendered speech bubbles.
  • Console Management: Offers dedicated pages for system overview, agent management (list, create, delete, details), channel configuration, skill marketplace, cron job scheduling, and system settings.
  • Internationalization: Provides full Chinese and English bilingual support with runtime language switching.

Maintenance & Community

The project welcomes contributions via pull requests. However, the README does not specify community channels (e.g., Discord, Slack), list notable contributors, sponsorships, or provide a public roadmap.

Licensing & Compatibility

Licensed under the MIT license, which is permissive for commercial use and integration into closed-source projects.

Limitations & Caveats

For local development, a security-sensitive bypass (dangerouslyDisableDeviceAuth) must be enabled on the OpenClaw Gateway. This is because the pure web application frontend cannot provide the Ed25519 device identity signatures required by newer Gateway versions for operator scopes, and this bypass is explicitly noted as intended for development use only.

Health Check
Last Commit

13 hours ago

Responsiveness

Inactive

Pull Requests (30d)
6
Issues (30d)
8
Star History
357 stars in the last 30 days

Explore Similar Projects

Feedback? Help us improve.