Module 3, Lesson 1: Setting Up WebStorm + Claude

If you've been following along, you should have a solid stack of documentation by now — research summary, PRD, GTM, UX docs, and a user flow diagram. That's everything we built in Module 2.

Now we're moving into Module 3. This is where things get a bit more hands-on — we're about to start connecting Claude to your actual coding environment. In this lesson, I'm getting WebStorm installed, a project created, and Claude Desktop wired in via MCP so we can start writing specs directly into the codebase.

ℹ️

No corrections or updates to previous lessons before we dive in.

Before We Start

Here's what I'd expect you to have under your belt before this lesson:

From previous lessons:

You should be comfortable using Claude Desktop — we've been living in it since Module 1
You should understand what MCP is and what it does — we covered the concept in Module 2 when we connected Claude to Obsidian and Figma
Your documentation from Module 2 should be complete: research summary, PRD, GTM, UX docs, and user flow

Tools / setup you'll need:

WebStorm installed (free download from JetBrains.com — it will ask about a licence, but you can use the free trial or their free tier)
Claude Desktop already installed and running
VS Code is a perfectly valid alternative to WebStorm if that's what you prefer — everything I do here maps across

By the end of this lesson, you'll:

Have a new WebStorm project created and know where it lives on your machine
Have MCP enabled in WebStorm and connected to Claude Desktop
Be able to verify the connection works — Claude controlling your editor is a genuinely exciting moment

About This Lesson

Duration: ~10 minutes video + ~15 minutes setup
Skill Level: Intermediate
What You'll Build: A WebStorm project connected to Claude Desktop via MCP — your coding sandbox, ready for everything in Module 3 and beyond.

I'll be honest with you — this lesson is a bit of a departure from what we've been doing. Most of Module 2 was research and documentation, which is fairly low-friction. This is setup, and setup can be finicky. I'm going to slow things down and walk through every step. If something doesn't go exactly as it does for me, don't panic — come find us in Discord and we'll sort it out. The payoff is real.

Watch the Lesson

ℹ️

How I'd suggest going through this: Watch the video first without stopping — just get the big picture. Then come back here and work through the guide section by section, pausing the video at the timestamps I've noted. After that, this guide is your reference — you shouldn't need to rewatch to look something up.

What We're Covering

Here's what I'm walking you through in this lesson:

What WebStorm is and why I use it — your coding sandbox and what role it plays from here on
Creating your first project — the setup steps and why the project path matters
Enabling MCP in WebStorm — flipping the switch that lets Claude control your editor
Connecting Claude Desktop to WebStorm — the auto-configure flow and what it does
Testing the connection — the quick sanity check that proves it's all working

1. Let's Set the Scene (~0:00)

So far in this course, I've introduced you to a few tools. We've used Claude as the engine for everything — research, documentation, user flows. We used Obsidian to capture notes, and Figma to map the user journey visually. And if you've been keeping up, you should have a lot of that documentation all done by now.

In this module, we're moving into something a little different: building. And before we can do that, I need to introduce you to WebStorm.

WebStorm is a code editor — it's the tool I use to write and manage code. Think of it as the sandbox where the actual project lives. We're going to connect it to Claude Desktop using MCP, the same integration we used with Obsidian and Figma in Module 2. Except this time, Claude's not writing notes or diagrams — it's going to be writing code directly into your project.

I want to be upfront: this lesson is a step up in difficulty from what we've done so far. I'd say it's still very manageable, but it's the kind of thing where if you rush, you'll trip. Take it slow, follow every step, and if something doesn't go right, that's what the community is for.

⚠️

If you're not planning to build the app yourself — if you're going to hand this off to someone else to build — you can actually skip this module and jump straight to the sales and marketing section. But if you want to build it yourself, which I'm assuming you do, stay with me here.

2. The Core Idea

2.1 What WebStorm Is (and Why It Matters)

WebStorm is a code editor made by JetBrains. It's the tool I personally use to write, organise, and review code. You've probably heard of VS Code — WebStorm is in the same family. It's where your project folder lives, where you browse files, and where you'll eventually review what Claude writes.

I prefer WebStorm. But honestly, if you're already comfortable with VS Code, use VS Code — the MCP integration works the same way. I'm not going to pretend there's a huge functional difference. I just like how JetBrains tools work, so that's what you'll see me using.

2.2 What MCP Is Doing Here

We first talked about MCP back in Module 2 when Claude started writing directly into Obsidian. The same principle applies here: MCP is a protocol that lets Claude control other applications. When we enable MCP in WebStorm and connect it to Claude Desktop, we're essentially giving Claude a set of tools it can use to read and write files in your project.

This is a big deal. Instead of copying and pasting code back and forth between Claude and your editor, Claude will be able to reach directly into your project folder. It knows what files exist, can read them, and can write to them. That's what makes this setup feel genuinely powerful rather than just another chatbot.

ℹ️

Think of it this way: before MCP, using Claude for coding was like having someone very smart in the room who couldn't see your screen. After MCP, they can see your screen and type on your keyboard. That's the shift.

3. Let Me Show You How It Works (~1:48)

3.1 Step 1 — Download and Install WebStorm

Head to jetbrains.com/webstorm and download it. Install it the normal way for your OS (Mac or Windows). Once it's installed, open it up.

💡

WebStorm isn't free forever, but JetBrains offers a free trial and there's also an option for non-commercial use. If you're building a side project, check what applies to your situation. VS Code is always free if you'd rather not deal with licencing at all.

3.2 Step 2 — Create a New Project

When WebStorm opens, you'll see an option to create a new project. Click it.

WebStorm will ask you where to save the project. It'll give you a default path — something like /Users/yourname/WebstormProjects/untitled. Take note of this path. You're going to need it.

Here's what I do: I copy the project path and paste it somewhere I can find it later — I drop it in an Obsidian note. It sounds like a small thing, but we'll reference this path when setting things up with Claude, and you don't want to be hunting for it.

Give the project a name. Mine is called notural because that's the app I'm building. Use whatever makes sense for your project.

A couple of things worth knowing about this step:

WebStorm will ask if this is a JavaScript or TypeScript project. Don't worry about it for now — it doesn't really matter at this stage.
You'll see a "Create Git repository" checkbox. I'm leaving that unchecked for now. We'll deal with Git later when it matters.

Click Create.

3.3 Step 3 — Enable MCP in WebStorm

This is the key step.

Once your project is open, go to Preferences (on Mac: click the app name in the menu bar → Preferences; on Windows: look for Settings in the app menu).

In the Preferences/Settings window, type MCP in the search box. You'll see MCP Server come up. Click on it.

By default, MCP is probably disabled. You want to enable it. Check the box.

Once it's enabled, you'll see an option to look for the Claude app and click Auto-configure. Do that. WebStorm will find your Claude Desktop installation and set everything up automatically. It may ask you to reopen Claude Desktop — do that too.

⚠️

If you don't see a Claude entry after enabling MCP, use the Auto-configure button. It handles the connection for you. If it still doesn't appear, quit Claude Desktop completely and reopen it — that usually resolves it.

Click OK to close Preferences.

3.4 Step 4 — Restart Claude Desktop

Once you've saved the MCP settings in WebStorm, fully quit Claude Desktop (don't just close the window — actually quit it) and reopen it. This ensures Claude picks up the new MCP connection to WebStorm.

3.5 Step 5 — Test the Connection

Here's the moment of truth. With both WebStorm open and Claude Desktop running, go into a new Claude chat and type something like:

Using the JetBrains tool, show me the list of files in my project.

If everything is wired up correctly, Claude will use the JetBrains MCP tool, identify your project automatically, and return a list of the files and folders inside it — without you having to tell it where anything is.

When that happens, you're done. Claude can now see and control your coding environment.

✅

What you're looking for: Claude returns a list of files that matches what you see in the WebStorm sidebar. If it matches, the connection is live.

4. Try It Yourself

Verify the Setup

Once you've got everything connected, test it with this prompt in Claude Desktop:

Using the JetBrains tool, show me the list of files in my project.

What success looks like: Claude responds with a list of files that matches what you see in your WebStorm sidebar. The project name and file structure should match exactly.

Now try this: Ask Claude something slightly more specific — like "show me the contents of the first file in my project." If it can read file contents, the integration is fully working.

5. Watch Out For These

⚠️

Claude doesn't see your project
Here's why this happens: Claude Desktop wasn't restarted after enabling MCP in WebStorm, so it never picked up the new connection.
The way I avoid it: always fully quit and reopen Claude Desktop after making MCP changes in WebStorm.
If you've already hit this: quit Claude completely, reopen it, then try the test prompt again.

⚠️

Auto-configure doesn't find Claude
Here's why this happens: Claude Desktop might not be running when WebStorm tries to detect it.
The way I avoid it: make sure Claude Desktop is open before you go into WebStorm's MCP settings.
If you've already hit this: open Claude, go back to WebStorm Preferences → MCP, and try Auto-configure again.

⚠️

Not sure where your project was saved
Here's why this happens: the default WebStorm project path can be easy to miss if you click through quickly.
The way I avoid it: I always copy the project path into an Obsidian note the moment I create the project. Takes five seconds and saves a lot of hunting later.

6. Practice

Exercise 1: Get the Basics Down

What to do: Complete the full setup — install WebStorm, create your project, enable MCP, connect Claude, and run the test prompt.

A nudge if you're stuck: The most common failure point is forgetting to restart Claude Desktop after enabling MCP. If the test prompt doesn't work, that's the first thing to check.

How you'll know it's working: Claude returns a file list that matches your WebStorm sidebar exactly.

Exercise 2: Push It Further

What to do: Once the connection is verified, ask Claude to describe the structure of your project — something like "using the JetBrains tool, describe my project structure." See how much it can infer about what you're building just from the folder and file layout.

What this is practising: Getting comfortable with the idea of Claude as something that understands your project, not just a chat window.

7. You Should Be Able to Build This Now

Here's what you can do with what we just set up:

Ask Claude to read any file in your project directly
Have Claude start generating code that lands inside your actual project folder
Use this setup as the foundation for everything in Module 3

Check Yourself

WebStorm is installed and I have a project created
I know where my project is saved on my machine (and I've noted the path)
MCP is enabled in WebStorm and Claude Desktop is connected
I ran the test prompt and Claude returned the correct file list

✅

If you're ticking those boxes, you're ready for the next lesson. That's where we start writing specs directly into the project. Nice work getting this far.

If Something's Not Working

⚠️

The test prompt returns an error or Claude says it can't find the project
What's happening: The MCP connection between WebStorm and Claude Desktop isn't established yet.
How to fix it: 1) Make sure WebStorm is open and your project is loaded. 2) Go to WebStorm Preferences → search MCP → confirm MCP Server is enabled and Claude appears in the list. 3) Fully quit Claude Desktop and reopen it. 4) Try the test prompt again.

The Short Version

Here's what I want you to walk away with:

WebStorm is your coding sandbox — it's where your project lives, and where you'll review and manage everything Claude builds.
MCP is what connects Claude to WebStorm — once it's enabled, Claude isn't just chatting at you, it can actually see and write into your project.
Auto-configure does the heavy lifting — you don't need to manually configure anything, just enable MCP and let it find Claude.
What you can do now: Claude Desktop can read and write files in your WebStorm project. That's the foundation for everything we do from here.

Quick Reference

Setup Steps (in order)

1. Install WebStorm from jetbrains.com/webstorm
2. Create a new project — note the project path
3. WebStorm Preferences → search "MCP" → enable MCP Server
4. Click Auto-configure to connect Claude Desktop
5. Fully quit and reopen Claude Desktop
6. Test: ask Claude to list files in your project using the JetBrains tool

Test Prompt

Using the JetBrains tool, show me the list of files in my project.

Resources

Links & Docs

JetBrains WebStorm — download and installation
VS Code — free alternative if you prefer it

Tools Used

Questions I Get Asked

Q: Do I have to use WebStorm, or can I use VS Code?

VS Code works fine. Everything I'm doing with the JetBrains MCP has an equivalent in VS Code with its own MCP integration. I use WebStorm because it's what I'm comfortable with, but if you're already set up in VS Code and you don't want to switch, don't. The rest of the course follows the same logic regardless of which editor you're in.

Q: My Auto-configure didn't find Claude — what do I do?

Make sure Claude Desktop is actually running (not just installed) when you try Auto-configure. WebStorm needs to see Claude running to detect it. Open Claude, then go back into WebStorm Preferences → MCP and try again.

Q: How do I know I'm ready for the next lesson?

Honestly — if Claude can list your project files from the test prompt, you're good. That's the only thing that needs to be working before we move on.

💬 Stuck? Come Talk to Us

💡

If something's not clicking or you want to share what you've built — come find us in Discord.
Build What Ships community → https://discord.gg/RFXRf9yg
Drop your question in the right channel. The community's active and I check in there too.

Glossary

WebStorm: A code editor made by JetBrains. It's where your project folder lives — you browse files, review code, and run your app from here. Think of it as the physical desk where the building happens. (first introduced in Module 3, Lesson 1)

MCP (Model Context Protocol): The protocol that lets Claude control other applications — in this case, your coding editor. We first used MCP in Module 2 to connect Claude to Obsidian and Figma. Here we're using it to connect Claude to WebStorm. (first introduced in Module 2, Lesson 3 - Generating the Technical Document)

JetBrains: The company that makes WebStorm (and a suite of other developer tools like IntelliJ, PyCharm, etc.). When Claude references the "JetBrains tool" in a prompt, it's referring to the MCP integration with WebStorm. (first introduced in Module 3, Lesson 1)

Auto-configure: The one-click option in WebStorm's MCP settings that automatically detects your Claude Desktop installation and sets up the connection. You don't need to manually configure anything — just click it. (first introduced in Module 3, Lesson 1)