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).

DId Not work for me In MacOS version this is what I am getting : [ Claude Extension Still on the Left | Claude chat in Editor | Right Side is Claude Tab with sessions (not what I want) ]

EDIT : I was about to call it quit but I tried a second time this way and it finally worked

I'm getting a similar error, the first chat I have open can be moved to the left just fine, but as soon as I try adding a 2nd session - it won't let me drag that to the left bar anymore. It will only allow to add the first session chat + the sessions manager, the 2nd session is stuck in the "middle" of the window.

Anyone has any solutions?

@mehdi-dbx You're a life saver! It should be included in the instructions

I just tried it today and right when I was about to quit I found this screenshot and it worked!
The only way to make it work as of June 1st 2026 is via the Move to option on right click