Getting Started with Cursor

Cursor is a Text-to-code AI tool that can generate complete apps from English commands. Unlike some AI code completion tools, Cursor is aware of your entire code base and will create/modify multiple files based on your instructions.

You'll start by building some simple web apps, then proceed to building React web apps with users and persistent data. Even if you've never coded before, you can complete the tutorials and learn to develop real software.

0. Set-Up

1. Build Two Simple Apps

2. Build Apps with Users/Data

Setup

1. Go to cursor.com.

2. Click on 'All Downloads'.

3. Select the correct version based on the specs of your machine.

Tutorial 1: Build Two Simple Apps

ClickRedBlue App

Build a simple interactive app with a single button that, when clicked, turns from red to blue.

1. In your Finder app, create a folder named 'CursorProjects'. Within that folder, create a sub-folder named 'ClickRedBlue'.

2. Open the Cursor app.

3. Click on 'Open Folder' option within the "File" tab of the top menu. Open your 'ClickRedBlue' folder.

4. Open the Cursor Composer chat window by selecting its icon in the right corner.

5. Enter the following instructions in the Chat panel: "Please create a web app with a single button. When the user clicks the button, it changes from blue to red. Please create the app with simple vanilla HTML, CSS, and Javascript."
Press 'Enter' to complete the command.

6. Composer will generate some code and an “Accept All” button will appear towards the bottom of composer. Click that button. You should see some files, including index.html, created in your folder in the left panel.

7. From the "Run" tab in the top menu, choose "Run without Debugging". You may get an option to create a new file called 'launch.json'-- ignore this. A browser should open showing your web page. Click the button on the web page-- does it change color to red?

Alternative Run Method: In your Finder app, navigate to the folder where the generated code is and double-click on the file named "index.html".

8. Try some modifications by typing some text directly into the AI composer. Type in your request and click accept. Test your changes.

Example: toggle the button color from blue to red to purple, and add a second button that stays the same color as the first button

Quiz App

Next, build something more practical, a trivia app.

1. In your Finder, create a second sub-folder named “QuizApp” within your "CursorProjects" folder.

2. In Cursor, choose "Open Folder" from the "File" tab in the top menu, and open your new “QuizApp” folder.

3. In the Composer AI panel, enter, “Build a simple quiz app that lets a user answer the following questions: ‘What is the capital of California’ and ‘What is the capital of Texas’. Tell the user if their answer is correct or not and provide the right answer if not. Please create the app with simple vanilla HTML, CSS, and Javascript.”

4. From the "Run" tab in the top menu, choose "Run without Debugging". Does the quiz work as you would expect.

5. Customize the quiz:

Ask composer to change to the questions and answers you want for your quiz.
Ask composer to keep score in some manner (e.g., track the number correct or number of misses)
Try out some feature ideas of your own.

Troubleshooting

If your app isn't loading or working as expected, it might be a coding error. Chrome's JavaScript Console helps you see error messages and figure out what's wrong with your app.

Open the JavaScript console: from the browser window showing your app, choose “View” from the top menu, then “Developer | Javascript Console”. The console provides information about any running app. Errors are marked in red.

Past errors into Cursor chat: If you see an error, copy it, then paste it into Cursor composer. You might prefix the error message with: “the app is getting the following error:” and ask Cursor to explain it or fix it.

Tutorial 2: Apps with Users and Data

Set-Up

In this tutorial, you’ll build a web app with users and a database. You'll use Google's Firebase to handle both user authorization and the persistent data for the app.

To prepare for this tutorial, you'll need to learn how to use the command-line terminal on your computer. Check out the following: Learn Basic Terminal Commands

MyPeeps App

MyPeeps is a simple app for storing people in your interest network. Like a customer relations manager (CRM) you can add people and organize them into groups. You can also add articles and "people-tag" the articles.

1. In your Finder, create a new Folder called "mypeeps".

2. In Cursor, choose 'Open Folder' from the File tab in the top menu, and choose the folder just created.

3. In the Composer panel, enter the following prompt: “Create a web app that lets the user keep track of important persons they come across in their research. The home page should list the persons already entered. The home page should also have a + button that when clicked opens a second window, which allows a new person to be added. Please create the app with simple vanilla HTML, CSS, and Javascript.”

Cursor will generate a lot of code, a process which will take a minute or two. Once it completes, click on the "accept all" within the chat panel, then follow the instructions the chat screen provides to run the app.

You can test the app by navigating to your folder and double-clicking the index.html file

The app should open in a browser. As the test user, see if you can add a person and if that person is added to the list. Also, refresh the app: Do you lose your data?

Add User Registration and Login

Almost all apps allow users to login and set basic profile information. In this section, you'll setup Google’s Firebase to setup simple user authorization through Google:

1. Follow this tutorial to setup your Firebase project.

2. Before closing Firebase, copy the settings for your Firebase project.

3. In the terminal, make sure you are in your project folder, then run:

% npm install firebase

4. In Cursor, request the following changes within the composer dialogue: "add user registration and login to the app, and change the app to use persistent data with a Firebase Firestore database. Make it so the data is user specific-- each user has their own list of persons that they can record. Use the following Firebase project settings: [add your Firebase settings]"

5.When Cursor finishes, choose “accept all” and re-test the app.

Add People Collections to the App

1. Request the following from composer: "Change the app so that the user can add groups and put persons into groups. The app should have tabs for 'People' and 'Groups'. When the user clicks on a group it should open a page showing the group title and a list of the persons in the group. Clicking on a person should generate a popup that allows the user to add the person to any of the groups."

2.Accept the changes then test the app to see if you can now add groups and place persons in groups.

Add Images to the People Cards

You can ask composer to add whatever fields you’d like to the profiles for each person. One you most likely want is a profile picture. You need a place in the cloud to store uploaded media files. One tool with a nice free tier is Cloudinary-- you can upload media files there and use the URL the tool assigns, and you can have your app use their API to do the same. If you don't have a free account at cloudinary.com, get one.

Ask composer to refine the app to let the user add profile pictures for the persons added. In your request, explicitly tell Cursor that you want to use Cloudinary. You'll need some information from your Cloudinary account, and Cursor will walk you through the steps. You can also follow these instructions:

Login at cloudinary.com
Choose the settings icon in near the bottom of the left-side menu.
Choose "Upload" in left menu.
Click "Add Upload Preset"
Set signing mode to "Unsigned".
Copy the preset name
Back in the composer chat, let Cursor know your preset info

Add Update and Delete

CRUD is an acronym for database operations: C (create) R (read) U (update) and D (delete) are the operations you need for most data. The app thus far has creation and reading, but you'll need to instruct it to allow for updating and deleting of data.