Giving Claude Code and Cursor a Proper Interface

AI-powered coding assistants like Claude Code and Cursor CLI have revolutionized how developers write, review, and refactor code. But interacting with these powerful tools through a terminal alone limits their accessibility and usability — especially when you want to check on a running session from your phone, collaborate with a teammate, or simply prefer a visual interface over raw CLI output.

Claude Code UI bridges this gap by providing a responsive desktop and mobile web interface that wraps around Claude Code and Cursor CLI. It gives you a proper project browser, interactive chat, file editor, git explorer, and session management — accessible from anywhere, on any device. Compatible with Claude Sonnet 4, Opus 4.1, and GPT-5.

„Control your AI coding sessions from anywhere — your desk, your couch, or your commute. Claude Code UI makes AI-assisted development truly portable.“

The Problem

Despite the power of CLI-based AI coding tools, several friction points persist:

  • Terminal-only access: Claude Code and Cursor CLI require a terminal session, making them inaccessible from mobile devices or browsers
  • No visual project management: Navigating between projects, sessions, and files requires memorizing paths and commands
  • Session fragility: Losing a terminal session means losing context; resuming requires manual reconstruction
  • No mobile experience: Developers cannot monitor or interact with their AI sessions on the go
  • Collaboration barriers: Sharing AI session outputs or collaborating requires screen sharing or copy-pasting
  • File editing friction: Reviewing and modifying files suggested by the AI requires switching between tools

The Solution

Claude Code UI wraps your existing Claude Code or Cursor CLI installation with a full-featured web application. It discovers your projects automatically from ~/.claude/projects/, presents them in a visual browser, and lets you interact through a rich chat interface or an integrated shell terminal. Every session is automatically persisted, so you can resume from any device at any time.

The application is available as an NPM package — a single npx @siteboon/claude-code-ui command starts everything with zero configuration required.

Key Features

Feature Description
Responsive Design Works seamlessly across desktop, tablet, and mobile with adaptive layouts and touch navigation
Interactive Chat Built-in chat interface for real-time communication with Claude Code or Cursor via WebSocket streaming
Integrated Shell Direct terminal access to your CLI of choice through the browser
File Explorer Interactive file tree with syntax highlighting and live editing via CodeMirror
Git Explorer View diffs, stage changes, commit, and switch branches — all from the UI
Session Management Resume conversations, manage multiple sessions, and track full history across devices
TaskMaster AI Optional integration for AI-powered task planning, PRD parsing, and workflow automation
MCP Support Add and configure Model Context Protocol servers through the UI
Security Controls All Claude Code tools disabled by default; granular per-tool enablement through settings
PWA Support Add to home screen on mobile for native app-like experience

Technology Stack

  • Frontend: React 18 with Vite for fast builds and hot module replacement
  • Styling: Tailwind CSS for utility-first responsive design
  • Code Editor: CodeMirror for advanced syntax highlighting and editing
  • Backend: Node.js with Express for RESTful API and static file serving
  • Real-time: WebSocket server for live chat streaming and project refresh
  • CLI Integration: Process spawning and management for Claude Code and Cursor CLI
  • Session Storage: JSONL parsing and conversation persistence
  • Process Management: PM2 for production background service operation with auto-restart
  • License: GNU General Public License v3.0 (open source)

Architecture

Claude Code UI follows a three-tier architecture that connects the browser to your local AI CLI:

+------------------+    +------------------+    +------------------+
|   Frontend       |    |   Backend        |    |  Claude CLI /    |
|   (React/Vite)   |<-->| (Express/WS)     |<-->|  Cursor CLI      |
+------------------+    +------------------+    +------------------+
                              |
                    +------------------+
                    | File System API  |
                    | Session Storage  |
                    +------------------+

The Backend layer serves as the bridge between the browser and your local development environment. It manages CLI process spawning, WebSocket connections for real-time chat streaming, JSONL session parsing for conversation persistence, and a file system API that exposes the project file tree to the browser.

The Frontend renders the responsive interface using React 18 with modern hooks and component patterns. The chat interface uses WebSocket connections for real-time streaming of AI responses, while the file explorer and git explorer use REST API calls for CRUD operations.

For production deployments, PM2 manages the server as a background service with automatic restart on failure and boot-time startup. The cloudcli status command shows the installation directory, database location, configuration, and Claude projects folder at a glance.

CLI Selection and Multi-Model Support

Users can switch between Claude Code and Cursor CLI through a selection interface, choosing whichever AI backend suits their workflow. The application supports models including Claude Sonnet 4, Opus 4.1, and GPT-5, making it a universal interface for AI-assisted development regardless of the underlying model provider.

Getting Started

The quickest path to running Claude Code UI requires just one command:

# Zero-install one-click start
npx @siteboon/claude-code-ui

# Or install globally for regular use
npm install -g @siteboon/claude-code-ui
claude-code-ui

The server starts at http://localhost:3001 and automatically discovers all Claude Code projects. For mobile access, simply navigate to the server URL from your phone and add a shortcut to your home screen for a PWA-like experience.

Conclusion

Claude Code UI transforms command-line AI coding assistants into a fully accessible, multi-device experience. By wrapping Claude Code and Cursor CLI with a responsive web interface, it removes the terminal-only constraint and opens up AI-assisted development to new workflows — monitoring sessions from your phone, editing files in-browser, managing git operations visually, and resuming conversations across devices. For teams and individuals using AI coding tools daily, it is the interface layer that makes the experience complete.