Claude Code UI

English

Use Claude Code to perform multiple tasks in parallel with a modern UI.

A code agent task management system that provides parallel execution of Claude Code automation tasks. Users can run multiple Claude Code agents simultaneously through a web interface focused on Claude Code integration.

This project is based on @ObservedObserver/async-code, modified and optimized for Claude Code integration.

Key Features

🤖 Claude Code Integration: Run Claude Code automation tasks in parallel
🔄 Parallel Task Management: Execute multiple coding tasks simultaneously
🌐 Clean Web UI: Modern interface for managing Claude Code tasks
🐳 Containerized Execution: Secure sandboxed environment for each task
🔗 Git Integration: Automatic repository cloning, commits, and PR creation
Selfhost: Deploy your own parallel code agent platform.

Architecture

Frontend: Next.js with TypeScript and TailwindCSS
Backend: Python Flask API with Docker orchestration
Agent: Claude Code (Anthropic)
Task Management: Parallel execution system based on container

Quick Start

Setup

git clone <this-repo>
cd async-code
./build.sh

Configure Environment
- Add your Anthropic API key to server/.env
- Copy async-code-web/.env.example to async-code-web/.env.local and configure frontend variables
- Get a GitHub Personal Access Token with repo permissions
- Setup Supabase database (required - see Database Setup section)
Run
- Frontend: http://localhost:3000
- Backend API: http://localhost:5000

Claude Code Credentials

Users with Claude Pro or Max plan:

Log in to Claude Code elsewhere (e.g., on your laptop) with your Pro or Max account.
Copy the content of ~/.claude/credentials.json from your device.
Paste it into your user credential settings in this project.

If credentials are not set, the system will fall back to using your API key.

Database Setup (Required)

The application requires a Supabase database for data storage and full functionality:

Create a Supabase project at https://supabase.com

Initialize the database by running the SQL script in your Supabase dashboard:

-- Copy and run the contents of db/init_supabase.sql in Supabase SQL Editor

Configure backend environment variables in server/.env:

SUPABASE_URL=your_supabase_project_url
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

Configure frontend environment variables in async-code-web/.env.local:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

See db/README.md for detailed database setup instructions.

Usage

Setup GitHub Token: Enter your GitHub token in the web interface
Configure Repository: Specify target repository and branch
Submit Tasks: Start multiple Claude Code tasks in parallel
Review Results: Review outputs from Claude Code automation
Create PRs: Generate pull requests from successful tasks

Environment Variables

Backend (server/.env)

# Required: Anthropic API Key
ANTHROPIC_API_KEY=your_anthropic_api_key_here

# Flask Configuration
FLASK_ENV=production

# Required: Supabase Database Configuration
SUPABASE_URL=your_supabase_url_here
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key_here

Frontend (async-code-web/.env.local)

# Required: Supabase Configuration for frontend
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here

Development

# Run all services
docker-compose up

# Development mode
cd async-code-web && npm run dev  # Frontend
cd server && python main.py      # Backend

Production Deployment

Nginx Configuration

For production deployment, use nginx as a reverse proxy to serve the application:

server {
    listen 80;
    server_name your-domain.com;

    # Frontend (Next.js)
    location / {
        proxy_pass http://ip:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

    # Backend API
    location /api/ {
        proxy_pass http://ip:5000/;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # Handle CORS for API requests
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
        add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization";
        
        # Handle preflight requests
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
            add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization";
            add_header Access-Control-Max-Age 1728000;
            add_header Content-Type 'text/plain; charset=utf-8';
            add_header Content-Length 0;
            return 204;
        }
    }

    # WebSocket support for real-time updates
    location /ws {
        proxy_pass http://ip:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Increase max body size for file uploads
    client_max_body_size 50M;
    
    # Enable gzip compression
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/javascript
        application/xml+rss
        application/json;
}

# SSL Configuration (recommended)
server {
    listen 443 ssl http2;
    server_name your-domain.com;

    ssl_certificate /path/to/your/certificate.pem;
    ssl_certificate_key /path/to/your/private.key;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;

    # Same location blocks as above
    # ... (copy all location blocks from HTTP configuration)
}

# Redirect HTTP to HTTPS
server {
    listen 80;
    server_name your-domain.com;
    return 301 https://$server_name$request_uri;
}

Production Setup Steps

Build for production:
```
./build.sh
```

Install and configure nginx:

# Ubuntu/Debian
sudo apt update && sudo apt install nginx

# Copy configuration
sudo cp nginx.conf /etc/nginx/sites-available/claude-code-ui
sudo ln -s /etc/nginx/sites-available/claude-code-ui /etc/nginx/sites-enabled/

# Test and reload
sudo nginx -t
sudo systemctl reload nginx

SSL Certificate (recommended):

# Using Let's Encrypt with Certbot
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com

Start services:

# Ensure services are running on the correct ports
# Frontend: ip:3000
# Backend: ip:5000

中文

使用现代 UI 通过 Claude Code 并行执行多个任务。

这是一个代码代理任务管理系统，提供 Claude Code 自动化任务的并行执行。用户可以通过专注于 Claude Code 集成的 Web 界面同时运行多个 Claude Code 代理。

本项目基于 @ObservedObserver/async-code，针对 Claude Code 集成进行了修改和优化。

核心功能

🤖 Claude Code 集成：并行运行 Claude Code 自动化任务
🔄 并行任务管理：同时执行多个编码任务
🌐 简洁的 Web UI：用于管理 Claude Code 任务的现代界面
🐳 容器化执行：为每个任务提供安全的沙盒环境
🔗 Git 集成：自动仓库克隆、提交和 PR 创建
自托管：部署您自己的并行代码代理平台

架构

前端：Next.js + TypeScript + TailwindCSS
后端：Python Flask API + Docker 编排
代理：Claude Code (Anthropic)
任务管理：基于容器的并行执行系统

快速开始

安装

git clone <this-repo>
cd async-code
./build.sh

配置环境
- 将您的 Anthropic API 密钥添加到 server/.env
- 复制 async-code-web/.env.example 到 async-code-web/.env.local 并配置前端变量
- 获取具有仓库权限的 GitHub 个人访问令牌
- 设置 Supabase 数据库（必需 - 请参阅数据库设置部分）
运行
- 前端：http://localhost:3000
- 后端 API：http://localhost:5000

数据库设置（必需）

应用程序需要 Supabase 数据库来存储数据并实现完整功能：

在 https://supabase.com 创建 Supabase 项目

通过在 Supabase 控制台中运行 SQL 脚本来初始化数据库：

-- 在 Supabase SQL 编辑器中复制并运行 db/init_supabase.sql 文件的内容

在 server/.env 中配置后端环境变量：

SUPABASE_URL=your_supabase_project_url
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

在 async-code-web/.env.local 中配置前端环境变量：

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

详细的数据库设置说明请参见 db/README.md。

使用方法

设置 GitHub 令牌：在 Web 界面中输入您的 GitHub 令牌
配置仓库：指定目标仓库和分支
提交任务：并行启动多个 Claude Code 任务
查看结果：查看 Claude Code 自动化的输出
创建 PR：从成功的任务生成拉取请求

环境变量

后端 (server/.env)

# 必需：Anthropic API 密钥
ANTHROPIC_API_KEY=your_anthropic_api_key_here

# Flask 配置
FLASK_ENV=production

# 必需：Supabase 数据库配置
SUPABASE_URL=your_supabase_url_here
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key_here

前端 (async-code-web/.env.local)

# 必需：前端 Supabase 配置
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here

开发

# 运行所有服务
docker-compose up

# 开发模式
cd async-code-web && npm run dev  # 前端
cd server && python main.py      # 后端

生产部署

Nginx 配置

生产部署时，使用 nginx 作为反向代理服务应用程序：

server {
    listen 80;
    server_name your-domain.com;

    # 前端 (Next.js)
    location / {
        proxy_pass http://ip:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

    # 后端 API
    location /api/ {
        proxy_pass http://ip:5000/;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # 处理 API 请求的 CORS
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
        add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization";
        
        # 处理预检请求
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
            add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization";
            add_header Access-Control-Max-Age 1728000;
            add_header Content-Type 'text/plain; charset=utf-8';
            add_header Content-Length 0;
            return 204;
        }
    }

    # WebSocket 支持实时更新
    location /ws {
        proxy_pass http://ip:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 增加文件上传的最大文件大小
    client_max_body_size 50M;
    
    # 启用 gzip 压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/javascript
        application/xml+rss
        application/json;
}

生产环境设置步骤

构建生产版本：
```
./build.sh
```

安装和配置 nginx：

# Ubuntu/Debian
sudo apt update && sudo apt install nginx

# 复制配置
sudo cp nginx.conf /etc/nginx/sites-available/claude-code-ui
sudo ln -s /etc/nginx/sites-available/claude-code-ui /etc/nginx/sites-enabled/

# 测试并重新加载
sudo nginx -t
sudo systemctl reload nginx

SSL 证书（推荐）：

# 使用 Let's Encrypt 和 Certbot
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com

Start services:

# Ensure services are running on the correct ports
# Frontend: ip:3000
# Backend: ip:5000

Claude Code 凭证说明

Claude Pro 或 Max 用户：

请在其他地方（如您的笔记本电脑）登录 Claude Code（Pro 或 Max 计划）。
复制您设备上的 ~/.claude/credentials.json 文件内容。
粘贴到本项目的用户凭证设置中。

如果未设置 credentials，系统将自动使用 API key。

Name		Name	Last commit message	Last commit date
Latest commit History 72 Commits
.github/workflows		.github/workflows
async-code-web		async-code-web
db		db
server		server
.gitattributes		.gitattributes
.gitignore		.gitignore
Dockerfile		Dockerfile
Dockerfile.claude-automation		Dockerfile.claude-automation
LICENSE		LICENSE
README.md		README.md
build.sh		build.sh
docker-compose.yml		docker-compose.yml
setup.sh		setup.sh
test-api.sh		test-api.sh
test-model-selection.sh		test-model-selection.sh

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Claude Code UI

English

Key Features

Architecture

Quick Start

Claude Code Credentials

Database Setup (Required)

Usage

Environment Variables

Backend (server/.env)

Frontend (async-code-web/.env.local)

Development

Production Deployment

Nginx Configuration

Production Setup Steps

中文

核心功能

架构

快速开始

数据库设置（必需）

使用方法

环境变量

后端 (server/.env)

前端 (async-code-web/.env.local)

开发

生产部署

Nginx 配置

生产环境设置步骤

Claude Code 凭证说明

About

Uh oh!

Releases

Packages

Contributors 2

Uh oh!

Languages

License

ai-poet/claude-code-ui

Folders and files

Latest commit

History

Repository files navigation

Claude Code UI

English

Key Features

Architecture

Quick Start

Claude Code Credentials

Database Setup (Required)

Usage

Environment Variables

Backend (server/.env)

Frontend (async-code-web/.env.local)

Development

Production Deployment

Nginx Configuration

Production Setup Steps

中文

核心功能

架构

快速开始

数据库设置（必需）

使用方法

环境变量

后端 (server/.env)

前端 (async-code-web/.env.local)

开发

生产部署

Nginx 配置

生产环境设置步骤

Claude Code 凭证说明

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 2

Uh oh!

Languages

Packages