https://github.com/binggg/Claude-Code-Web-GUI
A simple and practical Claude Code session browser that runs entirely in your browser with no server required.
https://github.com/binggg/Claude-Code-Web-GUI
ai claude claudecode code gui
Last synced: 2 months ago
JSON representation
A simple and practical Claude Code session browser that runs entirely in your browser with no server required.
- Host: GitHub
- URL: https://github.com/binggg/Claude-Code-Web-GUI
- Owner: binggg
- License: mit
- Created: 2025-07-12T08:48:18.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-07-12T12:19:38.000Z (3 months ago)
- Last Synced: 2025-07-12T14:31:11.556Z (3 months ago)
- Topics: ai, claude, claudecode, code, gui
- Language: JavaScript
- Homepage: https://binggg.github.io/Claude-Code-Web-GUI/
- Size: 59.6 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-claude-code - Claude-Code-Web-GUI - Code-Web-GUI) | 在浏览器中浏览和查看 Claude Code 会话历史 | 会话历史查看器| (GUI 和 Web 界面)
- awesome-claude-code - **Claude-Code-Web-GUI** - runs entirely in browser, no server required! (GUIs & Web UIs)
README
#
# Claude Code Web GUI
[](https://github.com/binggg/Claude-Code-Web-GUI/stargazers)
[](https://github.com/binggg/Claude-Code-Web-GUI/network)
[](https://github.com/binggg/Claude-Code-Web-GUI/issues)
[](https://github.com/binggg/Claude-Code-Web-GUI/blob/main/LICENSE)
[](https://binggg.github.io/Claude-Code-Web-GUI/)
🚀 Browse, view and share your Claude Code sessions - runs entirely in browser, no server required!
English | [中文](README_ZH.md)
https://github.com/user-attachments/assets/039dc640-d5fc-4c29-9bb8-a386bd1a9da8
> [!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
```bash
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](https://docs.anthropic.com/en/docs/claude-code)
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](LICENSE) file for details
## Contributing
Issues and Pull Requests are welcome.
---
If this project helps you, please give it a ⭐ Star!