Claude Code Web GUI

Claude Code Web GUI

🚀 Browse, view and share your Claude Code sessions - runs entirely in browser, no server required!

English | 中文

https://github.com/user-attachments/assets/039dc640-d5fc-4c29-9bb8-a386bd1a9da8

⭐ Show your support — star the repo

Features

- Local Operation - Runs entirely in your browser without requiring software installation or server setup
- Session Browsing - Browse local Claude Code session history organized by projects
- Search & Filter - Quickly search and locate specific sessions
- Session Sharing - Share session content via direct links or GitHub Gist
- Responsive UI - Works on desktop and mobile devices
- Bilingual Support - Switch between Chinese and English interfaces

Quick Start

Online Usage (Recommended)
Visit: https://binggg.github.io/Claude-Code-Web-GUI/

Local Development

How to Use

1. Ensure you have installed and used Claude Code CLI
2. Open the app in a browser that supports File System Access API (Chrome/Edge)
3. Click "Select .claude directory" and choose the ~/.claude folder
   - Press Cmd+Shift+. (Mac) or Ctrl+H (Windows/Linux) to show hidden files
4. Browse your session history

Sharing Features

Direct Link Sharing
- Quick sharing with first 10 messages of a session
- Suitable for brief content previews

GitHub Gist Sharing
- Contains complete session content
- Supports Markdown formatting
- Recommended for sharing full sessions

Browser Compatibility

Requires modern browsers with File System Access API support:
- Chrome 86+
- Edge 86+
- Other Chromium-based browsers

Development

Prerequisites
- Node.js 16+
- Modern browser with File System Access API support

Project Structure

Adding Features
1. Create components in src/components/
2. Add business logic to src/utils/claudeCodeManager.js
3. Update translations…