AI Builders Logo

Getting Started

Learn to vibe code with Cursor by setting up this tutorial monorepo

Next.js 15
Supabase
Turborepo
pnpm

Fresh Laptop Setup

Starting from scratch? Follow these steps in order

1. Open Terminal

Press ⌘ + Space, type “Terminal”, and press Enter

2. Install Homebrew (Package Manager)

Copy and paste this command into Terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Follow the prompts and enter your password when asked

3. Install Git

brew install git

4. Install Node.js

brew install node

5. Install pnpm

npm install -g pnpm

6. Verify Installation

Run these commands to verify everything is installed:

git --versionnode --versionpnpm --version

Using Git in Terminal

Let's clone the repository and set up the project

1. Choose a directory for your projects

First, navigate to where you want to store your code:

cd ~/Desktop

This moves you to your Desktop folder. You can use any location you prefer!

2. Clone the repository

This downloads the project code from GitHub:

git clone https://github.com/aibuildersmx/learn.git

You'll see Git downloading the files. This creates a new folder called “tutorial”

3. Enter the project folder

cd tutorial

“cd” means “change directory” - you're now inside the project

4. Install project dependencies

This downloads all the code libraries the project needs:

pnpm install

This might take a minute. You'll see progress bars as packages download

5. Start the development server

pnpm dev

The app will start! Look for “ready” messages and a URL like http://localhost:3000

Using Cursor IDE

Getting started with AI-powered coding

1. Download Cursor

If you haven't already, download Cursor from cursor.sh

2. Open the Project

In Cursor, click “Open Folder” and select the tutorial folder you just cloned

Alternatively, from terminal in the project folder, run: cursor .

3. Cursor AI Features

• Cmd/Ctrl + K - Edit code with AI

• Cmd/Ctrl + L - Chat with AI about your code

• Tab - Accept AI suggestions

• Select code and ask questions about it

4. Try These Cursor Commands

• “Explain this component” (select any React component)

• “Add a new button that does X”

• “Fix this TypeScript error”

• “Write tests for this function”

Try Agent Mode! 🎨

Let Cursor's AI transform the homepage with these fun examples

🎮 Interactive Game

“Turn the homepage into a simple memory card game with emojis”

🌈 Animated Background

“Add a gradient background that shifts colors smoothly”

⏰ Live Clock Widget

“Create a beautiful analog clock that shows real time”

🎨 Drawing Canvas

“Make a mini drawing app where I can doodle with my mouse”

🎵 Music Visualizer

“Create animated bars that dance to microphone input”

🎯 Your Own Idea!

Dream up something fun and let Cursor build it for you!

How to use Agent Mode:

  1. 1. Open apps/web/src/app/page.tsx
  2. 2. Press Cmd/Ctrl + I
  3. 3. Type one of the examples above
  4. 4. Watch Cursor work its magic! ✨

Quick Reference

Essential paths and commands

View Your App

Open http://localhost:3000 in your browser to see the running app

Key Locations

• apps/web/src/app/page.tsx - Homepage to customize

• apps/web/src/components - Reusable components

• /components-test - UI component showcase