npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

claude-code-web

v3.4.0

Published

Web-based interface for Claude Code CLI accessible via browser

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

vultukvultuk

Keywords

claudeclaude-codewebterminalbrowserremoteai

Readme

Claude Code Web Interface

A web-based interface for Claude Code CLI that can be accessed from any browser. This package allows you to run Claude Code in a terminal-like environment through your web browser, with real-time streaming and full interactivity.

Requirements

  • Node.js >= 16
  • Claude/Code CLI installed and available on PATH
  • Modern browser with WebSocket support

⚠️ Authentication is now Required by Default

Breaking Change: Starting with v2.0.0, authentication is enabled by default for security. When you start the server, it will automatically generate a random token that you'll need to access the interface.

Quick Start: Just run the command and copy the displayed token:

npx claude-code-web
# Look for: "Generated random authentication token: Xr9kM2nQ7w"

Migration: If you need the old behavior (no authentication), use --disable-auth:

npx claude-code-web --disable-auth

Features

  • 🌐 Web-based terminal - Access Claude Code from any browser
  • 🚀 Real-time streaming - Live output with WebSocket communication
  • 🎨 Terminal emulation - Full ANSI color support and terminal features
  • 🔐 Authentication - Secure by default with automatic token generation
  • 📱 Responsive design - Works on desktop and mobile
  • ⚡ NPX support - Run anywhere with npx claude-code-web
  • 🎛️ Customizable - Adjustable font size, themes, and settings
  • 🔄 Multi-Session Support - Create and manage multiple persistent Claude sessions
  • 🌍 Multi-Browser Access - Connect to the same session from different browsers/devices
  • 💾 Session Persistence - Sessions remain active even when disconnecting
  • 📜 Output Buffering - Reconnect and see previous output from your session
  • 🔀 VS Code-Style Split View - Drag tabs to create side-by-side terminals for different sessions

Installation

Global Installation

npm install -g claude-code-web

NPX (No installation required)

npx claude-code-web

Local Development (from source)

git clone <repository>
cd claude-code-web
npm install
npm run dev            # starts with debug logging

Usage

Basic Usage

# Start with default settings (port 32352, max20 plan, auto-generated auth token)
npx claude-code-web

# Specify a subscription plan
npx claude-code-web --plan pro    # 19k tokens, $18 limit
npx claude-code-web --plan max5   # 88k tokens, $35 limit  
npx claude-code-web --plan max20  # 220k tokens, $140 limit (default)

# Specify a custom port
npx claude-code-web --port 8080

# Don't automatically open browser
npx claude-code-web --no-open

Authentication Options

# Default: Auto-generates a random 10-character token (RECOMMENDED)
npx claude-code-web
# Output will show: "Generated random authentication token: Xr9kM2nQ7w"

# Use a custom authentication token
npx claude-code-web --auth your-secret-token

# Disable authentication entirely (NOT recommended for production)
npx claude-code-web --disable-auth

# Access with token in URL: http://localhost:32352/?token=your-token

HTTPS Support

# Enable HTTPS (requires SSL certificate files)
npx claude-code-web --https --cert /path/to/cert.pem --key /path/to/key.pem

Development Mode

# Enable additional logging and debugging
npx claude-code-web --dev

### Assistant Aliases

You can customize how the assistants are labeled in the UI (for example, to display "Alice" instead of "Claude" or "R2" instead of "Codex").

- Flags:
  - `--claude-alias <name>`: Set the display name for Claude (default: env `CLAUDE_ALIAS` or "Claude").
  - `--codex-alias <name>`: Set the display name for Codex (default: env `CODEX_ALIAS` or "Codex").

Examples:

npx claude-code-web --claude-alias Alice --codex-alias R2


Or via environment variables:

export CLAUDE_ALIAS=Alice export CODEX_ALIAS=R2 npx claude-code-web


These aliases are for display purposes only; they do not change which underlying CLI is launched.

Running from source

# Start the server with defaults
npm start            # equivalent to: node bin/cc-web.js

# Start in dev mode with verbose logs
npm run dev          # equivalent to: node bin/cc-web.js --dev

# Run on a custom port
node bin/cc-web.js --port 8080

# Provide an auth token
node bin/cc-web.js --auth YOUR_TOKEN

Multi-Session Features

Creating and Managing Sessions

  • Session Dropdown: Click "Sessions" in the header to view all active sessions
  • New Session: Create named sessions with custom working directories
  • Join Session: Connect to any existing session from any browser
  • Leave Session: Disconnect without stopping the Claude process
  • Delete Session: Stop Claude and remove the session

Session Persistence

  • Sessions remain active even after all browsers disconnect
  • Reconnect from any device using the same server
  • Output history preserved (last 1000 lines)
  • Multiple users can connect to the same session simultaneously

Use Cases

  • Remote Work: Start a session at work, continue from home
  • Collaboration: Share a session with team members
  • Device Switching: Move between desktop and mobile seamlessly
  • Recovery: Never lose work due to connection issues

Command Line Options

| Option | Description | Default | |--------|-------------|---------| | -p, --port <number> | Server port | 32352 | | --no-open | Don't automatically open browser | false | | --auth <token> | Custom authentication token | auto-generated | | --disable-auth | Disable authentication (not recommended) | false | | --https | Enable HTTPS | false | | --cert <path> | SSL certificate file path | none | | --key <path> | SSL private key file path | none | | --dev | Development mode with extra logging | false | | --plan <type> | Subscription plan (pro, max5, max20) | max20 |

How It Works

  1. Claude Code Bridge - Spawns and manages Claude Code processes using node-pty
  2. WebSocket Communication - Real-time bidirectional communication between browser and CLI
  3. Terminal Emulation - Uses xterm.js for full terminal experience with ANSI colors
  4. Process Management - Handles multiple sessions, process lifecycle, and cleanup
  5. Session Persistence - Automatically saves and restores sessions across server restarts
  6. Folder Mode - Browse and select working directories through the web interface
  7. Security - Optional authentication and rate limiting for production use

API Endpoints

REST API

  • GET / - Web interface
  • GET /api/health - Server health status
  • GET /api/config - Get server configuration
  • GET /api/sessions/list - List all active Claude sessions
  • GET /api/sessions/persistence - Get session persistence info
  • POST /api/sessions/create - Create a new session
  • GET /api/sessions/:sessionId - Get session details
  • DELETE /api/sessions/:sessionId - Delete a session
  • GET /api/folders - List available folders (folder mode)
  • POST /api/folders/select - Select working directory
  • POST /api/set-working-dir - Set working directory
  • POST /api/create-folder - Create new folder
  • POST /api/close-session - Close a session

WebSocket Events

  • create_session - Create a new Claude session
  • join_session - Join an existing session
  • leave_session - Leave current session
  • start_claude - Start Claude Code in current session
  • input - Send input to Claude Code
  • resize - Resize terminal
  • stop - Stop Claude Code session
  • ping/pong - Heartbeat

Security Considerations

Authentication (Enabled by Default)

Claude Code Web now requires authentication by default for security:

Default Behavior: Automatically generates a secure 10-character random token

npx claude-code-web
# Output: "Generated random authentication token: Xr9kM2nQ7w"

Custom Token: Specify your own token

npx claude-code-web --auth my-secure-token-123

Disable Authentication: Only for development (not recommended)

npx claude-code-web --disable-auth

Clients must provide the token either:

  • In the Authorization header: Bearer your-token
  • As a query parameter: ?token=your-token
  • Through the web login prompt when accessing the interface

Rate Limiting

Built-in rate limiting prevents abuse:

  • 100 requests per minute per IP by default
  • Configurable limits for production environments

Production Security Setup

For production use, combine HTTPS with authentication:

# Recommended: Auto-generated token with HTTPS
npx claude-code-web --https --cert cert.pem --key key.pem

# Alternative: Custom token with HTTPS
npx claude-code-web --https --cert cert.pem --key key.pem --auth $(openssl rand -hex 32)

Security Features

  • Default Authentication: Automatic token generation prevents unauthorized access
  • Secure Token Display: Generated tokens are highlighted in the console for easy copying
  • Session Security: Each session requires proper authentication
  • WebSocket Protection: Authentication extends to WebSocket connections
  • Warning System: Clear warnings when authentication is disabled

Development

Local Development

Use the commands above under "Local Development (from source)" and "Running from source". Ensure the Claude CLI is installed and on your PATH.

File Structure

claude-code-web/
├── bin/cc-web.js          # CLI entry point
├── src/
│   ├── server.js          # Express server + WebSocket
│   ├── claude-bridge.js   # Claude Code process management  
│   ├── utils/
│   │   ├── auth.js        # Authentication utilities
│   │   └── session-store.js # Session persistence
│   └── public/            # Web interface files
│       ├── index.html     # Main HTML
│       ├── app.js         # Frontend JavaScript
│       ├── auth.js        # Client-side authentication
│       ├── session-manager.js # Session management UI
│       ├── plan-detector.js # Plan mode detection
│       └── style.css      # Styling
└── package.json

Testing

  • Framework: Mocha with Node's assert
  • Location: tests under test/*.test.js
  • Run tests: npm test
  • Guidelines: write fast, isolated unit tests; avoid network and real CLI calls—mock process spawns where possible.

Browser Compatibility

  • Chrome/Chromium 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

Troubleshooting

Claude Code Not Found

Ensure Claude Code is installed and accessible:

which claude
# or
claude --version

Connection Issues

  • Check firewall settings for the specified port
  • Verify Claude Code is properly installed
  • Try running with --dev flag for detailed logs

Permission Issues

  • Ensure the process has permission to spawn child processes
  • Check file system permissions for the working directory

License

MIT — see the LICENSE file.

Contributing

Contributions welcome! See CONTRIBUTING for guidelines on development, testing, and pull requests.

Support

For issues and feature requests, please use the GitHub issue tracker.