Skip to content

Claude Code UI (CloudCLI) Setup Guide

What Is It?

Claude Code UI (rebranded as CloudCLI) is a web-based GUI that wraps around Claude Code. It provides a browser-accessible interface for managing AI agent sessions, with a file explorer, git integration, terminal, and rich chat UI. It reads directly from ~/.claude to auto-discover all existing sessions.

Why Use It?

  • Visual chat interface with markdown rendering and syntax highlighting
  • File explorer with in-browser editing (CodeMirror)
  • Git explorer — diffs, staging, commits, branch switching from the browser
  • Integrated terminal via xterm.js
  • Session management — see all active/past sessions, resume any conversation
  • Mobile access — responsive UI, usable from phone/tablet over local network
  • MCP server management — configure MCP servers through the UI

Installation

Prerequisites

  • Node.js v22+ (already available via devenv)
  • Native build tools for node-pty, better-sqlite3, bcrypt

On macOS, ensure Xcode Command Line Tools are installed: 

xcode-select --install

Option A: Quick Trial (no install)

npx @siteboon/claude-code-ui

Opens at http://localhost:3001

Option B: Global Install

npm install -g @siteboon/claude-code-ui
cloudcli

Add to devenv.nix packages if you want it always available: 

# Not recommended — native modules may conflict with Nix-managed Node.js
# Use global npm install instead

Usage

Start the Server

cloudcli                    # Default: http://localhost:3001
cloudcli --port 8080        # Custom port
cloudcli -p 3000            # Short form

Connect to Sessions

No manual connection needed — CloudCLI automatically discovers all sessions from ~/.claude. Open the browser URL and you'll see all your projects and conversations.

Other Commands

cloudcli status       # Show config and data locations
cloudcli update       # Update to latest version
cloudcli version      # Show version

Environment Variables

Variable Default Purpose
PORT 3001 Server port
DATABASE_PATH (auto) Custom SQLite database location
CLAUDE_CLI_PATH (auto) Path to Claude CLI binary
CONTEXT_WINDOW 160000 Context window size

Tips

  • Remote access: Access from any device on the same network at http://<your-ip>:3001
  • Security: All Claude Code tools are disabled by default in the UI — enable via settings (gear icon)
  • Multiple tools: Also supports Cursor CLI, OpenAI Codex, and Gemini CLI
  • Paid tier: CloudCLI Cloud ($7/month) adds team sharing, REST API, and IDE integrations

Nix Caveats

If you hit native module build failures with Nix-managed Node.js: 1. Use a system-level Node.js (/usr/local/bin/node) for CloudCLI 2. Or install via nix-env -iA nixpkgs.nodejs_22 separately from devenv 3. The issue is that node-pty and bcrypt need access to system C headers that Nix sandboxing may block