{"id":28862194,"url":"https://github.com/andrepimenta/claude-code-chat","last_synced_at":"2026-04-23T23:03:51.219Z","repository":{"id":299459337,"uuid":"1003106157","full_name":"andrepimenta/claude-code-chat","owner":"andrepimenta","description":"Beautiful Claude Code Chat Interface for VS Code","archived":false,"fork":false,"pushed_at":"2026-04-17T20:34:31.000Z","size":2258,"stargazers_count":1024,"open_issues_count":138,"forks_count":154,"subscribers_count":13,"default_branch":"main","last_synced_at":"2026-04-17T22:34:42.191Z","etag":null,"topics":["ai","ai-agents","claude","claude-code","vibe-coding","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=AndrePimenta.claude-code-chat","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andrepimenta.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-16T16:22:55.000Z","updated_at":"2026-04-17T20:32:46.000Z","dependencies_parsed_at":"2025-12-06T21:05:43.841Z","dependency_job_id":null,"html_url":"https://github.com/andrepimenta/claude-code-chat","commit_stats":null,"previous_names":["andrepimenta/claude-code-chat"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/andrepimenta/claude-code-chat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrepimenta%2Fclaude-code-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrepimenta%2Fclaude-code-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrepimenta%2Fclaude-code-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrepimenta%2Fclaude-code-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrepimenta","download_url":"https://codeload.github.com/andrepimenta/claude-code-chat/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrepimenta%2Fclaude-code-chat/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32200209,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-23T20:19:26.138Z","status":"ssl_error","status_checked_at":"2026-04-23T20:19:23.520Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","ai-agents","claude","claude-code","vibe-coding","vscode","vscode-extension"],"created_at":"2025-06-20T06:09:46.805Z","updated_at":"2026-04-23T23:03:46.209Z","avatar_url":"https://github.com/andrepimenta.png","language":"JavaScript","funding_links":[],"categories":["IDE \u0026 Editor Integrations","🧩 Extensions \u0026 Integrations","图形界面与网页界面"],"sub_categories":["🎨 IDE Extensions"],"readme":"# 🚀 Claude Code Chat - Beautiful Claude Code Chat Interface for VS Code\n\n[![VS Code Extension](https://img.shields.io/badge/VS%20Code-Extension-blue?style=for-the-badge\u0026logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=andrepimenta.claude-code-chat)\n[![Claude Code](https://img.shields.io/badge/Powered%20by-Claude%20Code-orange?style=for-the-badge)](https://claude.ai/code)\n[![TypeScript](https://img.shields.io/badge/Built%20with-TypeScript-3178C6?style=for-the-badge\u0026logo=typescript)](https://www.typescriptlang.org/)\n\n\u003e **No more terminal commands. Chat with Claude Code through a beautiful, intuitive interface right inside VS Code.**\n\nDitch 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.\n\n🤖 **Built by Claude Code for Claude Code** - This extension was entirely developed using Claude Code itself. Claude Code created its own chat interface!\n\n---\n\n## ✨ **Why Choose Claude Code Chat?**\n\n🖥️ **No Terminal Required** - Beautiful chat interface replaces command-line interactions  \n⏪ **Restore Checkpoints** - Undo changes and restore code to any previous state   \n🔌 **MCP Server Support** - Complete Model Context Protocol server management   \n💾 **Conversation History** - Automatic conversation history and session management  \n🎨 **VS Code Native** - Claude Code integrated directly into VS Code with native theming and sidebar support  \n🧠 **Plan and Thinking modes** - Plan First and configurable Thinking modes for better results  \n⚡ **Smart File/Image Context and Custom Commands** - Reference any file, paste images or screenshots and create custom commands  \n🤖 **Model Selection** - Choose between Opus, Sonnet, or Default based on your needs  \n🐧 **Windows/WSL Support** - Full native Windows and WSL support\n\n![Claude Code Chat 1 0 0](https://github.com/user-attachments/assets/5954a74c-eff7-4205-8482-6a1c9de6e102)\n\n\n---\n\n## 🌟 **Key Features**\n\n### 💬 **Beautiful Chat Graphical Interface**\n- No terminal required - everything through the UI\n- Real-time streaming responses with typing indicators\n- One-click message copying with visual feedback\n- Enhanced markdown support with syntax highlighting\n- Auto-resizing input that grows with your content\n- Copy-to-clipboard for code blocks\n\n### ⏪ **Checkpoint \u0026 Session Management**\n- **Restore Checkpoints** - Instantly undo changes and restore to any previous state\n- Automatic Git-based backup system for safe experimentation\n- Browse and restore from any conversation checkpoint\n- Automatic conversation saving and restoration\n- Real-time cost and token tracking\n- Session statistics and performance metrics\n\n### 📝 **Inline Diff Viewer** ⭐ **NEW IN V1.1**\n- **Full Diff Display** - See complete file changes directly in Edit, MultiEdit, and Write messages\n- **Open in VS Code Diff** - One-click button to open VS Code's native side-by-side diff editor\n- **Smart Truncation** - Long diffs are truncated with an expand button for better readability\n- **Syntax Highlighting** - Proper code highlighting in diff views\n- **Visual Change Indicators** - Clear green/red highlighting for additions and deletions\n\n### 🔌 **MCP Server Management** ⭐ **NEW IN V1.0**\n- **Popular Servers Gallery** - One-click installation of common MCP servers\n- **Custom Server Creation** - Build and configure your own MCP servers\n- **Server Management** - Edit, delete, enable/disable servers through UI\n- **Automatic Integration** - Seamless permissions and tool integration\n- **Cross-platform Support** - Full WSL compatibility with path conversion\n\n### 🔒 **Advanced Permissions System** ⭐ **NEW IN V1.0**\n- **Interactive Permission Dialogs** - Detailed tool information with command previews\n- **Always Allow Functionality** - Smart command pattern matching for common tools (npm, git, docker)\n- **YOLO Mode** - Skip all permission checks for power users\n- **Workspace Permissions** - Granular control over what tools can execute\n- **Real-time Permission Management** - Add/remove permissions through intuitive UI\n\n### 🖼️ **Image \u0026 Clipboard Support** ⭐ **NEW IN V1.0**\n- **Drag \u0026 Drop Images** - Simply drag images directly into the chat\n- **Clipboard Paste** - Press Ctrl+V to paste screenshots and copied images\n- **Multiple Image Selection** - Choose multiple images through VS Code's file picker\n- **Organized Storage** - Automatic organization in `.claude/claude-code-chat-images/`\n- **Format Support** - PNG, JPG, JPEG, GIF, SVG, WebP, BMP formats\n\n### 📱 **Sidebar Integration** ⭐ **NEW IN V1.0**\n- **Native VS Code Sidebar** - Full chat functionality in the sidebar panel\n- **Smart Panel Management** - Automatic switching between main and sidebar views\n- **Persistent Sessions** - State maintained across panel switches\n- **Activity Bar Integration** - Quick access from VS Code's activity bar\n\n### 📁 **Smart File Integration**\n- Type `@` to instantly search and reference workspace files\n- Image attachments via file browser and copy-paste screeshots\n- Lightning-fast file search across your entire project\n- Seamless context preservation for multi-file discussions\n\n### 🛠️ **Tool Management**\n- Visual dashboard showing all available Claude Code tools\n- Real-time tool execution with formatted results\n- Process control - start, stop, and monitor operations\n- Smart permission system for secure tool execution\n\n### 🎨 **VS Code Integration**\n- Native theming that matches your editor\n- Status bar integration with connection status\n- Activity bar panel for quick access\n- Responsive design for any screen size\n\n### 🤖 **Model Selection**\n- **Opus** - Most capable model for complex tasks requiring deep reasoning\n- **Sonnet** - Balanced model offering great performance for most use cases\n- **Default** - Uses your configured model setting\n- Model preference persists across sessions and is saved automatically\n- Easy switching via dropdown selector in the chat interface\n- Visual confirmation when switching between models\n- One-click model configuration through integrated terminal\n\n### ⚡ **Slash Commands Integration**\n- **Slash Commands Modal** - Type \"/\" to access all Claude Code commands instantly\n- **23+ Built-in Commands** - /agents, /cost, /config, /memory, /review, and more\n- **Custom Command Support** - Execute any Claude Code command with session context\n- **Session-Aware Execution** - All commands run with current conversation context\n- **Terminal Integration** - Commands open directly in VS Code terminal with WSL support\n\n### 🧠 **Advanced AI Modes**\n- **Plan First Mode** - Toggle to make Claude plan before implementing changes\n- **Thinking Mode** - Configurable intensity levels (Think, Think Hard, Think Harder, Ultrathink)\n- **Mode Toggles** - Simple switches above the text input area\n- **Intelligent Prompting** - Different prompts based on selected thinking intensity\n- **Token Awareness** - Higher thinking levels consume more tokens but provide deeper reasoning\n\n---\n\n## 🚀 **Getting Started**\n\n### Prerequisites\n- **VS Code 1.80+** - Latest version recommended\n- **Claude Code CLI** - [Install from Anthropic](https://claude.ai/code)\n- **Active Claude API or subscription** - API or Pro/Max plan\n\n### Installation\n\n1. **Install from VS Code Marketplace**\n   ```\n   ext install claude-code-chat\n   ```\n\n2. **Or install manually**\n   - Download the `.vsix` file from releases\n   - Run `code --install-extension claude-code-chat-x.x.x.vsix`\n\n3. **Open Claude Code Chat**\n   - Press `Ctrl+Shift+C` (or `Cmd+Shift+C` on Mac)\n   - Or click the Claude icon in your status bar\n   - Or use Command Palette: `Claude Code: Open Chat`\n\n---\n\n## 💡 **Usage Examples**\n\n### 🔥 **Code Review \u0026 Refactoring**\n```\nYou: @src/components/UserProfile.tsx Can you review this component and suggest improvements?\n\nClaude: I'll analyze your UserProfile component. Looking at the code, here are my recommendations:\n\n1. **Performance Optimization**: Add React.memo() to prevent unnecessary re-renders\n2. **TypeScript Enhancement**: The props interface could be more specific\n3. **Accessibility**: Missing ARIA labels for screen readers\n\n[Detailed analysis with code examples follows...]\n```\n\n### 📊 **Project Analysis**\n```\nYou: Analyze the overall architecture of my project and identify potential issues\n\nClaude: I'll examine your project structure and identify areas for improvement:\n\n🏗️ **Architecture Overview**\n- React frontend with TypeScript\n- Node.js backend with Express\n- MongoDB database layer\n\n⚠️ **Identified Issues**\n- Missing error boundaries in React components\n- Database queries lack proper indexing\n- API routes missing input validation\n\n[Detailed recommendations with implementation examples...]\n```\n\n### 🐛 **Debugging Assistant**\n```\nYou: I'm getting a strange error in my API. Here's the stack trace: [paste error]\n\nClaude: Looking at this stack trace, the issue appears to be a race condition in your async middleware. Here's what's happening:\n\n1. **Root Cause**: Multiple requests are modifying shared state\n2. **Solution**: Implement proper request isolation\n3. **Prevention**: Add comprehensive error handling\n\n[Step-by-step debugging guide follows...]\n```\n\n### ⏪ **Safe Experimentation with Checkpoints**\n```\nYou: Can you refactor this entire component to use hooks instead of class components?\n\nClaude: 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.\n\n[Creates automatic checkpoint]\n\nHere's the refactored component using hooks:\n[Shows the new implementation]\n\nIf you want to revert these changes, just click \"Restore Checkpoint\" to go back to your original code instantly.\n```\n\n---\n\n## ⚙️ **Configuration**\n\n### Keyboard Shortcuts\n| Shortcut | Action |\n|----------|--------|\n| `Ctrl+Shift+C` | Open Claude Code Chat |\n| `Enter` | Send message |\n| `@` | Open file picker |\n| `/` | Open slash commands modal |\n\n### WSL Configuration (Windows Users)\nIf you're using Claude Code through WSL (Windows Subsystem for Linux), you can configure the extension to use WSL:\n\n1. Open VS Code Settings (`Ctrl+,` or `Cmd+,`)\n2. Search for \"Claude Code Chat\"\n3. Configure these settings:\n   - **Claude Code Chat: WSL Enabled** - Enable WSL integration\n   - **Claude Code Chat: WSL Distro** - Your WSL distribution name (e.g., `Ubuntu`, `Debian`)\n   - **Claude Code Chat: WSL Node Path** - Path to Node.js in WSL (default: `/usr/bin/node`)\n   - **Claude Code Chat: WSL Claude Path** - Path to Claude in WSL (default: `/usr/local/bin/claude`)\n\nExample configuration in `settings.json`:\n```json\n{\n  \"claudeCodeChat.wsl.enabled\": true,\n  \"claudeCodeChat.wsl.distro\": \"Ubuntu\",\n  \"claudeCodeChat.wsl.nodePath\": \"/usr/bin/node\",\n  \"claudeCodeChat.wsl.claudePath\": \"/usr/local/bin/claude\"\n}\n```\n\n---\n\n## 🎯 **Pro Tips \u0026 Tricks**\n\n### 🔥 **File Context Magic**\n- Type `@` followed by your search term to quickly reference files\n- Use `@src/` to narrow down to specific directories\n- Reference multiple files in one message for cross-file analysis\n- **NEW**: Copy-paste images directly into chat for visual context\n- **NEW**: Paste screenshots with Ctrl+V for instant visual communication\n\n### ⚡ **Productivity Boosters**\n- **Creates checkpoints automatically** before changes for safe experimentation\n- **Restore instantly** if changes don't work out as expected\n- **NEW**: Permission system prevents accidental tool execution\n- **NEW**: YOLO mode for power users who want speed over safety\n- Use the stop button to cancel long-running operations\n- Copy message contents to reuse Claude's responses\n- Open history panel to reference previous conversations\n- **NEW**: Sidebar integration for multi-panel workflow\n\n### 🎨 **Interface Customization**\n- The UI automatically adapts to your VS Code theme\n- Messages are color-coded: Green for you, Blue for Claude\n- Hover over messages to reveal the copy button\n- **NEW**: Enhanced code block rendering with syntax highlighting\n- **NEW**: Copy-to-clipboard functionality for code blocks\n\n---\n\n## 🔧 **Advanced Features**\n\n### 🛠️ **Tool Integration**\nClaude Code Chat provides secure access to all Claude Code tools:\n- **Bash** - Execute shell commands with permission controls\n- **File Operations** - Read, write, and edit files\n- **Search** - Grep and glob pattern matching across workspace\n- **Web** - Fetch and search web content\n- **Multi-edit** - Batch file modifications\n- **MCP Servers** - Extend functionality with Model Context Protocol servers\n- **Permissions System** - Granular control over tool execution for security\n\n### 📊 **Analytics \u0026 Monitoring**\n- **Real-time cost tracking** - Monitor your API usage\n- **Token consumption** - See input/output token counts\n- **Response timing** - Track performance metrics\n- **Session statistics** - Comprehensive usage analytics\n\n### ⏪ **Checkpoint System**\n- **Instant restoration** - One-click restore to any previous state\n- **Conversation checkpoints** - Every change creates a restore point\n- **Visual timeline** - See and navigate through all your project states\n\n### 🔄 **Conversation History**\n- **Automatic saving** - Every conversation is preserved\n- **Smart restoration** - Resume exactly where you left off\n- **Switch between chats** - Easily check and switch to previous conversations\n\n---\n\n## 🤝 **Contributing**\n\nWe welcome contributions! Here's how you can help:\n\n1. **🐛 Report Bugs** - Use our issue tracker\n2. **💡 Suggest Features** - Share your ideas\n3. **🔧 Submit PRs** - Help us improve the codebase\n4. **📚 Improve Docs** - Make the documentation better\n\n### Development Setup\n```bash\ngit clone https://github.com/andrepimenta/claude-code-chat\ncd claude-code-chat\nnpm install\n\nClick \"F5\" to run the extension or access the \"Run and Debug\" section in VSCode\n```\n\n---\n\n## 📝 **License**\n\nSee the [LICENSE](LICENSE) file for details.\n\n---\n\n## 🙏 **Acknowledgments**\n\n- **Anthropic** - For creating the amazing Claude AI and more specifically the Claude Code SDK\n- **VS Code Team** - For the incredible extension platform\n- **Our Community** - For feedback, suggestions, and contributions\n\n---\n\n## 📞 **Support**\n\nNeed help? We've got you covered:\n\n- 🐛 **Issues**: [GitHub Issues](https://github.com/andrepimenta/claude-code-chat/issues)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**⭐ Star us on GitHub if this project helped you!**\n\n[**Download Now**](https://marketplace.visualstudio.com/items?itemName=andrepimenta.claude-code-chat)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrepimenta%2Fclaude-code-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrepimenta%2Fclaude-code-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrepimenta%2Fclaude-code-chat/lists"}