Get started with Cursor AI: A step-by-step tutorial

How does Cursor AI work?

Cursor AI is built on Visual Studio Code, a popular IDE from Microsoft. Cursor takes VS Code's development capabilities and user-friendly interface further by integrating AI features such as code generation and the ability to query a chatbot about your codebase.

Cursor uses code indexing to enhance the accuracy of its answers. By generating embeddings for each file, Cursor can better understand your code, leading to more relevant and precise responses. The tool also supports multiple programming languages, integrates with GitHub, and is helpful for various use cases, such as prototyping, bug fixing and code documentation.

Three key features of Cursor AI are especially useful for developers: agent mode, rules and documentation.

Agent mode

Cursor's default agent mode enables the tool to act as an autonomous agent that creates content on the local filesystem.

Cursor's agent mode can break complex tasks into smaller, more manageable steps. It autonomously analyzes a given task, explores your codebase and relevant files, plans a way to solve the task, executes the planned steps, and verifies success, all while keeping you informed.

Developers can use agent mode to help with complex tasks such as debugging, optimizing code, generating test cases or implementing new features. However, agent mode works best with clear instructions and often needs developer oversight to ensure task success.

Cursor's other modes include ask mode, for AI search and queries; manual mode, for more precise code changes and file targeting; and custom modes, for more personalized AI assistance.

Rules

When you ask Cursor to make changes to the source code -- such as adding a button, changing a toggle or changing the color scheme -- it does not follow any strict rules or processes. Instead, it just tries to change the code, which can sometimes adversely affect the project if the tool doesn't know which parameters to follow.

Like many other generative AI tools, Cursor lets you define a system prompt: a base set of instructions that the language model should follow in all conversations and in response to all user prompts. In Cursor, this functionality is called Rules.

Rules define how the Cursor agent should behave. LLMs do not retain memory from action to action. The Rules feature addresses this limitation by providing persistent, reusable context for each query.

When creating rules, keep the following guidelines in mind:

• Keep rules concise -- ideally, less than 500 lines.
• Split extensive processes into multiple, composable rules.
• Provide concrete examples or reference files when helpful.
• Avoid vague guidance; rules should resemble detailed internal technical documentation.

For rules for various frameworks and languages, check out this Cursor directory.

Documentation

Another approach is to add documentation as context. This ensures that Cursor will reference that information when creating code.

Adding documentation is helpful if you plan to develop an application for a new framework or programming language because the context helps Cursor understand the code better.

Cursor also comes with predefined documentation sets. These are highly recommended when working on a specific framework or coding language. For instance, when using Cursor with the IaC tool Terraform, you can add Terraform documentation to ensure it uses the correct values.

Tutorial: Create a web application with Cursor

Follow along with this Cursor AI tutorial to create a simple web application called LLM sizer.

1. Install Cursor AI

You can install Cursor on most OSes. That can be deployed using package managers:

Mac: brew install --cask cursor

Windows: winget install --id=Anysphere.Cursor -e

You can also download the app directly from the Cursor website.

Once you have downloaded and installed Cursor, you can access the main interface. Before you start a project, make sure that you open Cursor against an empty folder on your device. This ensures that Cursor does not change existing files or source code.

2. Select your language model

Cursor's model picker includes various LLM options, including multiple "thinking" models optimized for reasoning. It offers an autoselect option that dynamically chooses the best model for the task at hand.

You can also manually select the language model you want to use. This tutorial uses Claude 3.7 Sonnet, which excels at writing code.

3. Develop your prompt

The prompt determines the style and setup of the web application. The more description you give, the more likely you are to get a good result. This tutorial uses the following prompt to create the application:

"Create a web application that allows me to size which GPU I should use for LLMs that I want to host. the sizer should show different GPUs and how much vRAM they have. There should be a slider to indicate how large the LLM models are in the amount of billion parameters. If the model is 8 billion it should be at least 16 GB of vRAM, if the model is 16 billion it should be at least 32 GB of vRAM. The name of the web application is LLM vRAM sizer. The web app should also have a toggle to switch between light/dark mode."

4. Permit web application creation

Once you click Enter, Cursor writes a terminal command, which it asks for permission to run. This command creates the web application. You can also configure whether Cursor should ask permission for each action or automatically run terminal commands.

5. Review the code

For each file Cursor creates, it will ask you to review the content before creating it on the filesystem. This is an essential step because AI can hallucinate, meaning it can produce false or misleading output. Having a human review code for quality, accuracy and adherence to requirements helps ensure that any code created is error free and meets your project's needs.

6. Start the application

After Cursor creates the source code, the application starts in the backend, and Cursor lists the endpoint where the application is available. The application is minimalistic, as seen in Figure 4.

7. Add rules

You can create rules using the New Cursor Rule command or by going to Cursor Settings > Rules. This will create a new rule file in the .cursor/rules directory. The Settings menu also shows a list of all rules and their statuses.

To show how significant of an effect rules can have on the resulting application, use this rule found on the Cursor directory website listed above:

"Rules for cursor for react [email protected]"

Issue the following command after you apply the rule:

Recreate the web application

Adding that specific rule and enabling Cursor to recreate the website gives you a much cleaner and sleeker UI compared with the initial website. This is because the rule gave Cursor better context on how to develop the application and which web development frameworks to use.

8. Add documentation

Lastly, add relevant documentation to give Cursor even more context.

For example, you can add the Tailwind CSS CheatSheet found here by going into Cursor → Preferences → Cursor Settings → Features and scrolling down to the Docs section.

Once you have added documentation, you need to reference it for Cursor to use it. You can do that by opening the Chat window, typing "@Docs" and selecting the Tailwind CSS docs from the list. You can then reference the docs in the Cursor chat.

Note the other items that appear in the list. These are predefined docs from Cursor, such as AWS and PyTorch. So, for instance, if you are developing for AWS, you should reference the AWS docs; regardless of which language model you use, it won't inherently have in-depth knowledge of all AWS-specific components.

Marius Sandbu is a cloud evangelist for Sopra Steria in Norway who mainly focuses on end-user computing and cloud-native technology.