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 a simple Quiz app, then proceed to building React web apps with users and nt data. Even if you've never coded before, you can learn to develop real software.
​
Setup
1. Go to cursor.com.
​
2. Click on 'All Downloads'.
​
​
​
​
​
​
​
​
​
​
3. Select the correct version based on the specs of your machine.
Note: Cursor provides you two-week free trial of their Pro version when you sign up. After the two weeks, it is $20/month. So if you're just trying it out, make sure to schedule some time over the two-week startup period.
​
If you are a university student, you can sign-up for one year of free Pro version!
Tutorial: Build a Trivia App
1. In your computer's Finder app, create a folder named 'CursorProjects'. Within that folder, create a sub-folder named 'TriviaApp'.
​​
2. Open the Cursor app.
​
3. In Cursor, click on 'Open Folder' option within the "File" tab of the top menu. Open your 'TriviaApp' folder.
​
4. Open the Cursor Composer chat window by selecting its icon in the right corner. Make sure "Agent" is chosen as the mode.
​​​
​
​
​
​
​
​​​
​
5. 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.”
​
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. Run your app: open your Finder/File Manager app, navigate to the folder where the generated code is, and double-click on the generated file named "index.html". A browser should open showing your web page. Click the button on the web page-- does it change color to red?
​​
Alternative run method: from the "Run" tab in Cursor's top menu, choose "Run without Debugging". You may get an option to create a new file called 'launch.json'-- ignore this.
​​
​8. Customize the quiz:
-
Prompt Cursor's chat to change to the questions and answers you want for your quiz.
-
Prompt 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.
​
If you see an error, copy-paste it into Cursor and ask Cursor to fix it..
​​