Step-by-Step Guide to Using Cursor AI for Faster, Smarter Coding

Get Started with Cursor AI: A Step-by-Step Tutorial

Cursor AI is an AI-powered code editor that can speed up coding by generating and modifying code autonomously. Unlike traditional coding assistants that mainly help with autocomplete or review, Cursor AI can create entire code sections, debug, and optimize your projects using different large language models (LLMs).

Built on Visual Studio Code, Cursor enhances the familiar development environment by integrating AI features like code generation and a chatbot to query your codebase. It indexes your files to provide precise, context-aware responses and supports multiple programming languages and GitHub integration. Cursor is especially useful for prototyping, bug fixing, and code documentation.

Key Features of Cursor AI

Agent Mode

Cursor’s default agent mode acts as an autonomous assistant that handles tasks on your local filesystem. It breaks complex problems into smaller steps, analyzes your codebase, plans solutions, executes tasks, and verifies results while keeping you informed.

Use agent mode for debugging, optimizing, generating test cases, or adding features. It works best with clear instructions and benefits from developer oversight. Other modes include ask mode for queries, manual mode for precise code changes, and custom modes for personalized assistance.

Rules

When Cursor modifies source code, it doesn’t follow a fixed process by default. To guide its behavior, you can define Rules, which act as persistent instructions the AI follows across interactions. This helps maintain consistent coding style and project-specific requirements.

• Keep rules concise (under 500 lines).
• Break large processes into multiple rules.
• Include examples or reference files if helpful.
• Avoid vague instructions; rules should resemble detailed internal documentation.

For ready-made rules across different frameworks and languages, check out the Cursor rules directory.

Documentation

Adding documentation as context helps Cursor understand new frameworks or languages better. You can attach relevant docs to your project so the AI references them when generating code.

Cursor includes predefined documentation sets for popular tools. For example, if you work with Terraform, adding its documentation ensures Cursor uses correct syntax and values.

Tutorial: Create a Web Application with Cursor AI

This tutorial guides you through building a simple web app called LLM vRAM sizer that helps visualize GPU requirements for hosting large language models.

1. Install Cursor AI
   Cursor supports most operating systems. Use package managers:
   Mac: brew install --cask cursor
   Windows: winget install --id=Anysphere.Cursor -e
   Or download directly from the Cursor website. Open Cursor on an empty folder to avoid unwanted file changes.
2. Select Your Language Model
   Cursor offers several LLM options, including models optimized for reasoning. You can choose one manually or let Cursor auto-select the best model. This tutorial uses Claude 3.7 Sonnet, known for strong coding abilities.
3. Develop Your Prompt
   A clear, detailed prompt leads to better results. For this app, use:
   "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
   After submitting the prompt, Cursor generates a terminal command and asks for your permission to run it. You can configure whether to approve commands manually or run them automatically.
5. Review the Code
   Cursor shows each file's content before creating it. This review step is crucial because AI-generated code can contain errors or inaccuracies. Verify quality and adherence to your requirements.
6. Start the Application
   Once files are created, the app runs in the background. Cursor displays the endpoint URL where you can access the web app, which features a minimal design.
7. Add Rules
   Use the New Cursor Rule command or go to Cursor Settings > Rules to create a rule file in .cursor/rules. For example, applying the React Native 0.78 rule and recreating the app results in a cleaner, more polished UI by providing Cursor with better context.
8. Add Documentation
   Add relevant docs to boost Cursor's understanding. For instance, add the Tailwind CSS CheatSheet via Cursor → Preferences → Cursor Settings → Features, under Docs. Reference documentation in chat by typing @Docs and selecting the desired set. Cursor can even handle minor typos when referencing docs.

Cursor AI offers a practical way to accelerate development by combining AI assistance with familiar tools and workflows. For those interested in expanding skills with AI tools in development, consider exploring curated training options on Complete AI Training.