⚒️
KWK x Codex: AI BuildLab 2026 | Participant HQ/⚒️Lesson 1: Setting Up Your IDE

Lesson 1: Setting Up Your IDE

Welcome to the BuildLab! We are so excited you’re here. This first lesson covers how to set up your computer with the tools you need for this program. Let’s get you ready to code!

What is an IDE? 💻

IDE stands for Integrated Development Environment. It is a software application that gives you everything you need to write code in one place: a code editor, a terminal, and debugging tools.
We use Visual Studio Code (VS Code). It is a popular, free, and powerful code editor from Microsoft.

✅ Step 1: Install VS Code

If you don’t already have it, download and install VS Code first.
  1. Go to the official VS Code download page: https://code.visualstudio.com/download
  2. Download the installer for your operating system (macOS, Windows, or Linux).
  3. Run the installer and follow the instructions.
Once installed, open VS Code. You should see a welcome screen!

✅ Step 2: Set up Codex in VS Code

Our AI pair programmer is Codex, an AI coding agent from OpenAI. Codex lives inside VS Code as an extension. It lets you have a conversation, ask it to write code, and have it edit your files directly.
  1. Open the Extensions View: In VS Code, look at the left-hand sidebar. Click the icon that looks like four squares.
  2. Search for Codex: Type “Codex” in the search bar at the top of the Extensions view and press Enter.
  3. Install the Extension: Find the official “OpenAI Codex” extension and click the “Install” button.
  4. Sign In: Sign in your OpenAI login credentials. Follow the prompts to authorize the extension.
Once you sign in, open the Codex panel from the right sidebar.
✏️ Try-It: Open the panel and type “Hello!”

✅ Step 3: The integrated terminal

VS Code has a built-in terminal. We use it to run commands to install software, run our app, and use Git. You don’t need a separate terminal application.
To open the integrated terminal, do one of two things:
OPTION 1: Go to the top menu and select Terminal > New Terminal.
OPTION 2: Use the keyboard shortcut:
  • Windows / Linux: \ (the backtick key) + Ctrl
  • MacOS: Control + `
You should see a command prompt appear at the bottom of your VS Code window. You will run all your commands here for the rest of the program.

✅ Step 4: Install Node and pnpm

Follow the instructions 🔗 here to install Node.js via nvm. Then, install pnpm by running these two commands:
npm install --global corepack@latest
corepack enable pnpm
✏️ Try-It: Time to self-validate (meaning check your own setup to confirm it worked)! In your new terminal, type node --version and press Enter. Then type pnpm --version and press Enter. If both commands print out version numbers instead of “command not found” errors, your environment is perfectly configured!

✅ Step 5: Running your project

Now that your tools are set up, let’s get your actual project running! Your team has a shared repository on GitHub and everyone on the team works from the same repo.
  1. Install pnpm: We use pnpm as our package manager. In your terminal, run npm install -g pnpm .
  2. Clone the repository: Open your terminal in VS Code and run git clone <your-team-repo-url>. Replace the <your-team-repo-url> with the corresponding URL above.
  3. Open the folder: In VS Code, go to File > Open Folder and select the folder you just cloned.
  4. Install dependencies: Open a new terminal inside this folder and run the following. What this does is it downloads all the code libraries the project needs. This might take a minute, this is normal:
    5. pnpm install
    If you run into the following warning, run pnpm approve-builds --all to allow dependencies to run scripts:
    Ignored build scripts: better-sqlite3@12.8.0, esbuild@0.18.20, 
esbuild@0.25.12, esbuild@0.27.7. 
Run "pnpm approve-builds" to pick which dependencies should be allowed 
to run scripts.
  5. The secret database file: You will be sent a secret database connection string to access your team’s database. Store these credentials in a new file in your project root called .env.local . Create a variable in that file called DATABASE_URL and set it to the secret database connection string in order to connects your app to the Neon Postgres database. Do not delete this file! If you see an error about DATABASE_URL later, ask your facilitator. The content of your file should look like:
    6. DATABASE_URL="postgresql://neondb_owner:some-other-connection-info-this-is-just-an-example?sslmode=require"
  6. Run the app: In your terminal, start the development server:
    7. pnpm run dev
✏️ Try-It: Time to self-validate. Open your web browser and go to http://localhost:3000. You should see a page that lists community names. If you see it, your project is running! Drop a 🚀 in your team’s Slack channel to celebrate.

🛟 Common errors (and how to fix them)

If pnpm run dev doesn’t work, here are the three most common culprits:
  • MODULE_NOT_FOUND: You skipped Step 4 (pnpm install). Run it now and try again.
  • DATABASE_URL error: Your .env.local file is missing or the connection string is wrong. Post in Slack: “My .env.local file is missing — can someone send me the DATABASE_URL for my team?”
  • Port 3000 already in use: Another app is using that port. Close other terminal windows or run pnpm run dev -p 3001 and visit localhost:3001 instead.
If you hit something else, screenshot the error and drop it in your team’s Slack channel — your facilitator can help.
That’s it! Your IDE and project are set up and ready to go. In the next lesson, we dive into how to actually use Codex to write code. You’re going to love it!