Claude Code Image Support - VS Code Extension

A VS Code extension that adds image support to Claude Code, enabling you to paste, drag-drop, and attach images directly in your Claude conversations.

🚀 Features

Image Support

• 📎 File Attachment: Click the attachment button to select images
• 🖱️ Drag & Drop: Drag images directly into the chat input
• ⌨️ Clipboard Paste: Paste images using OS-native shortcuts (Cmd+V on Mac, Ctrl+V on Windows)

Format Support

• PNG, JPG, JPEG, GIF, WebP, BMP
• Configurable file size limits (default: 10MB)
• Image preview before sending

OS Integration

• Mac: Cmd+V for paste, Cmd+Shift+C to open chat
• Windows/Linux: Ctrl+V for paste, Ctrl+Shift+C to open chat
• Dynamic UI that shows correct shortcuts for your OS

Claude Code Integration

• Seamless integration with Claude Code CLI
• Saves images to temp files and passes them to Claude Code
• Automatic cleanup of temporary files

📦 Installation

Option 1: Install from VSIX

code --install-extension claude-code-image-support-1.0.0.vsix

Option 2: Development Mode

1. Clone this repository
2. Open in VS Code
3. Press F5 to run in Extension Development Host

🎯 Usage

1. Open Claude Chat: Press Cmd+Shift+C (Mac) or Ctrl+Shift+C (Windows/Linux)
2. Add Images:
   • Click the 📎 button to select files
   • Drag & drop images into the text area
   • Copy/paste images from clipboard or browser
3. Send Message: Type your message and click Send or press Cmd/Ctrl+Enter

⚙️ Configuration

Access settings via VS Code Preferences:

• claude-code-image-support.imageSupport.enabled: Enable/disable image support
• claude-code-image-support.imageSupport.maxSize: Maximum image size in MB (default: 10)
• claude-code-image-support.imageSupport.supportedFormats: Supported image formats
• claude-code-image-support.imageSupport.showPreview: Show image preview before sending

🔧 Requirements

• VS Code 1.74.0 or higher
• Claude Code CLI installed and accessible in PATH
• Node.js and npm (for development)

📝 Development

Building

npm install
npm run compile

Packaging

npm install -g vsce
npx vsce package

Testing

npm test

🎨 Features in Detail

Multi-Platform Support

The extension automatically detects your operating system and adjusts:

• Keyboard shortcuts in UI hints
• Paste event handling
• File path management

Image Processing Pipeline

1. Capture: Detects images from paste, drag-drop, or file selection
2. Validate: Checks format and size against configuration
3. Process: Converts to base64 and saves to temporary files
4. Transmit: Passes image paths to Claude Code CLI
5. Cleanup: Automatically removes temporary files

Error Handling

• Comprehensive error messages for unsupported formats
• Size limit warnings with current file size
• Fallback instructions if CLI communication fails
• Debug logging for troubleshooting

🐛 Troubleshooting

Debug Mode

1. Open VS Code Developer Tools (Help → Toggle Developer Tools)
2. Go to Console tab
3. Try pasting an image and check for debug output

Common Issues

• Image not pasting: Check browser permissions and image format
• Large file errors: Adjust maxSize setting or compress image
• CLI errors: Ensure Claude Code is properly installed and in PATH

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

MIT License - see LICENSE file for details

🙏 Acknowledgments

• Built for Claude Code by Anthropic
• Inspired by the need for native image support in Claude Code VS Code integration
• Thanks to the VS Code extension API and community

🔗 Links

• VS Code Extension API
• Claude Code Documentation

---

Note: This extension is not officially affiliated with Anthropic. It's a community-built solution to add image support to Claude Code in VS Code.