CrewX UI

Visual control center for CrewX CLI agents (Web + Electron)

Features

• 🎯 CLI Version Management: Track and update CLI tools (Claude, Gemini, Copilot, CrewX)
• 🔄 Dual Deployment: Web (npx) + Desktop (Electron)
• 🏗️ Architecture: NestJS backend + React frontend + Vite
• 🌐 Transport Abstraction: Easy switching between web/electron/mock

Quick Start

1. Install Dependencies

npm install

2. Run Development Server

npm run dev

This will start:

• UI: http://localhost:8200 (Vite dev server)
• API: http://localhost:8201 (NestJS server)

3. Build

# Web version
npm run build:web

# Electron version (desktop app)
npm run build:electron

Project Structure

crewx-ui/
├── src/
│   ├── server/              # NestJS backend
│   │   ├── main.ts
│   │   ├── app.module.ts
│   │   └── domain/
│   │       └── cli/         # CLI version management domain
│   │           ├── cli.module.ts
│   │           ├── cli.controller.ts
│   │           ├── cli.service.ts
│   │           └── dto/
│   └── ui/                  # React frontend
│       ├── main.tsx
│       ├── App.tsx
│       ├── pages/
│       │   └── cli-manager/ # CLI version management page
│       └── lib/
│           └── api/         # Transport abstraction layer
│               ├── transport.ts
│               ├── client.ts
│               └── types.ts
├── docs/
│   └── 설계서.md
├── package.json
├── vite.config.ts
├── tsconfig.json
└── README.md

API Endpoints

CLI Version Management

GET /api/v1/cli/versions

CLI 목록 조회

Response:

{
  "success": true,
  "data": [
    {
      "name": "claude",
      "displayName": "Claude Code",
      "installed": true,
      "currentVersion": "1.0.42",
      "latestVersion": "1.0.45",
      "updateAvailable": true,
      "packageName": "@anthropic-ai/claude-code"
    }
  ]
}

POST /api/v1/cli/update

CLI 업데이트

Request:

{
  "name": "claude"
}

Response:

{
  "success": true,
  "name": "claude",
  "previousVersion": "1.0.42",
  "newVersion": "1.0.45",
  "message": "Updated Claude Code from 1.0.42 to 1.0.45"
}

GET /api/v1/cli/check

CLI 상태 체크

Query: ?name=claude

Response:

{
  "name": "claude",
  "installed": true,
  "currentVersion": "1.0.42",
  "latestVersion": "1.0.45",
  "path": "/usr/local/bin/claude",
  "authenticated": false
}

Transport Abstraction

Usage

import { CrewXClient } from './lib/api/client'
import { fetchTransport, mockTransport } from './lib/api/transport'

// Production (default)
const api = new CrewXClient('', fetchTransport)

// Testing
const api = new CrewXClient('', mockTransport)

// Usage
const versions = await api.getVersions()

Benefits

• ✅ Same code for Web/Electron
• ✅ Easy unit testing with mock transport
• ✅ Single source of truth for API calls

Development

# Start dev server
npm run dev

# Type check
npm run type-check

# Lint
npm run lint

Deployment

Web (npx)

npm run build:web
# Deploy dist/ to npm as `crewx-ui`

Desktop (Electron)

npm run build:electron
# Creates installers in release/

License

MIT

Created by: SowonLabs Contact: [email protected]