ClaudeCode_Screenshot for Windows (v0.2.5)

Advanced VS Code extension for Claude AI integration with screenshot support and comprehensive development features.

🎯 Key Features

Core Functionality

• 💬 Interactive Chat Interface: Powerful sidebar panel for seamless Claude conversations
• 🖼️ Screenshot & Image Support: Capture screenshots or paste images directly from clipboard (Ctrl+V)
• 🔄 Dual Mode Architecture:
  • API Mode: Direct integration with Claude API for fast responses
  • CLI Mode: Full integration with Claude Code CLI for advanced features

Development Tools

• 📝 Smart Message History: Searchable conversation history with export options
• 🔧 MCP Configuration: View and edit MCP (Model Context Protocol) configuration files
• 📋 CLAUDE.md Integration: Direct editing of project-specific AI instructions (global & local)
• 🎯 Custom Command Buttons: Configurable quick-action buttons with delete functionality
• 🐛 Debug Panel: Real-time debugging for extension, webview, terminal, CLI, and MCP

User Experience

• 🌐 Internationalization: Full support for English and Korean languages
• 🚀 Multi-Launch Options: Normal and bypass permission modes for Claude CLI
• 🔍 Smart CLI Detection: Automatic detection and switching between API and CLI modes
• ⚡ Performance Optimized: Efficient resource usage with lazy loading

📦 Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "ClaudeCode_Screenshot"
4. Click Install

From VSIX file

1. Download the .vsix file from Releases
2. Open VS Code
3. Press Ctrl+Shift+P
4. Type "Extensions: Install from VSIX..."
5. Select the downloaded .vsix file

Development Setup

# Clone the repository
git clone https://github.com/shandylee/claude-vscode
cd claude_vscode

# Install dependencies
npm install

# Build webview UI
cd webview-ui
npm install
npm run build
cd ..

# Compile TypeScript
npm run compile

# Run in development mode
# Press F5 in VS Code

🚀 Getting Started

Initial Setup

1. Click the Claude icon in the Activity Bar (left sidebar)
2. Choose your preferred mode:
   • API Mode: Enter your Claude API key in settings
   • CLI Mode: Install Claude CLI and the extension will auto-detect it

API Mode Setup

1. Get your API key from Anthropic Console
2. Open VS Code settings (Ctrl+,)
3. Search for "claudecode-screenshot.apiKey"
4. Enter your API key

CLI Mode Setup

1. Install Claude CLI:

   npm install -g @anthropic-ai/claude-cli
   

2. The extension will automatically detect and prompt to switch to CLI mode
3. Or manually enable in settings: claudecode-screenshot.useCLI

💡 Usage Guide

Sending Messages

• Type your message in the input area
• Press Enter or click Send button
• Paste images directly from clipboard (Ctrl+V)
• Use custom command buttons for quick prompts
• Delete unwanted command buttons with the × button

Working with Images

• Screenshot: Use system screenshot tools, then paste
• Clipboard: Copy any image and paste directly
• Drag & Drop: Coming soon!

MCP Configuration

1. Click "Settings" in the panel
2. View MCP configuration with "View Config File"
3. Install MCP servers manually via VS Code command

CLAUDE.md Files

• Global: ~/.claude/CLAUDE.md - User-wide instructions
• Local: ./CLAUDE.md - Project-specific instructions
• Access via Settings → Environment Settings

⚙️ Configuration

Access settings through VS Code settings (Ctrl+,) and search for "ClaudeCode_Screenshot":

⌨️ Keyboard Shortcuts

• Ctrl+Alt+R (Mac: Cmd+Alt+R): Reload Claude Assistant
• Ctrl+V: Paste image from clipboard

📋 Commands

All commands are accessible via Command Palette (Ctrl+Shift+P):

• Claude: Show Panel - Open ClaudeCode Screenshot panel
• Claude: Reload - Reload the extension
• Claude: Open Terminal CLI (Normal) - Launch Claude CLI with standard permissions
• Claude: Open Terminal CLI (Bypass Permissions) - Launch Claude CLI with elevated permissions
• Claude: Run with Prompt - Execute Claude with a custom prompt
• Claude: Manage MCP Servers - Open MCP server management interface
• Claude: Install MCP Server Globally - Install MCP servers with global scope
• Claude: Sync MCP Servers Configuration - Synchronize MCP server settings
• Claude: Check MCP Server Status - View current MCP server status
• Claude: Initialize MCP Servers - Set up MCP servers for first use
• Claude: Open MCP Config File - Direct access to MCP configuration
• Claude: Debug Terminal Message - Debug terminal communication issues

🔧 Troubleshooting

Extension not appearing

• Reload VS Code window: Ctrl+Shift+P → "Developer: Reload Window"
• Check Activity Bar for Claude icon
• Verify installation in Extensions view

CLI mode not working

• Ensure Claude CLI is installed: claude --version
• Check terminal permissions
• Try creating a Claude terminal manually first

Image paste not working

• Ensure clipboard contains an image
• Try copying the image again
• Check Debug Panel for errors
• On Windows: Use Win+Shift+S for screenshots

🛡️ Privacy & Security

• API keys are stored securely in VS Code's secret storage
• Images are temporarily saved and auto-deleted after use
• All conversations are stored locally
• No telemetry or usage data is collected

📋 Requirements

• VS Code 1.85.0 or higher
• Node.js 16 or higher
• Windows 10/11 (optimized for Windows)
• Claude API key (for API mode) or Claude CLI (for CLI mode)

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

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

📄 License

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

📞 Support & Contact

• Bug Reports & Feature Requests: GitHub Issues
• GitHub Repository: https://github.com/shandylee/claude-vscode
• Publisher: shandylee
• VS Code Marketplace: ClaudeCode_Screenshot

🙏 Acknowledgments

• Anthropic for Claude AI and Claude Code CLI
• VS Code team for the excellent extension API
• All contributors and users for their feedback and support

🇰🇷 한국어 문서