Claude Code Web Gui — Development skill for Claude Code

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

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

...