AI & Tools · Tutorial
Install Claude Code in VS Code.
The setup that replaces the desktop app.
At Growthappiness, we run Claude on client projects all day long: websites, content, automations. And we quickly stopped using the Claude desktop app. Not out of technical snobbery, but for productivity: the moment you work on real files, it becomes a bottleneck. The solution we adopted, and now install for our clients: running Claude Code inside VS Code. Same Claude, same account, but an environment where you stay in control. Here is the exact setup, step by step, written for someone who has never opened VS Code.
Why leave the desktop app
The desktop app does one thing well: chat. The problem starts when the conversation has to produce a deliverable. You ask for a change on a page, Claude replies with text, and it is up to you to paste it into the right spot in the right file. Multiply that by twenty round-trips on a client project and you see why it eats your time. Worse: you never see the project structure, so you are flying blind.
VS Code fixes exactly that. It is a free, open-source editor from Microsoft, originally built for developers, but here we repurpose it as a plain workspace for your files. Three zones: your folders listed on the left, Claude in a panel on the right, a terminal at the bottom to run a command (a deployment, for example) without switching windows. Everything that was scattered now fits on a single screen.
The key idea
You are not switching AI, you are switching workstation. It is the same Claude, the same subscription, the same answers, but placed in an environment where you see what it does, and where you can even open a second agent (like OpenAI's Codex) right next to it to weigh two opinions on a tricky question.
Step 1 — Install VS Code
Go to the official VS Code website and click the big blue Download button. It picks the right version on its own, Mac or Windows. Already installed? Jump straight to step 2.
Step 2 — Install the 5 extensions
An extension is a module you add to VS Code to give it a new capability. The setup relies on five of them. Here is what each one does.
Claude Code
The essential one. Anthropic's agent built into the editor: you talk to it in a panel, it reads your project and writes directly into the files. Without it, the rest is pointless.
Codex
The second opinion. OpenAI's agent, installed alongside Claude. Handy when something gets stuck: asking both models the same question and comparing keeps you off a bad path.
Min Theme
Visual comfort. A muted color scheme, available in light and dark. Looks trivial, but when you spend whole days in the tool, rested eyes change everything.
Symbols
Readability. It swaps file icons for clean pictograms. On a project with dozens of pages, spotting the right folder at a glance saves real seconds, several times an hour.
Pixel Agents
The fun one. Purely cosmetic: it shows your agents as little pixel-art characters that fidget while they work. Useless, and that is the point: a tool you enjoy opening is a tool you use more.
To install them: open VS Code, click the Extensions icon in the left bar (the little square made of blocks), type each extension's name in the search, then click Install. Five times, that's it.
Step 3 — Set the look
The setup is not only extensions. It is also tuned so the editor stays calm and easy on the eyes. Two settings are enough.
- The theme: press Cmd + Shift + P (on Windows, Ctrl + Shift + P). This opens the command palette, a search bar that launches any command by typing its name. It is the most useful shortcut in the whole app. Type theme, click "Preferences: Color Theme", then choose Min Dark or Min Light. Switching takes five seconds.
- The icons: same command palette, type "File Icon Theme", and choose Symbols.
Step 4 — Launch Claude and open your project
Click the Claude icon in the sidebar (or open it via the command palette by typing "Claude"), then connect your Anthropic account, the same one as always. The Claude panel opens on the right.
Then open your working folder: menu File → Open Folder, and select the project you want to work on. Your files show up on the left. From there, you ask Claude for what you want in plain language, and you watch it edit your files live, right in front of you.
The one thing that matters: autonomous mode
Read before enabling
Claude Code offers an autonomous mode (its real technical name: bypass permissions). By default, the tool asks for your green light before each action. In autonomous mode, it runs on its own: it edits files and executes commands without confirming each step. It is smoother, but it shifts the responsibility onto you. Our internal rule, which we pass on to clients: only enable it on a folder you control and have backed up. Never directly on a production environment or an irreplaceable file.
Our recommendation when you start: leave autonomous mode off at first. Claude will ask for confirmation before each action, which is reassuring while you find your feet. Create a fresh test folder, work inside it, and turn autonomous mode on only once you are comfortable. No rush.
What it actually changes for a B2B SMB
Beyond the comfort, this setup changes your daily relationship with AI. Three concrete benefits when you run a small team.
1. You stop copy-pasting
No more back-and-forth between a chat window and your documents. Claude reads and writes directly in your files: a web page, a content plan, a data export. The time saved is real and daily.
2. You see what the AI does
Your files are right there, on the left. When Claude changes something, you see it. That is the difference between delegating blind and staying in control, which matters when the result ships to a client.
3. You keep everything in one place
Editing, a terminal to deploy, the AI, a second agent to double-check: it all lives in one window. Less friction, more shipped in a day.
instead of three
to install
it all up
If you get stuck
No point grinding when a screen is unclear. The most effective reflex, and it is a bit ironic: ask Claude itself. Take a screenshot of what is blocking you, paste it into the panel, and ask what a given button does or why an error shows up. It is the fastest way to learn the tool, and as long as you stay in a test folder, you risk nothing.
The Growthappiness verdict
Running Claude Code inside VS Code is not a developer thing. It is the simplest setup to turn AI into a real work tool instead of a chat box. The same Claude, in a window that does not slow you down.
The real differentiator in 2026 won't be "who uses AI", everyone will. It will be "who knows how to fit it into a workflow that ships". That is exactly the ground we cover in our Claude AI Training pack: we install your setup, show you the right reflexes, and you walk away independent.