Adding Claude-Code Visual Studio Code extension to Chat Panel

claude-code-vscode-sidebar-setup.md

How to Configure Claude Code Extension in Visual Studio Code Side Panel

Last Updated: October 7, 2025
Extension Version Tested: Claude Code for VS Code v2.0.10

This guide will help you set up the Claude Code extension in Visual Studio Code's side panel for easy access. You can also use this process for other chat extentions like Codex.

Prerequisites

• Visual Studio Code installed on your system
• Internet connection for extension installation

Step-by-Step Instructions

Step 1: Install the Claude Code Extension

1. Open Visual Studio Code
2. Navigate to the Extensions view by clicking the Extensions icon in the Activity Bar (or press Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Claude Code" in the extensions marketplace
4. Find the official Claude Code extension by Anthropic
5. Click Install to add the extension to your VS Code

Alternative: Install directly from the marketplace link: Claude Code Extension

Step 2: Configure Activity Bar Orientation

1. Open VS Code Settings:
   • Windows/Linux: Ctrl+,
   • macOS: Cmd+,
2. In the search bar, type "activity bar orientation"
3. Find the setting: Workbench › Appearance › Activity Bar: Orientation
4. Change the value from "horizontal" to "vertical"

This step ensures the side panel layout works optimally with the Claude Code extension.

Step 3: Open Claude Code in Sidebar

1. Open the Command Palette:
   • Windows/Linux: Ctrl+Shift+P
   • macOS: Cmd+Shift+P
2. Type "Claude" in the command palette
3. Select "Claude Code: Open in sidebar" from the dropdown menu
4. The Claude Code interface will appear in the sidebar

Step 4: Move to Chat Panel

1. Locate the Claude Code icon in the sidebar
2. Click and drag the icon from the sidebar
3. Drop it into the chat panel area

Verification

To verify the setup is working correctly:

1. You should see the Claude Code interface in the chat panel.
2. You can start a conversation with Claude by typing in the chat interface
3. The extension should be ready to assist with your coding tasks

Troubleshooting

Extension not appearing: Make sure you've installed the official Claude Code extension by Anthropic, not a similar extension with a different name.

Sidebar not showing: Verify that the Activity Bar orientation is set to "vertical" in your VS Code settings.

Command not found: Ensure the extension is properly installed and VS Code has been restarted after installation.

Additional Resources

• Claude Code Extension Documentation
• Visual Studio Code Extensions Guide

---

This guide has been tested and verified to work with Visual Studio Code and Claude Code for VS Code v2.0.10 (last updated October 7, 2025).

The issue is how do you get it to stay there between VS Code restarts. I have to add it to the sidebar after each restart.

The solution that I found is to create a shortcut for opening claude on side bar, I overwrote the cmd + shift + I shortcut for copilot.
Now everytime I restart vscode or refresh and it disappears, I just need to use my shortcut and it opens there.

To open on startup use se https://marketplace.visualstudio.com/items?itemName=gabrielgrinberg.auto-run-command and add this to settings.json.

"auto-run-command.rules": [
   {
	"condition": "always",
	"command": "claude-vscode.sidebar.open",
	"message": "Running Claude Sidebar"
   }
]

Change the command to use some other launching mode.