Stop Prototyping, Start Building: The Ultimate AI Dev Environment Setup

Tools like Lovable and Bolt are incredible for prototyping. They feel like magic.

But if you want to build a production-ready app, you eventually hit a wall. You need to leave the browser and set up a proper development environment on your local machine.

Our agency spent the last six months perfecting this specific setup. We use it every single day to ship apps for clients.

In this guide, we are going to walk you through the exact "Idea to App" framework we use skipping the common mistakes that cost beginners hours of frustration.

Watch full video here:

What We'll Cover

• The OS Foundation: Why you need Linux (even on Windows)
• The Engine: Installing Node.js the right way
• The Workbench: Setting up VS Code & GitHub
• The Brain: Integrating AI Agents (Claude, Gemini, Codex)
• The Test: Launching a Next.js App

1. The OS Foundation: WSL (For Windows Users)

If you are on a Mac, you can skip this step. You’re already Unix-based.

If you are on Windows, do not use standard PowerShell.

Most modern web development tooling is designed for Linux or Mac. Trying to force it to work on Windows native terminal is a recipe for constant errors.

The Solution: Windows Subsystem for Linux (WSL).

Microsoft has made this incredibly easy. You don't need to dual-boot. You just run a single command in PowerShell (as Administrator):

Bash

‍

This installs Ubuntu directly onto your machine. Once installed, type ubuntu in your search bar, open it, and you are now running a professional-grade Linux terminal inside Windows.

2. The Engine: Node.js (The Right Way)

Here is the most common mistake I see beginners make:

The Mistake: Going to the Node.js website and downloading the Windows installer.

Don't do it.

Why? Because different projects require different versions of Node. Your Lovable project might need Node 18, while your new Next.js app needs Node 20. If you install Node globally, switching between them is a nightmare.

The Solution: NVM (Node Version Manager).

NVM allows you to switch Node versions instantly with a single command.

The Process:

1. Open your Ubuntu terminal (not PowerShell).
2. Install NVM using the script from their GitHub.
3. Install the LTS (Long Term Support) version of Node:

Bash

Reality Check: If you have a package.json from a Lovable or Bolt export, paste it into ChatGPT or Gemini and ask: "Which Node version does this project need?" Then use NVM to install that specific version.

3. The Workbench: VS Code

For your Integrated Development Environment (IDE), keep it simple.

Use Visual Studio Code.

It’s free, it’s the industry standard, and it has the best extensions.

The Critical Setup for Windows Users:

You need to bridge the gap between your Windows interface and your Linux (Ubuntu) backend.

1. Download VS Code for Windows.
2. Open the Extensions marketplace.
3. Install the WSL extension by Microsoft.

How to open projects correctly:

Don't open VS Code and search for files. Do it from the terminal.

1. Open Ubuntu.
2. Navigate to your project folder.
3. Type code .

This command opens VS Code specifically connected to your Linux subsystem. You'll know it worked because the bottom left corner of the window will say "WSL: Ubuntu."

4. Version Control: GitHub Desktop

Think of GitHub as Google Drive for your code. It’s where your actual work lives safely in the cloud.

While "real" developers love the command line, git commands can be intimidating and error-prone for beginners.

The Solution: GitHub Desktop.

It handles all the complex authentication and command-line work for you.

Crucial tip for Windows users: When cloning a repository in GitHub Desktop, ensure you are cloning it into your WSL directory, usually found at:

\\wsl.localhost\Ubuntu\home\your-username\ShutterstockExplore

5. The Brain: Installing Your AI Agent

This is where the magic happens. You need an AI agent living inside your terminal that can read, write, and execute code for you.

You have three main options:

1. Claude Code (Anthropic): The best performance, but costs money per token.
2. Gemini CLI: A great free option.
3. OpenAI Codex: Good if you already have a ChatGPT subscription.

My Recommendation: Claude Code. It just "gets" context better than the others right now.

To install it (inside your Ubuntu terminal):

Bash

Once installed, you can simply type claude in your terminal. You can ask it to navigate files, edit code, and even fix errors.

Example workflow:

"Hey Claude, find the header component and change the title to 'Tutorial Setup'."

It finds the file, makes the edit, and saves it. You just verify.

6. The "Hello World" Test

Don't assume your setup works. Test it.

We use a standard Next.js + Supabase stack at my agency. Let's spin one up to verify your environment.

1. Open Ubuntu.
2. Create a test folder: mkdir test-project.
3. Run a Next.js starter command (e.g., npx create-next-app@latest).
4. Run the development server: npm run dev.

If your setup is correct, VS Code will pop up a notification allowing you to open localhost:3000 in your browser.

If you see the Next.js landing page, congratulations. You are now running a professional-grade development environment.

The Reality of "Broken" Code

Things will break. You will see red text in your terminal. This is normal.

When an error happens, use the 3-Step AI Loop:

1. Copy the error message.
2. Paste it into your AI Agent (Claude/ChatGPT).
3. Ask: "Explain this error to me and how it happened. Then, tell me how to fix it."

Don't just ask for the fix. Ask for the explanation. That is how you learn.

Conclusion

Moving from browser-based prototyping tools to a local environment is a big step. It feels technical and intimidating.

But once you have this setup, you aren't just a "prompter." You are building real, scalable software that you own.

‍

Ready to go deeper? Contact us!

‍