Back/Engineering/Cursor
BeginnerEngineeringCursor

How to Build Your First Local Web App from Scratch Using Cursor AI

Learn to go from an empty folder to a functional Next.js web application. This beginner-friendly guide uses Cursor's AI Agent to scaffold, run, and set up version control for your first project hub.

From How I AI

How I AI: A Beginner's Guide to Coding with AI—Build Your First Project Hub

with Claire Vo

How to Build Your First Local Web App from Scratch Using Cursor AI

Tools Used

Cursor

AI-first code editor

Step-by-Step Guide

1

Set Up Your Local Environment

Create a new, empty folder on your computer for your project. Open this folder directly in the Cursor code editor and switch to the 'Agents' view, which is ideal for instructing the AI.

Pro Tip: Using the 'Agents' view in Cursor 2.0 helps you focus on high-level instructions rather than getting lost in individual files, making it perfect for beginners.
2

Prompt the AI to Scaffold the Application

Provide Cursor's AI agent with a clear, concise instruction based on your project idea or PRD. Specify the technology stack (e.g., Next.js) and the basic structure you want. The agent will then generate the entire file structure and initial code.

Prompt:
I want a very simple next JS app set up where I can keep a repository of markdown docs, PRDs, and. Code in different directories, little, um, prototypes that will be displayed in the app
Here is A PRD, but keep it super basic. We're starting from scratch. So give me all, all the steps I need to set up and run this.
3

Ask the AI How to Run the App

Once the files are generated, ask the AI a simple follow-up question to get the command needed to run the application locally.

Prompt:
Cool, but how do I run this?
4

Run the App in the Terminal

Open Cursor's built-in terminal and execute the command provided by the AI. This will start a local development server, and you can view your new web app in your browser.

Prompt:
npm run dev
5

Set Up Version Control with GitHub

Use the GitHub Desktop application to manage your project's history. Add your project folder as a new repository, make your first 'commit' to save the initial state of your code, and publish it to your GitHub account for backup.

Become a 10x PM.
For just $5 / month.

We've made ChatPRD affordable so everyone from engineers to founders to Chief Product Officers can benefit from an AI PM.