Claude Code Web — Design skill for Claude Code

Claude Code Web

A browser-based WebUI interface for [Claude Code CLI](https://github.com/anthropic/claude-code) with extras like voice input, text-to-speech, drag-and-drop images, hotkeys, and a built-in todo sidebar.

Quick Start

1. **Install** (requires Node.js 18+ and Claude Code CLI set up)

   npm install -g @sunpix/claude-code-web

2. **Run**

   claude-code-web

3. Open [http://localhost:3000](http://localhost:3000) in your browser.

⚠️ No authentication mechanism. Anyone with access to the port can control your environment/computer. Run behind a firewall or proxy with auth.

---

📹 Demo Videos

https://github.com/user-attachments/assets/e787a7e3-4300-486d-bd20-4080c5ee255f

https://github.com/user-attachments/assets/418a2aba-829c-40f5-9b04-8e92eae4e8e3

(older version)

---

Configuration

Change Port

PORT=8080 claude-code-web

Serve from Subpath (reverse proxy)

APP_BASE_URL=/claude-code claude-code-web

Enable Whisper Mic Support

Requires OpenAI API key for speech-to-text:

OPENAI_API_KEY=sk_... claude-code-web

---

Screenshot