Claude Code GUI

🚀 A stunning, modern AI-powered chat interface for Claude Code CLI

Features • Installation • Quick Start • Configuration • Contributing

✨ Why Claude Code GUI?

You deserve to see what's happening. When you can watch Claude work in real-time, you're not just trusting — you're understanding. This extension gives you a front-row seat to AI-powered coding.

Transform your VS Code into a powerful AI coding companion. Claude Code GUI brings the intelligence of Anthropic's Claude directly into your editor with a beautiful, modern interface designed for developers who demand excellence.

💡 Built for productivity — Real-time streaming, keyboard shortcuts, and seamless VS Code integration make coding with AI feel natural.

🎯 Why Should You Install This?

🎯 Features

🗨️ Intelligent Chat Experience

• Real-time Streaming — Watch responses appear as Claude thinks
• Rich Markdown — Full GitHub-flavored markdown with syntax highlighting
• Code Blocks — Beautiful syntax highlighting with one-click copy
• Session Persistence — Your conversations survive restarts

🛠️ Powerful Tool Visualization

• Tool Use Cards — See exactly what Claude is doing
• Diff Viewer — Side-by-side and unified views for file changes
• Todo Tracking — Visual progress for multi-step tasks
• File Attachments — Upload files and images directly

🧠 Advanced AI Modes

🔐 Smart Permission System

• Permission Modal — Review and approve operations
• YOLO Mode — Speed through trusted operations
• Auto-approve Patterns — Configure what gets approved automatically

🌐 Model Context Protocol (MCP)

• Connect to MCP servers for extended capabilities
• Real-time server status monitoring
• Automatic tool discovery

📥 Installation

From VS Code Marketplace

1. Open VS Code
2. Press Ctrl+Shift+X (or Cmd+Shift+X on macOS)
3. Search for "Claude Code GUI"
4. Click Install

For Cursor & other VS Code forks (VSIX)

1. Download the latest .vsix from the GitHub Releases page:
   https://github.com/MaheshKok/claude-code-gui-vscode/releases/latest
2. Open Cursor (or your VS Code fork)
3. Open Extensions → ... menu → Install from VSIX
4. Select the downloaded .vsix file

Prerequisites

Before using Claude Code GUI, ensure you have:

# Install Claude Code CLI
npm install -g @anthropic-ai/claude-code

# Authenticate with Anthropic
claude auth login

⚠️ Requires: VS Code 1.94+ and Node.js 22+

🚀 Quick Start

Open the Chat

Your First Message

1. Type your question or paste code
2. Press Enter to send
3. Watch Claude respond in real-time! ✨

Right-Click Magic

Select any code in your editor and right-click to:

• 📝 Explain Code — Get a detailed explanation
• 🔧 Refactor — Improve code quality
• 🧪 Generate Tests — Create unit tests
• 🐛 Fix Error — Debug issues fast

⚙️ Configuration

Access settings via Gear icon in chat header or Ctrl+, → search "Claude Code GUI"

Essential Settings

WSL Users (Windows)

{
    "claudeCodeGui.wsl.enabled": true,
    "claudeCodeGui.wsl.distro": "Ubuntu"
}

🎨 User Interface

🛠️ Development

Setup

# Clone the repository
git clone https://github.com/MaheshKok/claude-code-gui-vscode.git
cd claude-code-gui-vscode

# Install dependencies
npm install

# Start development
npm run dev

Available Commands

Project Architecture

📦 claude-code-gui/
├── 📂 src/
│   ├── 📂 extension/      # VS Code extension core
│   │   ├── services/      # Claude, MCP, Permissions
│   │   └── webview/       # Panel providers
│   ├── 📂 webview/        # React application
│   │   ├── components/    # UI components
│   │   ├── hooks/         # Custom hooks
│   │   ├── stores/        # Zustand stores
│   │   └── types/         # TypeScript types
│   └── 📂 shared/         # Shared utilities
├── 📂 assets/             # Icons & images
└── 📂 dist/               # Build output

🤝 Contributing

Contributions are welcome! Here's how to get started:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing)
5. Open a Pull Request

Code Standards

• ✅ TypeScript for all code
• ✅ ESLint + Prettier formatting
• ✅ Tests for new features
• ✅ Descriptive commit messages

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

🙏 Acknowledgments

Made with ❤️ by Mahesh Kokare

Report Bug • Request Feature • Discussions

⭐ Star this repo if you find it useful!