Claude Code Web GUI

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

English | 中文

1058_1752341455_raw.mp4

Tip

⭐ 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

git clone https://github.com/binggg/Claude-Code-Web-GUI.git
cd Claude-Code-Web-GUI

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

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

src/
├── components/          # React components
│   ├── Header.jsx      # Homepage header
│   ├── Sidebar.jsx     # Session browser
│   ├── MainContent.jsx # Main content area
│   └── ...             # Other components
├── hooks/              # Custom React hooks
├── utils/              # Business logic and utilities
├── styles/             # CSS styles
└── App.jsx            # Main application component

Adding Features

1. Create components in src/components/
2. Add business logic to src/utils/claudeCodeManager.js
3. Update translations in src/utils/i18n.js
4. Style with classes in src/styles/globals.css

Technical Architecture

React Version (Current)

• Frontend: React 18 with modern hooks
• Build Tool: Vite for fast development and optimized builds
• Styling: Modern CSS (Grid + Flexbox)
• File Access: File System Access API
• Data Parsing: JSONL format support
• Component Structure: Modular, reusable React components

Key Components

• Header: Homepage with actions and branding
• Sidebar: Session browser with project grouping
• MainContent: Chat message display area
• MarkdownContent: Enhanced markdown rendering with syntax highlighting
• ToolCall: Tool call visualization
• FABContainer: Floating action buttons for quick actions

Privacy Notice

This application runs entirely in your local browser and does not upload any data to remote servers. All session data is processed only on your device.

License

MIT License - see LICENSE file for details

Contributing

Issues and Pull Requests are welcome.

---

If this project helps you, please give it a ⭐ Star!