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.

Good catch! ATM (10/09), refreshing or hiding the panel causes the Claude-code chat panel to disappear.

As soon as you reexecute step 3 (Claude Code: Open in sidebar) the claude-code side bar reopens in the chat panel, and has the history of recent chats.

Because the claude-code extension is still newer, there are still some refinements to be had.

What I did was add a keyboard binding to enable reopening of the Claude-code sidebar with Ctrl+Esc.

My guess is that as more people use the Claude-code sidebar in VSC, the experience will continue to be refined.

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.

+1 - 10/22 - Same issue on macOS with latest VSCode and Claude Code Extension v2.0.25, I have to reexecute step 3 ("Claude Code: Open in sidebar" command) every time VSCode restarts.

Another issue is it doesn't respect the setting claudeCode.useTerminal - it keeps on using VsCode UI, which has plenty of issues.

I wish I could somehow just use the native VS Code chat to speak directly to Claude Code.

Another issue is it doesn't respect the setting claudeCode.useTerminal - it keeps on using VsCode UI, which has plenty of issues.

Did you find a workaround for this? this is pretty annoying

I wish I could somehow just use the native VS Code chat to speak directly to Claude Code.

Isn't that what Claude Code for VS Code is? What benefit do you think you are missing?

The best way to get it to work like the Copilot chat at this point is to change claude preferred location to sidebar. Search for claudeCode.preferredLocation in settings and set it to sidebar. That makes it appear in the same sidebar as VS Code Copilot chat.

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.

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.

This is a perfect solution for me.

the icon is not draggable. just installed today

I just did this in Cursor, and it worked perfectly

activity bar orientation setting is not present on my vscode any idea why

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

@mehdi-dbrx thank you!

@mehdi-dbrx worked. thank you!

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