How to build a React web app in just a few minutes with AI

Web development is a tricky thing. If you need to build something more advanced than a simple landing page, you will need skills in using web UI libraries and frameworks. Let’s see if we can practice vibe coding for the web without diving into code.

Previously, I’ve demonstrated how to build a fully functional iOS app using Cursor AI.

Vibe Coding with Cursor AI

But in this article, I want to focus on the web and build a real web app — a dashboard with metrics and KPIs. I will create a web app using Next.js, a popular web framework built on top of React.

What you need to build a web app

• Windows, Linux or MacOS machine
• Node.js installed on your machine (Node should be version 18.18 or above)

Step 1: Create a project folder

We need to create a folder where we will store the project.

Step 2: Create Next.js project

Unlike vibe coding for iOS, which requires working in two dev environments simultaneously — Xcode and Cursor AI, vibe coding for web can be done using only Cursor AI.

To create a new Next.js project, we open a terminal (bottom panel) and type the following command:

npx create-next-app@latest

Once you provide a project name and go through the setup wizard, Next.js will create a new project for you.

The first thing you need to do after creating a new project is to ensure that it works fine. To do that, you can run a command:

npm run dev

This command will run a dev server on your machine and you can open a provided URL in your browser to see if it works fine.

Step 3: Configure context for AI assistant

The quality of code generated by an AI assistant will largely depend on whether it understands the project and the technology it works with — context.

When defining the context, I recommend doing 3 things

First, based on my experience working with Cursor AI for Next.js, I recommend narrowing down the focus on introducing changes into specific files rather than giving Cursor AI the opportunity to modify the entire project. Every time I didn’t limit the context to a particular file or directory, Cursor AI tended to create an entirely new Next.js project or modify a significant portion of files, which led to unnecessary iteration. So, the first thing I suggest is to add your home page file to the context.

Second, I recommend adding Next.js’ official documentation. This will help Cursor AI rely on up-to-date documentation when generating code.

Third, I recommend adding Cursor Rules — specific instructions that AI assistant should follow when generating code. The place to go to find the rules is Cursor.directory. I typically add cursorrules file to the root of the project.

Step 4: Writing initial prompt

I think that the initial prompt you submit to AI assistant is the prompt that matters the most. You must strive to make it clear what you want to build and why. I my case, I’m building a dashboard with metrics and KPIs for a hotel chain. That’s why I want to list the specific charts that I want to see.

Here is a preview of the prompt I use (first three charts provided):

I want to add a performance dashboard for a hotel chain in page.tsx

Dashboard will have 6 charts. For each chart I provide specific details along with general reason why I need to show it.

1. Occupancy Rate Over Time
Why I need to show it: To track how well rooms are being filled, reveals seasonal trends, and helps with forecasting.
Chart Type: Line Chart
Measuring Period: Last 12 months (monthly granularity)
X-Axis: Month
Y-Axis: Occupancy Rate (%)

2. Revenue by Hotel Branch
Why I need to show it: Quickly compare hotel performance to identify underperforming or high-performing locations.
Chart Type: Horizontal Bar Chart
Measuring Period: Current Month (with dropdown to switch to quarterly/yearly)
X-Axis: Revenue ($)
Y-Axis: Hotel Names

3. Booking Source Distribution
Why I need to show it: Understand where guests are booking from to inform marketing strategy and commission costs.
Chart Type: Donut Chart
Measuring Period: Last 30 Days
Categories: Website, OTA (e.g. Booking.com), Direct Calls, Travel Agents

Also, notice taht I want to make it clear to the AI assistant that I want to see changes on the page.tsx, the home page of the project.

Step 5: Iteration and refinement

Based on my experience, it generally takes more time to iterate and refine the Next.js project using Cusror AI than the iOS project. Every second Next.js project that Cursor AI coded for me was initially created with some errors.

But the good thing is that you can iterate your design, asking Cursor AI to find and fix the errors. Some of the errors can be fixed without leaving the AI assistant window, but for some errors, you will need to dive into the code to figure out what is going on.

I also realized that many times, you don’t need to write sophisticated prompts to refine the visual appearance of the project. A prompt

Make UI look beautiful

Works almost the same as more sophisticated instruction:

Refine page.tsx to make it more aesthetically pleasing using CSS styling

Summary

As you can see, Cursor AI can help you to quickly visualize what you want to build. It can build a solution that you can share with stakeholders to collect feedback. At the same time, there is a high chance that you will need to have a few iterations with the AI assistant before you reach the functioning state of the project. As you can see in my example, the solution that Cursor provided still has a few pitfalls, both on the functional and visual side. It could be a good first step in the design process, but it is unlikely to be a final solution you can ship to your customers.

Written by Nick Babich

Vibe Coding for web with Cursor AI was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.