A web-based remote interface for Claude Code, Anthropic's official CLI tool. Access Claude Code from any device on your local network - run it on your development machine and interact with it from your phone, tablet, or any browser with a mobile-optimized UI.
- Real-time Streaming: See Claude's responses as they're generated via Server-Sent Events (SSE)
- Session Persistence: All conversations are stored in SQLite and synced across devices
- Session History: Browse and continue previous conversations
- Sessions Grouped by Project: Sessions are organized by working directory/project
- Tool Call Display: See which tools Claude is using (Read, Edit, Write, Bash, Glob, Grep, WebSearch, WebFetch, etc.)
- Expandable Details: View tool inputs and outputs with syntax highlighting
- Nested Sub-Agents: Task tool calls display their child tool operations hierarchically
- Code Diffs: Edit operations show visual diffs of changes
- Todo List Integration: TodoWrite tool progress is displayed in a dedicated panel
- Real-time Updates: Watch task status change from pending to in-progress to completed
- Star/Favorite Sessions: Mark important sessions for quick access
- Working Directory Picker: Choose the project directory for new sessions
- Dark/Light Theme: System-aware theming with manual toggle
- Mobile-First Design: Optimized for phone screens with touch-friendly UI
- PWA Support: Install on your home screen for an app-like experience
- iOS Keyboard Handling: Proper viewport management for mobile keyboards
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| UI | React 19, TypeScript |
| Styling | Tailwind CSS 4 |
| State Management | Zustand |
| Database | SQLite (better-sqlite3) + Drizzle ORM |
| Claude Integration | @anthropic-ai/claude-agent-sdk |
| Streaming | Server-Sent Events (SSE) |
- Node.js 18+
- Claude Code CLI installed and authenticated (
npm install -g @anthropic-ai/claude-code) - A valid Anthropic API key configured in Claude Code
-
Clone the repository:
git clone <repository-url> cd remote-cc
-
Install dependencies:
npm install
-
Initialize the database:
npm run db:push
-
Start the development server:
# For localhost only npm run dev # For network access (to use from other devices) npm run dev:network
-
Access from your phone:
- Find your machine's IP address (shown in terminal output)
- Open
http://YOUR_IP:3000on your phone - Add to home screen for an app-like experience
| Command | Description |
|---|---|
npm run dev |
Start development server (localhost only) |
npm run dev:network |
Start development server (accessible on local network) |
npm run build |
Build for production |
npm run start |
Start production server (localhost only) |
npm run start:network |
Start production server (network accessible) |
npm run db:push |
Push schema changes to database |
npm run db:studio |
Open Drizzle Studio to browse database |
npm run test |
Run tests |
npm run test:watch |
Run tests in watch mode |
npm run lint |
Run ESLint |
remote-cc/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/sessions/ # REST API endpoints
│ │ ├── sessions/ # Session list and chat pages
│ │ └── settings/ # Settings page
│ ├── components/ # React components
│ │ ├── ChatInterface.tsx # Main chat UI
│ │ ├── ChatMessage.tsx # Message rendering
│ │ ├── ToolCallDisplay.tsx # Tool visualization
│ │ ├── TodoList.tsx # Task progress tracking
│ │ ├── Sidebar.tsx # Navigation sidebar
│ │ ├── DirectoryPicker.tsx # Working directory selection
│ │ └── CodeBlock.tsx # Syntax highlighted code
│ ├── hooks/
│ │ └── useChat.ts # SSE streaming hook
│ └── lib/
│ ├── claude.ts # Claude Agent SDK wrapper
│ ├── db.ts # Database connection
│ ├── sessions.ts # Session file parsing
│ └── store.ts # Zustand state store
├── db/
│ ├── schema.ts # Drizzle ORM schema
│ └── sessions.db # SQLite database (created on first run)
└── public/
├── manifest.json # PWA manifest
└── sw.js # Service worker
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/sessions |
List all sessions |
| POST | /api/sessions |
Create a new session |
| GET | /api/sessions/[id] |
Get session with messages |
| DELETE | /api/sessions/[id] |
Archive a session |
| PATCH | /api/sessions/[id] |
Update session (star, rename) |
| POST | /api/sessions/[id]/message |
Send message (returns SSE stream) |
- No Authentication: This application is designed for trusted local networks only. Do not expose to the public internet.
- Network Binding: The
:networkscripts bind to0.0.0.0, making the server accessible to all devices on your local network. - File System Access: Claude Code has access to read and write files in the configured working directory.
- Permission Mode: Runs with
permissionMode: "acceptEdits"for a streamlined experience.
- The web interface connects to the Next.js backend via HTTP and SSE
- When you send a message, the backend invokes the Claude Agent SDK
- The SDK streams responses back, which are forwarded to the browser via SSE
- Tool calls (file reads, edits, bash commands, etc.) are executed by the SDK
- Sessions are persisted both in Claude's native format (~/.claude/projects/) and in the local SQLite database
- The UI updates in real-time as responses stream in
The interface features:
- A sidebar showing all sessions grouped by project
- A main chat area with message bubbles and tool call visualizations
- A bottom input bar with send button
- A todo panel showing task progress when using the TodoWrite tool
- Dark and light theme support
Cannot connect from phone:
- Ensure you're using
npm run dev:networkornpm run start:network - Check that both devices are on the same network
- Verify your firewall allows connections on port 3000
Claude responses not appearing:
- Verify Claude Code CLI is installed:
claude --version - Ensure you're authenticated:
claude auth - Check the terminal for error messages
Database errors:
- Run
npm run db:pushto initialize/update the schema - Delete
db/sessions.dband re-run if corrupted
See LICENSE file in repository root.