Claude Code Chat

Claude Code Chat includes a marketplace to extend Claude's capabilities. You can browse and install various extensions directly through the UI.

Available Extension Types

• MCP Servers: Browse 30+ featured servers (e.g., GitHub, Slack, Stripe, Notion). These are installed to .mcp.json or ~/.claude.json.
• Skills: Curated skills from skills.sh. These can be installed with project scope (to .claude/skills/) or global scope.
• Plugins: General plugins to extend Claude Code functionality.

Installation Features

• Smart Search: Searches across add-mcp curated and official Anthropic registries.
• One-Click Install: Automatically handles pre-filled configurations including environment variables, headers, and OAuth authentication.

You can control how Claude processes complex tasks using specialized modes toggled above the text input area.

Plan First Mode

When enabled, Claude will create a plan for the requested changes before attempting to implement them. This is useful for large refactors or architectural changes.

Thinking Modes

You can configure the intensity of Claude's reasoning. Higher intensity levels provide deeper reasoning but consume more tokens:

• Think
• Think Hard
• Think Harder
• Ultrathink

Claude Code Chat automatically manages project safety through a checkpoint system:

• Automatic Checkpoints: The system creates a checkpoint automatically before any changes are applied, allowing for safe experimentation.
• Instant Restoration: If a change does not work as expected, you can use the one-click restore feature to revert to a previous state.
• Visual Timeline: Navigate through all your project states using the visual timeline to see the history of changes.

Claude Code Chat provides a safety net for code experimentation through a Git-based backup system.

Checkpoints

• Automatic Backups: The extension creates checkpoints during significant operations (like refactoring).
• Restore Checkpoints: You can instantly undo changes and restore your code to any previous state by clicking "Restore Checkpoint" in the UI.
• Browsing: You can browse through previous conversation checkpoints to find specific states.

Session Management

• Automatic Saving: Conversations are automatically saved and can be restored across sessions.
• Metrics: The UI provides real-time cost and token tracking, as well as session statistics and performance metrics.

The extension provides secure access to various Claude Code tools with different safety levels:

Available Tools

• Bash: Execute shell commands.
• File Operations: Read, write, and edit files.
• Search: Grep and glob pattern matching across the workspace.
• Web: Fetch and search web content.
• Multi-edit: Perform batch file modifications.
• MCP Servers: Extend functionality via Model Context Protocol servers.

Security & Speed Modes

• Permissions System: Provides granular control over tool execution to prevent accidental commands.
• YOLO mode: A power-user mode that priorit follows speed over safety, bypassing certain permission prompts.

The extension project relies on these core files:

• package.json: The manifest file. Use this to declare your extension, register commands, and define command titles/names so they appear in the Command Palette.
• src/extension.ts: The main implementation file. It must export an activate function, which VS Code calls when the extension is triggered. Inside activate, you use registerCommand to bind logic to your declared commands.
• src/test/extension.test.ts: The location for unit/integration tests.

To contribute to the project or run the extension from source, follow these steps:

1. Clone the repository.
2. Install dependencies using npm install.
3. Run the extension in VS Code by pressing F5 or using the 'Run and Debug' view.

git clone https://github.com/andrepimenta/claude-code-chat
cd claude-code-chat
npm install

To start developing and debugging your extension:

1. Launch Debugger: Press F5 to open a new VS Code window (Extension Development Host) with your extension loaded.
2. Execute Command: In the new window, open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and type the command name (e.g., Hello World) to trigger your extension logic.
3. Debug: Set breakpoints directly in src/extension.ts. When the command is executed, execution will pause at your breakpoints.
4. Inspect Output: View logs and extension output in the Debug Console.

To apply code changes:

• Use the Debug Toolbar to relaunch the extension.
• Or, reload the Extension Development Host window using Ctrl+R (Windows/Linux) or Cmd+R (Mac).

# Press F5 to start debugging

You can quickly provide context to Claude by referencing files and directories directly in the chat input:

• Reference a file: Type @ followed by your search term.
• Narrow scope: Use @src/ to limit references to a specific directory.
• Cross-file analysis: Reference multiple files in a single message to allow Claude to analyze relationships between them.
• Visual context: Paste images or screenshots directly (Ctrl+V) to include them in your message with preview thumbnails.

You can configure WSL (Windows Subsystem for Linux) integration directly through the Claude Code Chat webview interface. This allows you to specify which WSL distribution to use and the paths for Node.js and Claude within that environment.

To access these settings:

1. Open Claude Code Chat in VS Code (using Ctrl+Shift+C).
2. Click the settings button (⚙️) located in the header.
3. Use the settings modal to modify the following options:
   • Enable WSL Integration: A checkbox to turn WSL support on or off.
   • WSL Distribution: An input field for your specific WSL distro name.
   • Node.js Path in WSL: The path to the Node.js executable inside WSL.
   • Claude Path in WSL: The path to the Claude executable inside WSL.

Settings are saved automatically when changed and persist across sessions.

To test your extension logic:

1. Install Tooling: Install the Extension Test Runner from the VS Code Marketplace.
2. Start Watch Task: Run the watch task via the Tasks: Run Task command. This is required for tests to be discovered.
3. Execute Tests:
   • Open the Testing view from the Activity Bar and click Run Test.
   • Or use the hotkey Ctrl/Cmd + ; A.
4. View Results: Check the Test Results view for output.

Test File Requirements:

• Tests must be located in the test folder.
• Files must match the naming pattern **.test.ts to be discovered by the runner.

# Run the 'watch' task via 'Tasks: Run Task' before running tests