Claude Code Web Interface

A web interface for interacting with Claude AI through a terminal interface.

Features

• Real-time terminal interaction with Claude
• Support for multiple terminals
• Modern, responsive UI built with Next.js
• Mobile-friendly design
• WebSocket communication between frontend and backend
• Access from anywhere using Cloudflare Tunnels

Project Structure

• server/ - Backend server using Express and Socket.IO
• frontend/ - Next.js frontend application
• client/ - Legacy HTML/JS frontend (kept for backward compatibility)

Getting Started

Prerequisites

• Node.js 18.0.0 or later
• npm or yarn

Configuration

1. In server/.env, set your desired configuration:

   # Set your preferred working directory for terminals
   TERMINAL_CWD=/path/to/your/projects
   
   # Other optional configurations
   PORT=3000
   LOGGING=false
   NODE_ENV='production'

2. Make sure the startup scripts are executable:

   chmod +x ./start-with-cloudflare.sh
   chmod +x ./setup-cloudflare-tunnel.sh
   chmod +x ./extract-tunnel-urls.sh
   chmod +x ./stop-cloudflare-tunnel.sh

Running the Application

The easiest way to run the application is using our Cloudflare Tunnels setup, which will:

• Install all required dependencies
• Install Cloudflared if not present
• Start both frontend and backend servers
• Create secure tunnels for remote access
• Provide you with a public URL

Simply run:

./start-with-cloudflare.sh

The script will:

1. Check and install dependencies
2. Set up Cloudflare tunnels
3. Display your access URLs
4. Open the frontend URL in your default browser

To stop the application and tunnels:

./stop-cloudflare-tunnel.sh

Troubleshooting

If you don't see the tunnel URLs after startup, you can extract them manually:

npm run extract:tunnels
# or
./extract-tunnel-urls.sh

The tunnel URLs will be saved in .cloudflare/frontend_tunnel_url.txt and .cloudflare/backend_tunnel_url.txt.

Development

• Backend server code is in the server/ directory
• Next.js frontend code is in the frontend/ directory
• Legacy frontend code is in the client/ directory

License

This project is licensed under the MIT License - see the LICENSE file for details.