Killer Code

CUI: Claude Code Web UI

A modern web UI for Claude Code agents that allows you to access Claude Code anywhere in your browser with parallel background agents and task management.

CUI: Claude Code Web UI

⭐ GitHub: wbopan/cui (455 stars)

A modern web UI for Claude Code agents. Start the server and access Claude Code anywhere in your browser.

Highlights

  • Modern Design: Polished, responsive UI that works anywhere
  • Parallel Background Agents: Stream multiple sessions simultaneously
  • Manage Tasks: Access all your conversations and fork/resume/archive them
  • Claude Code Parity: Familiar autocompletion and interaction with CLI
  • Push Notifications: Get notified when your agents are finished
  • Dictation: Precise dictation powered by Gemini 2.5 Flash

Getting Started

  1. Ensure you're logged into Claude Code or have a valid Anthropic API key.
  2. With Node.js >= 20.19.0, start the server:
    npx cui-server
    or install it globally:
    npm install -g cui-server
  3. Open http://localhost:3001/#your-token in your browser (the token will be displayed in the cui-server command output).
  4. (Optional) Configure the settings for notifications and dictation.

Usage

Tasks

  • Start a New Task
    cui automatically scans your existing Claude Code history in ~/.claude/ and displays it on the home page, allowing you to resume any of your previous tasks. The dropdown menu in the input area shows all your previous working directories.

  • Fork a Task
    To create a branch from an existing task (only supported for tasks started from cui), navigate to the "History" tab on the home page, find the session you want to fork, and resume it with new messages.

  • Manage Tasks
    Feel free to close the page after starting a task—it will continue running in the background. When running multiple tasks (started from cui), you can check their status in the "Tasks" tab. You can also archive tasks by clicking the "Archive" button. Archived tasks remain accessible in the "Archived" tab.

Dictation

cui uses Gemini 2.5 Flash to provide highly accurate dictation, particularly effective for long sentences. To enable this feature, you'll need a Gemini API key with generous free-tier usage. Set the GOOGLE_API_KEY environment variable before starting the server. Note that using this feature will share your audio data with Google.

Notifications

You can receive push notifications when your task is finished or when Claude is waiting for your permission to use tools. Notifications are sent using ntfy. To receive them, install ntfy on any of your devices and subscribe to the topic (see settings).

Keyboard Shortcuts

More keyboard shortcuts are coming. Currently available:

  • Enter: Enter a new line
  • Command/Ctrl + Enter: Send message
  • /: List all commands
  • @: List all files in the current working directory

All inline syntaxes like /init or @file.txt are supported just like in the CLI.

Remote Access

  1. Open ~/.cui/config.json to set the server.host (0.0.0.0) and server.port. Alternatively, you can use --host and --port flags when starting the server.
  2. Ensure you use a secure auth token if accessing the server from outside your local network. The auth token is generated when you start the server and can be changed in the ~/.cui/config.json file.
  3. Recommended: Use HTTPS to access the server. You can use a reverse proxy like Caddy to set this up. On iOS, the dictation feature is only available when using HTTPS.

Configuration

All configuration and data are stored in ~/.cui/.

  • config.json - Server settings
  • session-info.json - Session metadata
  • preferences.json - User preferences

To uninstall cui, simply delete the ~/.cui/ directory and remove the package with npm uninstall -g cui-server.

Key Features

Web-Based Interface

  • Browser Access: Access Claude Code from any device with a web browser
  • Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
  • Modern UI: Clean, intuitive interface that matches modern web standards

Multi-Session Management

  • Parallel Processing: Run multiple Claude Code sessions simultaneously
  • Background Execution: Tasks continue running even when you close the browser
  • Session History: Automatically scans and displays your existing Claude Code history

Advanced Capabilities

  • Voice Dictation: Powered by Gemini 2.5 Flash for accurate speech-to-text
  • Push Notifications: Real-time alerts when tasks complete or require attention
  • Remote Access: Secure access from anywhere with proper configuration

CLI Parity

  • Familiar Commands: All CLI commands and shortcuts work in the web interface
  • File Operations: Full support for file browsing and manipulation
  • Tool Integration: Complete access to all Claude Code tools and capabilities

Use Cases

For Developers

  • Remote Development: Access Claude Code from any device or location
  • Team Collaboration: Share sessions and collaborate with team members
  • Mobile Development: Use Claude Code on tablets and mobile devices

For Teams

  • Centralized Access: Provide web-based access to Claude Code for team members
  • Session Sharing: Easily share and resume collaborative sessions
  • Monitoring: Track team usage and session activity

For Organizations

  • Enterprise Deployment: Deploy CUI on internal servers for secure access
  • User Management: Control access and permissions through configuration
  • Integration: Integrate with existing development workflows and tools

Technical Requirements

  • Node.js: >= 20.19.0
  • Claude Code: Must be installed and configured
  • Network Access: For remote access and notifications
  • Optional: Gemini API key for dictation features

Contributing

The best way to contribute is to suggest improvements or report bugs in the issues and give us a star ⭐!

Before submitting a PR, please make sure you (or your fellow AI) have read CONTRIBUTING.md.

License

Apache-2.0 license


来源和致谢

本文基于 wbopan/cui GitHub 仓库整理而成。

原作者: wbopan
原始链接: https://github.com/wbopan/cui
许可证: Apache-2.0 License

感谢 wbopan 创建了这个优秀的 Claude Code Web UI,为 AI 辅助开发提供了现代化的浏览器界面和强大的多会话管理能力。