admin/DeskClaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update README.md (#5)

Browse Source 
Co-authored-by: Felix <24791380+vcfgv@users.noreply.github.com>
This commit is contained in:
arianachennn-design
2026-02-07 16:09:35 +08:00
committed by GitHub
Unverified
parent 4cd720ac43
commit 0b7f1c700e
1 changed files with 265 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

356
README.md
View File

@@ -1,124 +1,298 @@
# ClawX
> Graphical AI Assistant based on OpenClaw <h1 align="center">ClawX</h1>
ClawX is a modern desktop application that provides a beautiful graphical interface for OpenClaw, making AI assistants accessible to everyone without command-line knowledge. <p align="center">
<strong>The Desktop Interface for OpenClaw AI Agents</strong>
</p>
<p align="center">
<a href="#features">Features</a> •
<a href="#why-clawx">Why ClawX</a> •
<a href="#getting-started">Getting Started</a> •
<a href="#architecture">Architecture</a> •
<a href="#development">Development</a> •
<a href="#contributing">Contributing</a>
</p>
<p align="center">
<img src="https://img.shields.io/badge/platform-macOS%20%7C%20Windows%20%7C%20Linux-blue" alt="Platform" />
<img src="https://img.shields.io/badge/electron-33+-47848F?logo=electron" alt="Electron" />
<img src="https://img.shields.io/badge/react-19-61DAFB?logo=react" alt="React" />
<img src="https://img.shields.io/badge/typescript-5.7+-3178C6?logo=typescript" alt="TypeScript" />
<img src="https://img.shields.io/badge/license-MIT-green" alt="License" />
</p>
---
## Overview
**ClawX** bridges the gap between powerful AI agents and everyday users. Built on top of [OpenClaw](https://github.com/OpenClaw), it transforms command-line AI orchestration into an accessible, beautiful desktop experience—no terminal required.
Whether you're automating workflows, managing AI-powered channels, or scheduling intelligent tasks, ClawX provides the interface you need to harness AI agents effectively.
---
## Why ClawX
Building AI agents shouldn't require mastering the command line. ClawX was designed with a simple philosophy: **powerful technology deserves an interface that respects your time.**
| Challenge | ClawX Solution |
|-----------|----------------|
| Complex CLI setup | One-click installation with guided setup wizard |
| Configuration files | Visual settings with real-time validation |
| Process management | Automatic gateway lifecycle management |
| Multiple AI providers | Unified provider configuration panel |
| Skill/plugin installation | Built-in skill marketplace and management |
---
## Features ## Features
- 🎯 **Zero CLI Required** - Complete all installation, configuration, and usage through GUI ### 🎯 Zero Configuration Barrier
- 🎨 **Modern UI** - Beautiful, intuitive desktop application interface Complete the entire setup—from installation to your first AI interaction—through an intuitive graphical interface. No terminal commands, no YAML files, no environment variable hunting.
- 📦 **Ready to Use** - Pre-installed skill bundles, ready immediately
- 🖥️ **Cross-Platform** - Unified experience on macOS / Windows / Linux
- 🔄 **Seamless Integration** - Fully compatible with OpenClaw ecosystem
## Tech Stack ### 💬 Intelligent Chat Interface
Communicate with AI agents through a modern chat experience. Support for multiple conversation contexts, message history, and rich content rendering with Markdown.
- **Runtime**: Electron 33+ ### 📡 Multi-Channel Management
- **Frontend**: React 19 + TypeScript Configure and monitor multiple AI channels simultaneously. Each channel operates independently, allowing you to run specialized agents for different tasks.
- **UI Components**: shadcn/ui + Tailwind CSS
- **State Management**: Zustand ### ⏰ Cron-Based Automation
- **Build Tools**: Vite + electron-builder Schedule AI tasks to run automatically. Define triggers, set intervals, and let your AI agents work around the clock without manual intervention.
- **Testing**: Vitest + Playwright
### 🧩 Extensible Skill System
Extend your AI agents with pre-built skills. Browse, install, and manage skills through the integrated skill panel—no package managers required.
### 🔐 Secure Provider Integration
Connect to multiple AI providers (OpenAI, Anthropic, and more) with credentials stored securely in your system's native keychain.
### 🌙 Adaptive Theming
Light mode, dark mode, or system-synchronized themes. ClawX adapts to your preferences automatically.
---
## Getting Started
### System Requirements
- **Operating System**: macOS 11+, Windows 10+, or Linux (Ubuntu 20.04+)
- **Memory**: 4GB RAM minimum (8GB recommended)
- **Storage**: 500MB available disk space
### Installation
#### Pre-built Releases (Recommended)
Download the latest release for your platform from the [Releases](https://github.com/ValueCell-ai/ClawX/releases) page.
#### Build from Source
```bash
# Clone the repository
git clone https://github.com/ValueCell-ai/ClawX.git
cd ClawX
# Install dependencies (pnpm recommended)
pnpm install
# Initialize OpenClaw submodule
pnpm openclaw:init
# Start in development mode
pnpm dev
```
### First Launch
When you launch ClawX for the first time, the **Setup Wizard** will guide you through:
1. **Language & Region** – Configure your preferred locale
2. **AI Provider** – Enter your API keys for supported providers
3. **Skill Bundles** – Select pre-configured skills for common use cases
4. **Verification** – Test your configuration before entering the main interface
---
## Architecture
ClawX employs a **dual-process architecture** that separates UI concerns from AI runtime operations:
```
┌─────────────────────────────────────────────────────────────────┐
│ ClawX Desktop App │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Electron Main Process │ │
│ │ • Window & application lifecycle management │ │
│ │ • Gateway process supervision │ │
│ │ • System integration (tray, notifications, keychain) │ │
│ │ • Auto-update orchestration │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │ │
│ │ IPC │
│ ▼ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ React Renderer Process │ │
│ │ • Modern component-based UI (React 19) │ │
│ │ • State management with Zustand │ │
│ │ • Real-time WebSocket communication │ │
│ │ • Rich Markdown rendering │ │
│ └────────────────────────────────────────────────────────────┘ │
└──────────────────────────────┬──────────────────────────────────┘
│
│ WebSocket (JSON-RPC)
▼
┌─────────────────────────────────────────────────────────────────┐
│ OpenClaw Gateway │
│ │
│ • AI agent runtime and orchestration │
│ • Message channel management │
│ • Skill/plugin execution environment │
│ • Provider abstraction layer │
└─────────────────────────────────────────────────────────────────┘
```
### Design Principles
- **Process Isolation**: The AI runtime operates in a separate process, ensuring UI responsiveness even during heavy computation
- **Graceful Recovery**: Built-in reconnection logic with exponential backoff handles transient failures automatically
- **Secure Storage**: API keys and sensitive data leverage the operating system's native secure storage mechanisms
- **Hot Reload**: Development mode supports instant UI updates without restarting the gateway
---
## Use Cases
### 🤖 Personal AI Assistant
Configure a general-purpose AI agent that can answer questions, draft emails, summarize documents, and help with everyday tasks—all from a clean desktop interface.
### 📊 Automated Monitoring
Set up scheduled agents to monitor news feeds, track prices, or watch for specific events. Results are delivered to your preferred notification channel.
### 💻 Developer Productivity
Integrate AI into your development workflow. Use agents to review code, generate documentation, or automate repetitive coding tasks.
### 🔄 Workflow Automation
Chain multiple skills together to create sophisticated automation pipelines. Process data, transform content, and trigger actions—all orchestrated visually.
---
## Development ## Development
### Prerequisites ### Prerequisites
- Node.js 22+ - **Node.js**: 22+ (LTS recommended)
- pnpm (recommended) or npm - **Package Manager**: pnpm 9+ (recommended) or npm
- **Git**: For submodule management
### Setup ### Project Structure
```bash ```
# Clone the repository ClawX/
git clone https://github.com/ValueCell-ai/ClawX.git ├── electron/ # Electron main process
cd clawx │ ├── main/ # Application entry, window management
│ ├── gateway/ # OpenClaw Gateway process manager
# Install dependencies │ ├── preload/ # Secure IPC bridge scripts
pnpm install │ └── utils/ # Utilities (storage, auth, paths)
├── src/ # React renderer process
# Start development server │ ├── components/ # Reusable UI components
pnpm dev │ │ ├── ui/ # Base components (buttons, inputs)
│ │ ├── layout/ # Layout components (sidebar, header)
│ │ └── common/ # Shared components
│ ├── pages/ # Application pages
│ │ ├── Dashboard/ # Home dashboard
│ │ ├── Chat/ # AI chat interface
│ │ ├── Channels/ # Channel management
│ │ ├── Skills/ # Skill browser & manager
│ │ ├── Cron/ # Scheduled tasks
│ │ └── Settings/ # Configuration panels
│ ├── stores/ # Zustand state stores
│ └── types/ # TypeScript type definitions
├── openclaw/ # OpenClaw submodule
├── resources/ # Static assets (icons, images)
└── tests/ # Test suites
``` ```
### Available Commands ### Available Commands
```bash ```bash
# Development # Development
pnpm dev # Start development server with hot reload pnpm dev # Start with hot reload
pnpm build # Build for production pnpm dev:electron # Launch Electron directly
# Quality
pnpm lint # Run ESLint
pnpm lint:fix # Auto-fix issues
pnpm typecheck # TypeScript validation
# Testing # Testing
pnpm test # Run unit tests pnpm test # Run unit tests
pnpm test:e2e # Run E2E tests pnpm test:watch # Watch mode
pnpm test:coverage # Generate coverage report pnpm test:coverage # Generate coverage report
pnpm test:e2e # Run Playwright E2E tests
# Code Quality # Build & Package
pnpm lint # Run ESLint pnpm build # Full production build
pnpm lint:fix # Fix linting issues pnpm package # Package for current platform
pnpm typecheck # TypeScript type checking pnpm package:mac # Package for macOS
pnpm package:win # Package for Windows
# Packaging pnpm package:linux # Package for Linux
pnpm package # Package for current platform
pnpm package:mac # Package for macOS
pnpm package:win # Package for Windows
pnpm package:linux # Package for Linux
``` ```
## Project Structure ### Tech Stack
``` | Layer | Technology |
clawx/ |-------|------------|
├── electron/ # Electron main process | Runtime | Electron 33+ |
│ ├── main/ # Main process entry and handlers | UI Framework | React 19 + TypeScript |
│ ├── gateway/ # Gateway process management | Styling | Tailwind CSS + shadcn/ui |
│ ├── preload/ # Preload scripts | State | Zustand |
│ └── utils/ # Utilities | Build | Vite + electron-builder |
├── src/ # React renderer process | Testing | Vitest + Playwright |
│ ├── components/ # React components | Animation | Framer Motion |
│ ├── pages/ # Page components | Icons | Lucide React |
│ ├── stores/ # Zustand state stores
│ ├── hooks/ # Custom React hooks
│ ├── types/ # TypeScript types
│ └── styles/ # Global styles
├── resources/ # Static resources
├── tests/ # Test files
└── build_process/ # Build documentation
```
## Architecture ---
ClawX follows a dual-port architecture: ## Contributing
- **Port 23333**: ClawX GUI (default interface) We welcome contributions from the community! Whether it's bug fixes, new features, documentation improvements, or translations—every contribution helps make ClawX better.
- **Port 18789**: OpenClaw Gateway (native management)
``` ### How to Contribute
┌─────────────────────────────────┐
│ ClawX App │ 1. **Fork** the repository
│ ┌───────────────────────────┐ │ 2. **Create** a feature branch (`git checkout -b feature/amazing-feature`)
│ │ Electron Main Process │ │ 3. **Commit** your changes with clear messages
│ │ - Window management │ │ 4. **Push** to your branch
│ │ - Gateway lifecycle │ │ 5. **Open** a Pull Request
│ │ - System integration │ │
│ └───────────────────────────┘ │ ### Guidelines
│ ┌───────────────────────────┐ │
│ │ React Renderer Process │ │ - Follow the existing code style (ESLint + Prettier)
│ │ - Modern UI │ │ - Write tests for new functionality
│ │ - WebSocket communication │ │ - Update documentation as needed
│ └───────────────────────────┘ │ - Keep commits atomic and descriptive
└───────────────┬─────────────────┘
│ WebSocket (JSON-RPC) ---
▼
┌─────────────────────────────────┐ ## Acknowledgments
│ OpenClaw Gateway │
│ - Message channel management │ ClawX is built on the shoulders of excellent open-source projects:
│ - AI Agent runtime │
│ - Skills/plugins system │ - [OpenClaw](https://github.com/OpenClaw) – The AI agent runtime
└─────────────────────────────────┘ - [Electron](https://www.electronjs.org/) – Cross-platform desktop framework
``` - [React](https://react.dev/) – UI component library
- [shadcn/ui](https://ui.shadcn.com/) – Beautifully designed components
- [Zustand](https://github.com/pmndrs/zustand) – Lightweight state management
---
## License ## License
MIT ClawX is released under the [MIT License](LICENSE). You're free to use, modify, and distribute this software.
---
<p align="center">
<sub>Built with ❤️ by the ValueCell Team</sub>
</p>