How To Use Cursor AI (Full Tutorial For Beginners 2025)

Key Concepts

• Cursor IDE: An AI-powered code editor.
• Agent Mode: Cursor mode for writing new code.
• Ask Mode: Cursor mode for asking questions about the codebase.
• Manual Mode: Cursor mode for manual coding.
• GitHub: A platform for hosting and managing code.
• Versel: A platform for deploying web applications.
• Superbase: An open-source Firebase alternative for backend services.
• Next.js: A React framework for building web applications.
• Environment Variables (.env.local): Securely storing API keys and sensitive data.
• MCP (Model Context Protocol): An advanced API for LLMs to access external tools.
• Xcode: IDE for developing iOS applications.
• YOLO Mode (Auto-run Mode): Automatically runs all tools and generates code without confirmation.
• Codebase Indexing: Cursor's process of analyzing and understanding the code in a project.
• Cursor Rules: Project-specific guidelines for Cursor to follow when generating code.

1. Introduction to Cursor

• Cursor is a desktop software (available for Windows and Mac) that helps generate code.
• It's more powerful than browser-based tools like Bolt or Ruplet.
• Cursor is a fork of VS Code, a popular IDE.
• It allows publishing code on a local machine and connecting to hosting tools like Superbase and Versel.

2. Getting Started with Cursor

• Download Cursor from cursor.sh and sign up for an account.
• Cursor offers a free tier and a pro tier ($20/month for 500 premium requests).
• The pro tier provides faster code generation using premium models.
• Credits are used up as you code, with slower generation after using all premium credits.

3. Cursor Interface Overview

• The interface includes a chat interface for conversational coding.
• Modes:
  • Agent Mode: Primarily for writing new code.
  • Ask Mode: For asking questions about the codebase.
  • Manual Mode: For manual coding.
• Web search is integrated into Cursor.
• Users can upload images to generate front-end assets.
• The left sidebar displays files and folder structure.
• Source control allows publishing and managing code on GitHub.
• Extensions extend Cursor's functionality (e.g., Docker).

4. Cursor Settings

• Access settings through the tabs-based system.
• Customize appearance (dark mode, font, etc.).
• Activate privacy mode to prevent code sharing for training LLMs.
• Features Tab:
  • Set default mode (Agent recommended).
  • Enable Auto-run Mode (YOLO Mode): Automatically runs tools and generates code without confirmation. Recommended for experienced users.
  • Beta toggles for new features, including web search.
  • Codebase indexing status and re-sync option.
• Models Tab:
  • Choose the AI model for code generation.
  • Claude 3.7 is recommended for reliability.
  • API keys for OpenAI, Google Gemini, Azure, or Amazon Bedrock can be added.

5. Cursor Rules

• Global or project-specific rules to guide code generation.
• Useful for enforcing coding principles and best practices.
• Example: Following Google's material design principles for UI.
• Create a cursor_rules.txt file in the project.
• Use cursor.directory to find and copy pre-made rules (e.g., for Next.js).

6. MCP (Model Context Protocol) Server

• An advanced API for LLMs to access external tools (web search, other LLMs, Zapier).
• Add a new global MCP server via a JSON file.
• Use cursor.directory to find MCP configurations (e.g., for Superbase).

7. Setting Up a Web App Project

• Create a new folder for the project.
• In Cursor, click "Open Project" and select the folder.
• Use Next.js, Superbase, and Versel for web app development.
• Prompt Cursor to set up the project with security in mind:
  • "Set up my project in next JS connecting to superbase and using env.lo to securely store my environment details and keys. For deployment on Versel ensure adequate dependencies and versions."
• Cursor will create necessary files, install dependencies, and set up the .env.local file.
• Follow Cursor's instructions to set up a Superbase project and add credentials to the Cursor project.

8. Setting Up an iOS App Project

• Install Xcode.
• Create a new Xcode project (iOS -> App).
• Choose a project name and organization.
• Select Swift as the language.
• Create the project in the desired folder.
• In Cursor, click "Open Folder" and select the Xcode project folder.

9. Generating UI from Images

• Drag an image (e.g., a Figma mockup) into Cursor.
• Prompt Cursor to create a page similar to the image.
• Example: "create a page similar to the image that I can use to access different AI functions like in the screenshot"
• Cursor will analyze the image and generate the front-end code using Next.js, Tailwind, and TypeScript.

10. Running and Testing the Project

• Follow Cursor's instructions to start the development server (e.g., npm run dev).
• Copy the provided URL into a browser to view the landing page.

11. Rolling Back Changes

• If Cursor makes unwanted changes, click "Restore Checkpoint" to revert to a previous state.
• This is especially useful when using Auto-run Mode.

12. Conclusion

• Cursor is a powerful AI coding tool that can significantly speed up development.
• It's important to be specific with instructions and understand coding principles.
• Security is crucial; use .env.local to store sensitive information.
• Cursor can generate UI from images and automate project setup.
• Future videos will cover building full web apps and iOS apps from start to finish.