🚀 Claude Code Chat - Beautiful Claude Code Chat Interface for VS Code

No more terminal commands. Chat with Claude Code through a beautiful, intuitive interface right inside VS Code.

Ditch the command line and experience Claude Code like never before. This extension brings a stunning chat interface directly into your editor, making AI assistance accessible, visual, and enjoyable.

🤖 Built by Claude Code for Claude Code - This extension was entirely developed using Claude Code itself. Claude Code created its own chat interface!

✨ Why Choose Claude Code Chat?

🖥️ No Terminal Required - Beautiful chat interface replaces command-line interactions
⏪ Restore Checkpoints - Undo changes and restore code to any previous state
🔌 MCP Server Support - Complete Model Context Protocol server management
💾 Conversation History - Automatic conversation history and session management
🎨 VS Code Native - Claude Code integrated directly into VS Code with native theming and sidebar support
🧠 Plan and Thinking modes - Plan First and configurable Thinking modes for better results
⚡ Smart File/Image Context and Custom Commands - Reference any file, paste images or screenshots and create custom commands
🤖 Model Selection - Choose between Opus, Sonnet, or Default based on your needs
🐧 Windows/WSL Support - Full native Windows and WSL support

🌟 Key Features

💬 Beautiful Chat Graphical Interface

• No terminal required - everything through the UI
• Real-time streaming responses with typing indicators
• One-click message copying with visual feedback
• Enhanced markdown support with syntax highlighting
• Auto-resizing input that grows with your content
• Copy-to-clipboard for code blocks

⏪ Checkpoint & Session Management

• Restore Checkpoints - Instantly undo changes and restore to any previous state
• Automatic Git-based backup system for safe experimentation
• Browse and restore from any conversation checkpoint
• Automatic conversation saving and restoration
• Real-time cost and token tracking
• Session statistics and performance metrics

📝 Inline Diff Viewer ⭐ NEW IN V1.1

• Full Diff Display - See complete file changes directly in Edit, MultiEdit, and Write messages
• Open in VS Code Diff - One-click button to open VS Code's native side-by-side diff editor
• Smart Truncation - Long diffs are truncated with an expand button for better readability
• Syntax Highlighting - Proper code highlighting in diff views
• Visual Change Indicators - Clear green/red highlighting for additions and deletions

🔌 MCP Server Management ⭐ NEW IN V1.0

• Popular Servers Gallery - One-click installation of common MCP servers
• Custom Server Creation - Build and configure your own MCP servers
• Server Management - Edit, delete, enable/disable servers through UI
• Automatic Integration - Seamless permissions and tool integration
• Cross-platform Support - Full WSL compatibility with path conversion

🔒 Advanced Permissions System ⭐ NEW IN V1.0

• Interactive Permission Dialogs - Detailed tool information with command previews
• Always Allow Functionality - Smart command pattern matching for common tools (npm, git, docker)
• YOLO Mode - Skip all permission checks for power users
• Workspace Permissions - Granular control over what tools can execute
• Real-time Permission Management - Add/remove permissions through intuitive UI

🖼️ Image & Clipboard Support ⭐ NEW IN V1.0

• Drag & Drop Images - Simply drag images directly into the chat
• Clipboard Paste - Press Ctrl+V to paste screenshots and copied images
• Multiple Image Selection - Choose multiple images through VS Code's file picker
• Organized Storage - Automatic organization in .claude/claude-code-chat-images/
• Format Support - PNG, JPG, JPEG, GIF, SVG, WebP, BMP formats

📱 Sidebar Integration ⭐ NEW IN V1.0

• Native VS Code Sidebar - Full chat functionality in the sidebar panel
• Smart Panel Management - Automatic switching between main and sidebar views
• Persistent Sessions - State maintained across panel switches
• Activity Bar Integration - Quick access from VS Code's activity bar

📁 Smart File Integration

• Type @ to instantly search and reference workspace files
• Image attachments via file browser and copy-paste screeshots
• Lightning-fast file search across your entire project
• Seamless context preservation for multi-file discussions

🛠️ Tool Management

• Visual dashboard showing all available Claude Code tools
• Real-time tool execution with formatted results
• Process control - start, stop, and monitor operations
• Smart permission system for secure tool execution

🎨 VS Code Integration

• Native theming that matches your editor
• Status bar integration with connection status
• Activity bar panel for quick access
• Responsive design for any screen size

🤖 Model Selection

• Opus - Most capable model for complex tasks requiring deep reasoning
• Sonnet - Balanced model offering great performance for most use cases
• Default - Uses your configured model setting
• Model preference persists across sessions and is saved automatically
• Easy switching via dropdown selector in the chat interface
• Visual confirmation when switching between models
• One-click model configuration through integrated terminal

⚡ Slash Commands Integration

• Slash Commands Modal - Type "/" to access all Claude Code commands instantly
• 23+ Built-in Commands - /agents, /cost, /config, /memory, /review, and more
• Custom Command Support - Execute any Claude Code command with session context
• Session-Aware Execution - All commands run with current conversation context
• Terminal Integration - Commands open directly in VS Code terminal with WSL support

🧠 Advanced AI Modes

• Plan First Mode - Toggle to make Claude plan before implementing changes
• Thinking Mode - Configurable intensity levels (Think, Think Hard, Think Harder, Ultrathink)
• Mode Toggles - Simple switches above the text input area
• Intelligent Prompting - Different prompts based on selected thinking intensity
• Token Awareness - Higher thinking levels consume more tokens but provide deeper reasoning

🚀 Getting Started

Prerequisites

• VS Code 1.80+ - Latest version recommended
• Claude Code CLI - Install from Anthropic
• Active Claude API or subscription - API or Pro/Max plan

Installation

1. Install from VS Code Marketplace

   ext install claude-code-chat
   

2. Or install manually

   • Download the .vsix file from releases
   • Run code --install-extension claude-code-chat-x.x.x.vsix

3. Open Claude Code Chat

   • Press Ctrl+Shift+C (or Cmd+Shift+C on Mac)
   • Or click the Claude icon in your status bar
   • Or use Command Palette: Claude Code: Open Chat

💡 Usage Examples

🔥 Code Review & Refactoring

You: @src/components/UserProfile.tsx Can you review this component and suggest improvements?

Claude: I'll analyze your UserProfile component. Looking at the code, here are my recommendations:

1. **Performance Optimization**: Add React.memo() to prevent unnecessary re-renders
2. **TypeScript Enhancement**: The props interface could be more specific
3. **Accessibility**: Missing ARIA labels for screen readers

[Detailed analysis with code examples follows...]

📊 Project Analysis

You: Analyze the overall architecture of my project and identify potential issues

Claude: I'll examine your project structure and identify areas for improvement:

🏗️ **Architecture Overview**
- React frontend with TypeScript
- Node.js backend with Express
- MongoDB database layer

⚠️ **Identified Issues**
- Missing error boundaries in React components
- Database queries lack proper indexing
- API routes missing input validation

[Detailed recommendations with implementation examples...]

🐛 Debugging Assistant

You: I'm getting a strange error in my API. Here's the stack trace: [paste error]

Claude: Looking at this stack trace, the issue appears to be a race condition in your async middleware. Here's what's happening:

1. **Root Cause**: Multiple requests are modifying shared state
2. **Solution**: Implement proper request isolation
3. **Prevention**: Add comprehensive error handling

[Step-by-step debugging guide follows...]

⏪ Safe Experimentation with Checkpoints

You: Can you refactor this entire component to use hooks instead of class components?

Claude: I'll refactor your component to use React hooks. Don't worry - I'll create a checkpoint first so you can easily restore if needed.

[Creates automatic checkpoint]

Here's the refactored component using hooks:
[Shows the new implementation]

If you want to revert these changes, just click "Restore Checkpoint" to go back to your original code instantly.

⚙️ Configuration

Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Ctrl+Shift+C | Open Claude Code Chat | | Enter | Send message | | @ | Open file picker | | / | Open slash commands modal |

WSL Configuration (Windo