Claude Custom Chat - Claude Code 확장 프로그램을 사용자 정의하세요

A VS Code/Cursor extension that provides a custom chat interface for the Claude Code CLI. This is the first Claude extension that can modify itself! Just enter dev mode and the extension will have its own source code available as MCP. Make the change, reload the window and see the change you made. If you don't like it click CMD+Shift+C to rollback to the previous version. The command is "Claude Custom Chat: Dev Mode: Rollback to Latest Snapshot". You can also use "Claude Custom Chat: Dev Mode: Pick and Rollback to Snapshot" to rollback to any previous version. Here's a quick example showing how to ask Claude to modify the UI (removing the @ button): demo_readme.mov This is a fork of the original claude-code-chat repository. Tested on: - macOS (ARM64 and Intel) - Linux (Ubuntu, Debian, Fedora) - Windows 10/11 (via PowerShell) Supported Editors: - VS Code - Cursor - Other VS Code forks (Antigravity, etc.) Requirements: - Node.js 16+ and npm - Git - Claude Code CLI ( npm install -g @anthropic/claude ) - Active Claude API key or Pro/Max subscription First, install the Claude Code CLI from Anthropic: - Visit claude.ai/code and follow the installation instructions - Or run: npm install -g @anthropic/claude - You'll need an active Claude API key or Pro/Max subscription Type claude in bash and check it works. # Fork the repository on GitHub, then clone your fork git clone https://github.com/YOUR_USERNAME/claude-custom-chat cd claude-custom-chat On macOS/Linux: ./install-dev.sh On Windows: # Run PowerShell as Administrator (required for symlinks) .\install-dev.ps1 Then you are done!!! The installation script will: - Automatically detect your editor (VS Code, Cursor, or other forks) - Install all npm dependencies - Compile TypeScript to JavaScript - Create a symlink in your editor's extensions directory - Set up the development environment Note for Windows users: The script requires administrator privileges to create symbolic links. If you see an error, right-click PowerShell and select "Run as Administrator". That's it! Reload your editor (Cmd/Ctrl + R ) and press Ctrl+Shift+C (or Cmd+Shift+C on Mac) to open Claude Custom Chat. 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 with real-time cost and token tracking. Open the graph view using the 📊 button in the header. The graph tab appears as a closeable tab in the tab bar, just like conversation tabs. It connects to an external backend to visualize codebase relationships using Cytoscape.js. Dev Mode enables Claude to modify the extension's own source code in a safe, controlled manner. It includes: - Persistent Snapshots: Snapshots are saved to disk, allowing rollback even after window reload - Direct Source Access: When you ask about the extension, Claude automatically sees the source code - Auto-compilation: Changes trigger automatic compilation with reload prompts - Tips Bar: Visual indicators and helpful tips displayed in the chat interface during dev mode - Enable dev mode (snapshot created automatically) - Ask Claude to modify the extension - Changes are compiled and you're prompted to reload - Test the changes in the reloaded window - Rollback if needed using the commands below When dev mode is active, an MCP server is configured that provides Claude with scoped tools to access and modify the extension: Available Tools: get_extension_source - Get overview of extension structure and key filesRead - Read any file in the extension (e.g., "src/extension.ts")Write - Write/create files in the extensionEdit - Edit files by replacing exact string matches IMPORTANT: Starting Point for Code Exploration When dev mode is activated, ANY exploration or modification of the extension source code MUST begin with the get_extension_source MCP tool. This is the primary entry point that provides: - Complete file structure of the extension - Contents of key files (extension.ts, ui.ts, package.json) - Overview of the extension architecture - List of all available files to explore Workflow: - When dev mode activates, always call get_extension_source first - Review the file structure and key files provided - Use Read tool to examine specific files in detail - Use Write orEdit tools to make changes - Changes auto-compile and you're prompted to reload How to use: - Just ask about the extension naturally (e.g., "where is the rollback code?") - Claude will automatically call get_extension_source first to understand the codebase - Then use other tools as needed based on the task - All operations are scoped to the extension directory only Security: All file paths are validated to ensure they're within the extension directory. Claude cannot access files outside the extension. When dev mode is active, a tips bar appears at the top of the chat interface showing: - Current dev mode status - Helpful reminders (e.g., "Ask me to modify the extension!") - F