Build a Database With Cursor and Supabase MCP

Welcome to project #3 of our AI Workspace Series!

Introduction

This project has been archived

We're no longer updating this project - we recommend checking out our active projects instead!

If you've already completed this project, don't worry! Your documentation is still available for you to check out and share.

If you have any questions, leave a question in our Discord and we'll get back to you ASAP!

⚡️ 30 second Summary

In this project, you'll take NextSound, a mini-Spotify clone, and build a likes feature that lets your favourite tracks. We'll also connect your web app with a live database!

We'll use Cursor and the Supabase MCP. Instead of writing every line manually, you'll describe what you want and watch as these tools set up the database connection and feature for you.

Why should I do this project?

This project showcases the Model Context Protocol (MCP) - a revolutionary way to connect AI agents (like Cursor) directly to external services like GitHub or Supabase (a database service). Instead of just chatting about your codebase in Cursor, you can now even build and manage your web app's database in a Cursor chat.

You'll walk away with a portfolio project you can show off - a working music app with a live database 👀

💡 New to MCP and Databases?

This project requires no experience in Databases or MCP, so you can definitely get started here!

This project is Part 3 of our AI Workspace Series! You can jump straight into this project without doing Part 1 (Cursor) or Part 2 (Claude Code)... but if you want to explore two of the best AI coding tools, check them out!

Not sure if this project is right for you? Check if it matches your goals!

If you're up for a bit of a challenge, quiz yourself on the key concepts up ahead in this project.

This project is part of a series:

Part 1: Build a Mini Spotify with Cursor
Part 2: Build a New App Feature With Claude Code
Part 3: You are here!

Before we start Step #1...

We're working with NextSound, a music discovery web app where you can:

Browse tracks from popular artists and discover new music
Search for songs using the built-in search feature
Toggle themes between dark and light mode

By the end of this project, you'll have built a complete likes feature that includes:

A heart button that lets users like their favorite tracks
A cloud-hosted database that stores every track's like count
An MCP connection that lets you chat directly with your database to update and query data!

You'll use Cursor (an coding editor) and Supabase (a cloud database) to build this feature. You'll give instructions in natural language, and, through the Model Context Protocol (MCP), Cursor will handle all the technical steps needed to connect your app to Supabase and build the database too.

What is Cursor?

Cursor is an AI-assisted code editor - a coding tool with a built-in AI assistant that can chat with you, write code, and fix bugs.

💡 What is Supabase?

Supabase is an open-source backend that helps you set up databases and authentication for your web app. It's essentially a cloud-hosted database where you can store and retrieve data.

For this project, we'll use Supabase as our cloud database to store like counts for each track. Every time a user clicks the heart button on a song, we'll update that song's like count in the Supabase database. This lets the data persist even when you refresh the page or close the app!

💡 What is the Model Context Protocol (MCP)?

Think of MCP as a universal translator between AI agents and external tools.

For example, in this project, we'll tell Cursor about a database we want to set up in natural language, and it will use the Supabase MCP to translate those prompts into specific actions in Supabase that make it happen. It's like giving Cursor the ability to now handle database operations for you - you won't have to set up the database or write SQL queries manually yourself.

If you're up for a challenge, there's also a 💎 Secret Mission at the end where you set up user authentication and make the likes feature personal to each user... all with the Supabase MCP too!

A note about costs

This project uses Cursor and Supabase's free tiers, so you won't need to add any payment information or worry about charges.

⚠️ Cursor's free tier limits are typically 50–70 prompts/month. This project takes ~10 prompts, but if you go over ~50 prompts this month, Cursor may ask you to upgrade!

Set Up Your Development Environment

Welcome to the first step! Before we can start commanding our AI, we need to set up our complete development environment. We'll get the project code, connect our tools, and make sure everything is ready to build with AI.

This is an important foundation for the rest of the project, so let's get it right together!

In this step, you're going to:

Open your web app's codebase.
Install the Supabase MCP server.
Connect Cursor with the Supabase MCP.

Open Cursor

In your computer, find and open Cursor.

I don't have Cursor!

No worries - let's install it now. Check out Cursor's download page if you'd like to have a go at doing this on your own, or try Step #1 of our Build a Mini Spotify with Cursor project for step by step guidance!

🙋‍♀️ Do I have to use Cursor?

This project's steps are designed to connect Cursor with an MCP. There are definitely other AI clients you could use, like Windsurf or Claude Desktop, but their MCP setup steps look different. For the best experience, we recommend sticking with Cursor so you can follow the step‑by‑step guidance here.

Get the NextSound Project Code

For this project, we need to make sure the NextSound app is available locally on your computer. You might already have it from previous projects, or you'll need to get it now.

Check your Desktop - do you have a folder called nextsound?

I don't have NextSound

We'll clone the NextSound web app from GitHub using Cursor's built-in Git functionality.

From the Cursor launch screen, clone the repository via the IDE's Clone UI.

In the repository URL field that appears, paste https://github.com/itsnextwork/nextsound.git.
Press Enter.

Why this specific URL?

This URL points to NextSound's code repository on GitHub! The itsnextwork part is the organization name, nextsound is the project name, and .git tells us it's a Git repository that can be cloned.

🙋‍♀️ Getting a 'Git not found' error?

That's totally okay! This just means you don't have Git installed on your computer.

Head over to git-scm.com/downloads.
Download and run the installer for your operating system.
Once installed, restart your IDE and try again.

Still having issues? Troubleshoot here or share your error with the NextWork community!

Select your Desktop as the repository destination.

When prompted, choose to Open the cloned repository.

This will open NextSound right inside Cursor!

Now let's switch to the right branch for this project.

Open a new terminal in Cursor.

🍎 macOS

🖼️ Windows

Pro Tip

You can also use the keyboard shortcut Ctrl + Shift + ` to open a new terminal without clicking through the menu bar!

First, let's fetch all the latest branches from GitHub:

Run the following command:

git fetch --all

What does git fetch --all do?

This command downloads all the latest branch information from GitHub without changing any of your local files. It ensures you have access to all remote branches, including the feature/like branch that NextWork has pre-created for this project.

Now let's switch to the feature/like branch:

Run the following command:

git checkout feature/like

What does git checkout mean, and why are we doing this?

git checkout feature/like tells Git to switch your project to the feature/like branch. In Git, a "branch" is like an alternate version or workspace for your code.

This is a pre-existing branch that NextWork has created for you! This specific branch contains key code for the likes feature's backend (we've set it up to save us time in Step #3 of this project), so by switching to it, you're making sure your project is in the right starting state for the next steps. It's like choosing a version of the codebase that's set up exactly for this tutorial!

🙋‍♀️ How can I verify I'm on the right branch?

Press Cmd+P (or Ctrl+P on Windows) to open the file search, then type supabase. If you see files related to Supabase in the search results, you're on the correct branch!

🙋‍♀️ I'm running into an error!

You might run into errors if there are file changes that still need to be saved before checking out to another branch. Try saving your changes, then checking out the branch again:

git add .
git commit -m "Updated NextSound"
git checkout feature/like

If you're still stuck, don't hesitate to ask the NextWork community for help!

I already have NextSound

Nice! Let's build on your awesome work from the previous project.

Select Open Folder or Open Project.

Navigate to your Desktop.
Select your nextsound folder.

Select Open.

Voilà! NextSound is all ready to go.

Now let's switch to the right branch for this project.

Open a new terminal in Cursor (Ctrl + Shift + ` or Terminal > New Terminal).

First, let's fetch all the latest branches from GitHub:

Run the following command:

git fetch --all

What does git fetch --all do?

This command tells Git to download the latest information about all branches for this project in GitHub, but it won't change any files on your computer yet.

💡 What's a branch?

Think of a "branch" in Git as a separate timeline or workspace. In this project, you're not starting from scratch... the NextWork team has already set up a special branch called feature/like for you, which includes code prepared just for building the likes feature. Downloading all branch info makes sure you can access this pre-made setup, so you don't have to do everything yourself from the ground up!

Now let's switch to the feature/like branch:

Run the following command:

git checkout feature/like

How can I verify I'm on the right branch?

Press Cmd+P (or Ctrl+P on Windows) to open the file search, then type supabase. If you see files related to Supabase in the search results, you're on the correct branch!

If you're stuck while checking out to this new branch (it happens!), feel free to ask the NextWork community for help!

Great job! The project is now open in your editor.

You should see the NextSound file structure in the Explorer panel on the left side of the Cursor window.

Installing the Supabase MCP Server

Now we'll install the Supabase MCP server. This will give Cursor the tools it needs to go into your Supabase account and do things like create new databases.

Open your Cursor Settings.

Select the Tools & MCP section in the left-hand menu.

Use this direct link to install the Supabase MCP server.

The link isn't working for me!

Try opening this in a new tab: cursor://anysphere.cursor-deeplink/mcp/install?name=supabase&config=eyJ1cmwiOiJodHRwczovL21jcC5zdXBhYmFzZS5jb20vbWNwIn0%3D

💡 Woah! Where did you get that handy link from? How did a link set up an MCP in my Cursor IDE?

The link was taken straight from Supabase's own MCP documentation!

When you click the special link, it uses a custom URL format (cursor://...) that Cursor understands. This URL contains all the information Cursor needs to install and configure the MCP (Model Context Protocol) server for Supabase.

Your browser will ask for permission to open Cursor.app.

Click Open Cursor.app to allow it.

A panel will appear in Cursor asking to install the Supabase MCP server.

Click Install.

Perfect! The server is installed.

The Installed MCP Servers section will show supabase with a Needs authentication status.

This just means we need to connect it to your Supabase account.

Set Up Your Supabase Account

Click the Connect button next to the Supabase MCP server.

Cursor will ask if it can open a link to an external website - this will take you to a Supabase log in page!

Click Open to allow Cursor to open the Supabase authorization page in a new browser window.

Why did Cursor ask for permission?

This is a security feature. When an application tries to open a link to an external website, your browser checks with you first. This prevents malicious apps from opening harmful websites without your knowledge. It's safe to click "Open" for trusted services like Supabase.

What you see next depends on whether you're already logged into a Supabase account!

I see a login page

Nice! This means you either don't have a Supabase account (we'll set it up now!), or you just haven't logged into your account yet.

I don't have an account

Select Sign Up Now at the bottom of the login modal.

Fill in your email and password.
Click Sign Up.

You'll see a message prompting you to check your email for a confirmation link.

Open your email inbox and find the confirmation email from Supabase.
Click the Confirm Email Address button in the email to verify your account.

Perfect! You now have a Supabase account.

You'll see an API connection request next. Supabase is asking whether Cursor can have access to your Supabase account.

Select Create an Organization at the bottom of the screen.

What’s an Organization?

An Organization in Supabase is just a workspace where you manage people, billing, and projects. You'll need to have on before setting up any databases!

Enter the name of your organization: NextWork MCP Project - NextSound Web App
Select Create Organization.

Nice! You'll get taken back to the authentication page, but this time with your new organization ready to go.

Select Authorize Cursor at the bottom of the page.

I have an existing account

No worries! Let's log you in first.

Enter your email and password.

Select Sign In.

After signing in, you'll automatically be directed to the authorization page with the MCP Client Connection warning.

At the bottom of the page, you might see a dropdown that lets you pick an existing Supabase Organization. Instead of using that, we'll create a brand new Organization for this project.

Why create a new organization?

This is a security principle called "isolation." By keeping each project in its own organization, you limit the "blast radius." If something goes wrong with one project, it won't affect the others. It also makes it much easier to manage permissions, track usage, and handle billing for each project individually.

Open a new browser tab and head to https://supabase.com/dashboard/organizations.
On your main dashboard, select the green + New organization button.

In the Organization name field, enter NextWork MCP Project - NextSound Web App
Ensure the Pricing plan is set to Free.
Select Create organization.

Supabase will immediately prompt you to "Create a new project". We do NOT need a project for this step. We only need the organization to grant API access.

What’s the difference?

An Organization in Supabase is just a workspace where you manage people, billing, and projects. Inside an Organization, each Project contains an actual database with its own data and API.

Select the Cancel button at the bottom of the form. Don't worry, this is the correct action!

After clicking Cancel, you will be taken to the Projects page for your new organization. It should correctly show a "No projects" message. This confirms you've completed the step perfectly.

Now that our new, isolated organization is ready, let's go back and officially grant Cursor access to it. This is the final step in creating the secure handshake between the two services.

Switch back to the browser tab with the Supabase Authorize API access page.

Refresh the page. This is a crucial step! Refreshing the page will make your newly created organization appear in the dropdown list.
Now, select the organization dropdown menu and select your new organization: NextWork MCP Project - NextSound Web App.
With the correct organization selected, select the green Authorize Cursor button.

You will be prompted to return to the Cursor app.

Select Open Cursor app to complete the process.

Fantastic! You've just set up a connection between Cursor and Supabase.

I see an authentication page

Great! That just means you're already logged into Supabase.

At the bottom of the page, you might see a dropdown that lets you pick an existing Supabase Organization. Instead of using that, we'll create a brand new Organization for this project.

Why create a new organization?

Open a new browser tab and head to https://supabase.com/dashboard/organizations.
On your main dashboard, select the green + New organization button.

In the Organization name field, enter NextWork MCP Project - NextSound Web App
Ensure the Pricing plan is set to Free.
Select Create organization.

Supabase will immediately prompt you to "Create a new project". We do NOT need a project for this step. We only need the organization to grant API access.

What’s the difference?

An Organization in Supabase is just a workspace where you manage people, billing, and projects. Inside an Organization, each Project contains an actual database with its own data and API.

Select the Cancel button at the bottom of the form. Don't worry, this is the correct action!

Excellent work! You've created the organization without creating an unnecessary project.

After clicking Cancel, you will be taken to the Projects page for your new organization. It should correctly show a "No projects" message. This confirms you've completed the step perfectly.

Now that our new, isolated organization is ready, let's go back and officially grant Cursor access to it. This is the final step in creating the secure handshake between the two services.

Switch back to the browser tab with the Supabase Authorize API access page.

Refresh the page. This is a crucial step! Refreshing the page will make your newly created organization appear in the dropdown list.
Now, select the organization dropdown menu and select your new organization: NextWork MCP Project - NextSound Web App.
With the correct organization selected, select the green Authorize Cursor button.
Select Authorize Cursor at the bottom of the page.

You will be prompted to return to the Cursor app.

Select Open Cursor app to complete the process.

Fantastic! You've just set up a connection between Cursor and Supabase.

Test the connection between Cursor and Supabase

Back in Cursor, let's verify the connection was successful.

You can see the status of your MCP connection in the Tools & MCP settings. The Supabase MCP server should now show a green toggle and state 29 tools enabled. This confirms that Cursor is successfully connected to your Supabase account and has a list of actions it can perform.

Expand the tools list to see all available actions Cursor can perform on your Supabase account.

These "tools" are specific commands like create_project, list_tables, and execute_sql that Cursor uses to interact with your Supabase database.

Now for the moment of truth! Let's test the connection.

Close the settings tab.
Open Cursor's AI chat pane (Cmd+Ctrl+B or Alt+Ctrl+B)

Make sure your Cursor chat is in Agent mode.
Type the following prompt:

What is my Supabase Organization called?

Press Enter to send the prompt.

Cursor might ask you to approve the list_organizations tool - that's totally fine! This tells us that Cursor wants to use the Supabase MCP to figure out which organizations it's connected to.

Select Run for the tool call.

Check Cursor's response to confirm it correctly identified your Supabase organization name.

Cursor isn't connecting to Supabase!

Hmm! Here are a few troubleshooting tips if Cursor can't connect to the Supabase MCP...

Make sure your Cursor chat is in Agent mode - not Ask mode!
Check the Tools & MCP page in your Cursor Settings - is the Supabase MCP showing any errors? Make sure to expand the MCP to view detailed error message, which you can paste into your Cursor chat to troubleshoot!
Still not connecting? Troubleshoot here!

Success! You've successfully connected Cursor to a powerful cloud database. Now the real magic can begin.

Set Up a Supabase Project for Your App

Nice work getting Cursor and Supabase set up! Next, we’ll create the database and connect it to the NextSound app.

In this step, you're going to:

Prompt Cursor to help you set up a new database connection.
Create a new Supabase project.
Set up a .env file locally to store your app's Supabase connection.

Prompting Cursor for Setup

Let's put Cursor to work. Give it a clear instruction to set up the connection between our NextSound app and Supabase.

In Cursor chat input, type the following prompt:

Use the Supabase MCP to create a new project and set up a connection between NextSound and my database. 

Explain how to create a .env file. 

Include the VITE_SUPABASE_ANON_KEY, VITE_SUPABASE_URL and fetch their values using the Supabase MCP. 

Keep your answer very concise.

Press Enter to send the prompt.

What does this prompt say?

This prompt asks Cursor to:

Create a new Supabase project using MCP tools.
Connect the NextSound app to your database.
Help you make a .env file for storing secrets.
Include your project's VITE_SUPABASE_ANON_KEY and VITE_SUPABASE_URL.
Fetch those values using the Supabase MCP.

💡 Extra for Experts: Tips for writing good prompts to Cursor:

Be as clear and specific as possible about what you want done.
Break your request into steps when you can.
Mention important file or variable names.
State if you want an explanation or just the code.
If you're asking for sensitive info (like API keys), note that you should handle them manually for security.

AI-Driven Project Creation

Now, watch Cursor work! Since you explicitly asked it to create a project, it will use its MCP tools to set up a new Supabase project for you.

Cursor will first ask to run the list_projects tool to see if you already have a project.

Click Run to allow it.

Why does Cursor need permission?

This is for your security. Cursor asks for your permission before it runs tools that access your Supabase account. You stay in control and know exactly what it's doing.

⚠️ Should I click "Run everything"?

Cursor might show you an option to "Run everything" or "Allow all" for this chat. While this is convenient, we recommend clicking "Run" for each tool individually as you go through this project. Here's why:

Better learning: Seeing each tool call helps you understand what the AI is doing step-by-step.
More control: You can review each action before it happens.
Safety: If something looks unexpected, you can stop and ask questions.

Already clicked "Run everything"? No worries! The AI will still work correctly. You just won't see the individual permission prompts. If you want to change this setting, you can usually find it in Cursor's chat settings or by starting a new chat session.

Cursor will find that you have no projects yet, then proceed to create one. It will likely use MCP tools like get_cost, confirm_cost, and create_project, but it might also call something else, and that's ok!

What might these tool calls be doing?

Cursor might use tools like:

get_cost: A safety check to verify if the action will incur any costs.
confirm_cost: Asks for your confirmation before proceeding, ensuring you're in control of spending.
create_project: Actually creates the new project within your Supabase organization.

The exact tools and order may vary, but Cursor will work through the process to create your project. Throughout this project, you'll see Cursor use many different MCP tools to interact with Supabase. Check out the Supabase MCP documentation for a complete list!

Click Run to approve Cursor's actions as they appear.

Find your Supabase project

Let's check whether that project's been set up.

Navigate to https://supabase.com/dashboard/org in your browser.
Click on your organization to access your projects.
Select your project to open the project dashboard.

Nice! This confirms that Cursor's just set up the project for us via the Supabase MCP. We just have one more set up step to do - making sure your web app is also connected to Supabase, not just Cursor.

Creating the .env File

Once the project successfully created, Cursor will fetch your Supabase database's credentials and give them to you so you can create the .env file.

What's a .env file?

A .env (environment) file stores sensitive pieces of information, called secrets, that your app needs to work, like API keys, database passwords, or tokens.

These secrets let your code connect to services, but you should never share them publicly. That’s why tools like Cursor can’t read .env files - so you never accidentally leak your secrets!

For most security setups, .env files are protected, kept out of version control (like Git) too, so they stay private on your computer only.

Cursor typically doesn't have access to the .env file as it contains sensitive information (it's a good idea to keep this private from AI models)! So it's over to you to create this file.

Cursor will use the get_project_url and get_anon_key tools to retrieve the credentials for the new project.

Approve these actions by clicking Run.

Cursor will provide you with the credentials. Now let's create the .env file to store them.

Click on the Explorer panel on the left side of Cursor.

Right-click in the file list at the root of your project directory.
Select New File.
Name it .env.

Copy the credentials from Cursor's chat response.
Paste them into your .env file in this format:

VITE_SUPABASE_URL=[[VITE_SUPABASE_URL="your-project-url-here"]]
VITE_SUPABASE_ANON_KEY=[[VITE_SUPABASE_ANON_KEY="your-anon-key-here"]]

Save the file (Cmd+S or Ctrl+S).

Wait, why can't Cursor see my .env file? Is this super sketchy?

Great question! Storing secrets in .env files is actually a standard security practice, as long as you follow these rules:

Never commit .env to Git: The .env file should already be listed in your .gitignore file, which tells Git to never track or upload it to GitHub.
GitHub secret detection: Even if you accidentally try to push secrets, GitHub has automated scanning that detects and blocks commits containing API keys and tokens.
Keep .env local only: This file stays on your computer and is used only when running the app locally. Production deployments use separate, secure environment variable systems.

Think of .env like a safe in your house - it's secure as long as you don't publish your house blueprints (the code) with the safe combination (the secrets) written in them. The .gitignore file ensures they stay separated!

Build the Likes Feature

This is where it gets really fun! We're going to give Cursor a complex task: to build a complete likes feature for our music app. This will involve creating a new table in our Supabase database, updating the app's code to show a like button, and writing the logic to update the like count.

In this step, you're going to:

Prompt Cursor to build the entire likes feature.
Run the NextSound web app to test the new feature.

Prompting Cursor to Build the Feature

Let's give Cursor its mission. We'll provide a detailed prompt that clearly describes what we want to build.

Open a new chat in Cursor.

Why open a new chat?

Like all AI chats and agents, it's a good idea to keep your conversations on the same topic - this helps Cursor provide more accurate and relevant answers. By opening a new chat for a new debugging or development task, you avoid mixing up context from previous issues or discussion!

Enter the following detailed prompt:

Implement a likes feature that adds a heart button on every Track Card. 

Every track starts with 0 likes. 

Set up a Supabase table that stores the number of likes that each track has. The .env file already exists at nextsound/.env with VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY set. Use the Supabase MCP to read the .env values and set up the table.

Press Enter to send the prompt.

Implementing the Likes Feature

Cursor will likely use apply_migration to create the track_likes table, but it might use other tools, and that's ok!

Click Run to approve the actions.

Cursor isn't asking for my permission

If you previously clicked Run everything or Allow all in Cursor, you won't see each tool call for approval and Cursor will just run through each database action!

We recommend approving actions one by one for the best learning - seeing the steps helps you understand and spot anything unexpected.

If you're fine auto-approving, just continue; otherwise, let's make the change now to get back to manual control!

To revert "Run everything": Open the Settings icon in the top right corner, look for Permissions, and uncheck or reset the Run everything / Allow all option for this chat.
Starting a new chat will also revert to prompting for tool approval.

💡 What is apply_migration?

The apply_migration tool lets Cursor safely apply database changes (like creating tables or columns). Cursor will generate a SQL script and apply it to your Supabase database - for "likes," it means creating a table to store each song's ID and its like count.

Next, Cursor will likely initialize the like counts for all existing tracks to zero using something like execute_sql, or a similar tool.

If prompted, click Run to approve these actions.

After a few minutes (and tool calls), Cursor will let you know when it's finished deploying these changes and will invite you to test the likes feature 💪

Running the Application

Let's install the project's dependencies and start the development server to see our new feature in action.

In the terminal, run the command npm install

Once the installation is complete, run the command npm run dev to start the web app.

Check your terminal! What do you see?

Success!

Nice! Let's check if the server started correctly.

I ran into an error!

It's totally normal to run into an error here! It's typically got to do with the version of Node.js installed in your computer.

Here's an example of what another learner's run into while running the same command:

What is Node.js?

Node.js is a runtime environment that lets you run JavaScript code outside of web browsers. Think of it like this: JavaScript was originally designed to run only in web browsers (like when you visit a website), but Node.js acts as a translator that lets JavaScript run on your computer's operating system.

We recommend checking and confirming the type of error you've run into first, and following the guide below if it's a Node.js version error!

Check your Node.js version

First, let's check if you already have Node.js installed! You should still have your terminal open from when you changed branches earlier.

In your terminal, run the following command:

node --version

Terminal tip: How to stop a running command

If you ever need to cancel a terminal command that's running (like if it's taking too long or you made a mistake), press Ctrl+C on your keyboard. This sends a "stop" signal to the terminal and returns you to the command prompt.

Check your terminal! What do you see?

A 'command not found' error

If you don't have Node.js, let's run through the steps for installing it now!

Visit the official Node.js download page.

Where it says get a prebuilt Node.js, select your operating system from the dropdown.

Can I install Node.js using the terminal instead?

Yes! Advanced users can install Node.js using package managers like Chocolatey (Windows), Homebrew (Mac), or other command-line tools shown on the download page. However, for this project, we'll use the graphical installer method as it's more straightforward and ensures all components are set up correctly.

macOS

Download the Installer for macOS.

It'll take less than a minute for the Installer to download - once it's done, you'll find it in your Downloads folder!

Open your Downloads folder.
Open the Installer.

The Node.js Installer will launch with a welcome screen.

Click Continue.

The installer will display the Software Licence Agreement.

Click Continue.

A dialog will appear asking you to agree to the licence terms.

Click Agree to continue.

The installer will show the Installation Type screen. This indicates that Node.js will take 300.5 MB of space.

Click Install to proceed with the standard installation.

macOS will ask for authentication.

Enter your password or use Touch ID to authorize the installation.

The installer will validate and start installing Node.js.

This installation should take about 1-2 minutes... time for a stretch!

Once the installation is complete, you'll see a success message confirming Node.js and npm have been installed.

What is npm?

npm (Node Package Manager) is a package management system that comes bundled with Node.js. It handles installing, updating, and managing JavaScript libraries and dependencies for your projects.

Click Close.

After closing, macOS will ask if you want to move the installer to the Bin.

Click Move to Bin to clean up the installer file.

Windows

Download the Windows Installer (.msi).

It'll take less than a minute for the Installer to download.

Open your Downloads folder.
Open the Node.js installer.

Windows will show a security warning asking if you want to run this file.

Click Run to continue.

The Node.js Setup Wizard will open.

The installer will display the End-User Licence Agreement.

Check the box "I accept the terms in the License Agreement".
Click Next.

Choose the installation location. Let's keep the default location C:\Program Files\nodejs\.
Click Next.

Next, the installer will show you custom setup options. The default selections include Node.js runtime, npm package manager, and adding Node.js to your PATH.

Extra for Experts: What does "Add to PATH" mean?

Adding Node.js to your PATH environment variable allows you to execute node and npm commands from any terminal location without specifying the complete file path. This simplifies command-line usage and is standard practice for development tools.

Keep all defaults selected.
Click Next.

Click Install to begin the installation.

You may be asked for administrator permissions - if this happens, select Allow.

Wait for the installation to complete.
Once finished, you'll see a success message. Click Finish to exit the setup wizard.

Let's check we've installed Node.js properly.

Head back into your terminal in Cursor.
Run the command to check your node version again:

node --version

You should see a version number this time.

You've installed Node.js! Now we can run the app.

A version number

Great! That means you already have Node.js installed.

Let's upgrade Node.js to the latest LTS (Long Term Support) version:

nvm install lts
nvm use lts

Check your Node.js version again:

node --version

Nice! You should see the latest version of Node.js.

I'm still running into errors!

Help is on the way! If you're running into any errors, make sure to have a go at troubleshooting here or with the NextWork community.

Now that Node.js is installed, we can install the project's dependencies and start the development server to see our new feature in action.

In the terminal, run the command npm install

Once the installation is complete, run the command npm run dev to start the web app.

Let's check if the server started correctly.

The terminal will output a message indicating that the server is running, usually on http://localhost:5173. You can Ctrl/Cmd + click the link to open it directly in your browser.

Test the Likes Feature

You've made it to the final step! Cursor has generated a first attempt at this feature - let's check that it works as we expected 🧪

In this step, you're going to:

Test 'liking' tracks in your web app.
Query your database in your Cursor chat.
Update your database in Cursor!

Testing the Live Application

First, let's interact with the web app and see our new feature at work. Every time we click the heart, a request is sent to our Supabase database to update the count.

In the running NextSound application, scroll down to the Latest Hits section.
Click the heart icon on the first track to 'like' it. The count should increase to 1 and the heart should turn red.

Now, click a liked track's heart icon again to 'unlike' it. The count should return to 0, and the heart should lose its color.

✅ Likes feature is working

Excellent! Your likes feature is working correctly. You should see:

Heart icons appear on each track card
Clicking a heart increases the count and turns the heart red
Clicking again decreases the count and the heart loses its color
Changes persist when you refresh the page

You're ready to verify the data in the database!

⚠️ Something isn't working

Let's troubleshoot together! What's happening?

The app isn't loading:

Check the terminal for errors
Ask Cursor to help debug

Heart icons aren't appearing:

Make sure you ran npm install before npm run dev
Check the browser console for errors (press F12)
Ask Cursor for help

Clicks aren't working or counts aren't updating:

Check your browser console for errors (press F12)
Verify your Supabase connection in the .env file
Ask Cursor to investigate

Great! But how can we double check that the data is being saved? Let's check the source of truth: our Supabase database.

Navigate to https://supabase.com/dashboard/org in your browser.
Click on your organization to access your projects.
Select your project to open the project dashboard.

In the left sidebar, select Table Editor.

Select the track_likes table. Your table might be called a different name depending on how Cursor implemented this change - that's totally okay!

The data in the table should match the likes you just set in the web app. This confirms our frontend (the like button on top of every track) and backend (the database) are perfectly in sync 🤝

The like counts in my database looks different to the web app!

Interesting! Let's see what's happening in the codebase... let's troubleshoot this error with Cursor.

💡 How do I know that the data in the table matches with the web app?

Ooo good question. The next section touches on this (you'll get to chat with your database so the rows and IDs are translated to songs and names we'd recognize), but you can also do a cheeky investigation now!

Pick a track_id that's in your database, and try to search for it in your codebase... does the track_id map to a track in NextSound?

Querying Your Database

The Supabase console is useful, but imagine being able to get insights into your database without having to leave Cursor 🤯 Let's ask Cursor to fetch some information for us...

In a new Cursor AI chat, type the following prompt:

What tracks are currently liked in NextSound? Use the Supabase MCP

Press Enter to send the prompt.

Cursor will likely use tools like list_tables and execute_sql to query the database, but it might also call something else, and that's ok!

Click Run to approve the actions as they appear.

Extra for Experts: Where can I find a list of all these tool calls and what they do?

You can always check out the Supabase MCP documentation for a complete list of ALL tool calls and what each one means!

Now, let's see Cursor's response when it's ready.

Cursor will respond with a formatted summary of the liked tracks, including their titles, artists, and like counts.

This information should match exactly with what you see in the web app and the Supabase dashboard!

Nice - you just queried a database without writing any code.

Updating the Database with Natural Language

Let's take it one step further. We can also command Cursor to change data in the database directly.

In your chat with Cursor, type the following prompt:

Update the number of votes for Espresso (an existing track) to 20 votes. Use the Supabase MCP

Press Enter to send the prompt.
Click Run to approve any actions as they appear.

How does Cursor know which track is 'Espresso'?

This is a great example of Cursor's context-awareness. Cursor has access to all the files in your project! It can look inside the mock data files (e.g., src/data/tracks.ts) to find the track_id associated with the song titled "Espresso".

Using this track_id, Cursor constructs the appropriate SQL UPDATE statement to modify the correct row in the track_likes table.

Nice! Once Cursor has updated the track's like count, let's verify the change in the app.

Refresh your NextSound web app in the browser.

You should now see that the track 'Espresso' by Sabrina Carpenter has 20 likes.

Switch tabs to your Supabase table.

You should now see that one of the tracks has a like count of 20... that means Cursor successfully used the Supabase MCP to update the record's like count.

Nice work, you've just updated a database record... all within your Cursor chat!

Secret mission

Extend the App with User Authentication

Delete your resources

Now that we've built and tested our web app, it's time to clean up the resources we created. This is important to keep your accounts tidy and avoid any unexpected charges, even for free-tier resources.

Resources to delete:

Delete the Supabase project.
Delete the local project folder.

Delete Supabase Project

Navigate to the Supabase dashboard.
Select the NextSound MCP Project project.
In the left sidebar, click the Project Settings (gear) icon.
Go to the General tab.
Scroll all the way down to the bottom.
Click Delete Project.
A confirmation modal will appear. Type the name of your project to confirm.
Click Delete Project to permanently delete your database and all associated services. Not deleting this could lead to charges if your usage exceeds the free tier limits in the future.

Delete Local Folder

Open your computer's file explorer (Finder on macOS, File Explorer on Windows).
Navigate to the location where you saved the project (e.g., your Desktop).
Find the nextsound folder.
Right-click on the folder.
Select Delete or Move to Trash/Bin to remove the project code from your local machine.

That's a wrap!

Nice work! 🤖 You've successfully built a web app and managed its database using an AI agent!

You've learned how to:

⚙️ Set up a modern development environment with Cursor and Supabase.
🔗 Connect an AI agent to external services using the Model Context Protocol (MCP).
🤖 Command an AI to create and configure a cloud database project from scratch.
❤️ Prompt an AI to implement a full-stack feature, including database schema changes and frontend UI updates.
💬 Interact with a database using natural language to query and update data, without writing any SQL.

Ready to quiz yourself? 💪

😈 Ready for more?

Now that you've mastered using Cursor with the Supabase MCP, why not create your own features for NextSound? You could add:

A comments section for tracks
Playlist creation feature
User profiles with favorite artists
A rating system (1-5 stars)

Build something cool and share it with us! Post your project on GitHub or in the NextWork community - tag us @NextWork, we'd love to see what you create! 🚀

p.s. Does it say "Still tasks to complete!" at the bottom of the screen?

This means you still have screenshots left to upload, or questions left to answer!

Press Ctrl+F (Windows) or Command+F (Mac) on your keyboard.
Search for the text Return to later.
Jump straight to your incomplete tasks!
🙋‍♀️ Still stuck? Ask the community!