284861a0f5
Part 1: API Key Integration - Create electron/utils/openclaw-auth.ts to write keys to ~/.openclaw/agents/main/agent/auth-profiles.json - Update provider:save and provider:setApiKey IPC handlers to persist keys to OpenClaw auth-profiles alongside ClawX storage - Save API key to OpenClaw on successful validation in Setup wizard - Pass provider API keys as environment variables when starting the Gateway process (ANTHROPIC_API_KEY, OPENROUTER_API_KEY, etc.) Part 2: Embed OpenClaw Control UI for Chat - Replace custom Chat UI with <webview> embedding the Gateway's built-in Control UI at http://127.0.0.1:{port}/?token={token} - Add gateway:getControlUiUrl IPC handler to provide tokenized URL - Enable webviewTag in Electron BrowserWindow preferences - Override X-Frame-Options/CSP headers to allow webview embedding - Suppress noisy control-ui token_mismatch stderr messages - Add loading/error states for the embedded webview This fixes the "No API key found for provider" error and replaces the buggy custom chat implementation with OpenClaw's battle-tested Control UI.
284861a0f5
·
2026-02-06 03:12:17 +08:00
20 Commits
ClawX
Graphical AI Assistant based on OpenClaw
ClawX is a modern desktop application that provides a beautiful graphical interface for OpenClaw, making AI assistants accessible to everyone without command-line knowledge.
Features
- 🎯 Zero CLI Required - Complete all installation, configuration, and usage through GUI
- 🎨 Modern UI - Beautiful, intuitive desktop application interface
- 📦 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
- Runtime: Electron 33+
- Frontend: React 19 + TypeScript
- UI Components: shadcn/ui + Tailwind CSS
- State Management: Zustand
- Build Tools: Vite + electron-builder
- Testing: Vitest + Playwright
Development
Prerequisites
- Node.js 22+
- pnpm (recommended) or npm
Setup
# Clone the repository
git clone https://github.com/clawx/clawx.git
cd clawx
# Install dependencies
pnpm install
# Start development server
pnpm dev
Available Commands
# Development
pnpm dev # Start development server with hot reload
pnpm build # Build for production
# Testing
pnpm test # Run unit tests
pnpm test:e2e # Run E2E tests
pnpm test:coverage # Generate coverage report
# Code Quality
pnpm lint # Run ESLint
pnpm lint:fix # Fix linting issues
pnpm typecheck # TypeScript type checking
# Packaging
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
clawx/
├── electron/ # Electron main process
│ ├── main/ # Main process entry and handlers
│ ├── gateway/ # Gateway process management
│ ├── preload/ # Preload scripts
│ └── utils/ # Utilities
├── src/ # React renderer process
│ ├── components/ # React components
│ ├── pages/ # Page components
│ ├── 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:
- Port 23333: ClawX GUI (default interface)
- Port 18789: OpenClaw Gateway (native management)
┌─────────────────────────────────┐
│ ClawX App │
│ ┌───────────────────────────┐ │
│ │ Electron Main Process │ │
│ │ - Window management │ │
│ │ - Gateway lifecycle │ │
│ │ - System integration │ │
│ └───────────────────────────┘ │
│ ┌───────────────────────────┐ │
│ │ React Renderer Process │ │
│ │ - Modern UI │ │
│ │ - WebSocket communication │ │
│ └───────────────────────────┘ │
└───────────────┬─────────────────┘
│ WebSocket (JSON-RPC)
▼
┌─────────────────────────────────┐
│ OpenClaw Gateway │
│ - Message channel management │
│ - AI Agent runtime │
│ - Skills/plugins system │
└─────────────────────────────────┘
License
MIT