Claude Code UI

A desktop and mobile UI for Claude Code, Anthropic's official CLI for AI-assisted coding. You can use it locally or remotely to view your active projects and sessions in claude code and make changes to them the same way you would do it in claude code CLI. This gives you a proper interface that works everywhere.

Screenshots

Desktop View Main interface showing project overview and chat

Mobile Experience Responsive mobile design with touch navigation

Features

• Responsive Design - Works seamlessly across desktop, tablet, and mobile so you can also use Claude Code from mobile
• Interactive Chat Interface - Built-in chat interface for seamless communication with Claude Code
• Integrated Shell Terminal - Direct access to Claude Code CLI through built-in shell functionality
• File Explorer - Interactive file tree with syntax highlighting and live editing
• Git Explorer - View, stage and commit your changes. You can also switch branches
• Session Management - Resume conversations, manage multiple sessions, and track history

Quick Start

Prerequisites

• Node.js v20 or higher
• Claude Code CLI installed and configured

Installation

1. Clone the repository:

git clone https://github.com/siteboon/claudecodeui.git
cd claudecodeui

2. Install dependencies:

npm install

3. Configure environment:

cp .env.example .env
# Edit .env with your preferred settings

4. Start the application:

# Development mode (with hot reload)
npm run dev

The application will start at the port you specified in your .env

5. Open your browser:
   • Development: http://localhost:3001

Security & Tools Configuration

🔒 Important Notice: All Claude Code tools are disabled by default. This prevents potentially harmful operations from running automatically.

Enabling Tools

To use Claude Code's full functionality, you'll need to manually enable tools:

1. Open Tools Settings - Click the gear icon in the sidebar
2. Enable Selectively - Turn on only the tools you need
3. Apply Settings - Your preferences are saved locally

Tools Settings interface - enable only what you need

Recommended approach: Start with basic tools enabled and add more as needed. You can always adjust these settings later.

Usage Guide

Core Features

Project Management

The UI automatically discovers Claude Code projects from ~/.claude/projects/ and provides:

• Visual Project Browser - All available projects with metadata and session counts
• Project Actions - Rename, delete, and organize projects
• Smart Navigation - Quick access to recent projects and sessions

Chat Interface

• Use responsive chat or Claude Code CLI - You can either use the adapted chat interface or use the shell button to connect to Claude Code CLI.
• Real-time Communication - Stream responses from Claude with WebSocket connection
• Session Management - Resume previous conversations or start fresh sessions
• Message History - Complete conversation history with timestamps and metadata
• Multi-format Support - Text, code blocks, and file references

File Explorer & Editor

• Interactive File Tree - Browse project structure with expand/collapse navigation
• Live File Editing - Read, modify, and save files directly in the interface
• Syntax Highlighting - Support for multiple programming languages
• File Operations - Create, rename, delete files and directories

Git Explorer

Session Management

• Session Persistence - All conversations automatically saved
• Session Organization - Group sessions by project and timestamp
• Session Actions - Rename, delete, and export conversation history
• Cross-device Sync - Access sessions from any device

Mobile App

• Responsive Design - Optimized for all screen sizes
• Touch-friendly Interface - Swipe gestures and touch navigation
• Mobile Navigation - Bottom tab bar for easy thumb navigation
• Adaptive Layout - Collapsible sidebar and smart content prioritization
• Add shortcut to Home Screen - Add a shortcut to your home screen and the app will behave like a PWA

Architecture

System Overview

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Frontend      │    │   Backend       │    │  Claude CLI     │
│   (React/Vite)  │◄──►│ (Express/WS)    │◄──►│  Integration    │
└─────────────────┘    └─────────────────┘    └─────────────────┘