Skip to content

Latest commit

 

History

History
115 lines (92 loc) · 10.9 KB

File metadata and controls

115 lines (92 loc) · 10.9 KB

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

Disclaimer: This is a personal summary and interpretation based on a YouTube video. It is not official material and not endorsed by the original creator. All rights remain with the respective creators.

This document summarizes the key takeaways from the video. I highly recommend watching the full video for visual context and coding demonstrations.

Before You Get Started

  • I summarize key points to help you learn and review quickly.
  • Simply click on Ask AI links to dive into any topic you want.

AI-Powered buttons

Teach Me: 5 Years Old | Beginner | Intermediate | Advanced | (reset auto redirect)

Learn Differently: Analogy | Storytelling | Cheatsheet | Mindmap | Flashcards | Practical Projects | Code Examples | Common Mistakes

Check Understanding: Generate Quiz | Interview Me | Refactor Challenge | Assessment Rubric | Next Steps

Getting Started with Cursor Download and Setup

  • Summary: Cursor is a desktop app for Mac or Windows that helps generate and manage code locally, connecting to tools like Supabase for databases and Vercel for deployment. Download it from cursor.com, sign up for an account, and create a new project by opening a folder.
  • Key Takeaway/Example: Start with a blank project in your downloads folder for testing, and it integrates as a fork of VS Code for powerful coding features.
  • Link for More Details: Ask AI: Cursor Download and Setup

Understanding Cursor Pricing and Tiers

  • Summary: Cursor offers a free tier with a 2-week trial, and the Pro tier at $20/month provides 500 premium requests. Credits are used for code generation, similar to Midjourney, and once depleted, it switches to slower free options.
  • Key Takeaway/Example: For hobby projects, the free tier works well, but Pro avoids wait times for faster results.
  • Link for More Details: Ask AI: Cursor Pricing Tiers

Exploring the Cursor Interface

  • Summary: The interface includes a chat panel for natural language coding, modes like Agent for new code, Ask for querying your codebase, and Manual for direct edits. It supports web search, image uploads for UI generation, file explorer, search, source control for GitHub, and extensions.
  • Key Takeaway/Example: Stick to Agent mode for simplicity; upload Figma mockups as images to generate matching web pages.
  • Link for More Details: Ask AI: Cursor Interface Overview

Customizing Cursor Settings

  • Summary: Access settings to manage account, appearance, privacy, and features like default mode and auto-run (formerly YOLO mode) which lets the agent run without pauses. Toggle beta features like web search, and check codebase indexing.
  • Key Takeaway/Example: Turn off auto-run when starting to review steps; reindex if needed for accurate searches.
  • Link for More Details: Ask AI: Cursor Settings Customization

Selecting Models in Cursor

  • Summary: Choose from models like Claude 3.5 Sonnet (recommended for reliability), Gemini, or others; Cursor selects automatically but you can add API keys for custom use. Premium models use credits, falling back to free ones.
  • Key Takeaway/Example: For best results, enable only Claude 3.5 and add your Anthropic API key.
  • Link for More Details: Ask AI: Cursor Model Selection

Using Cursor Rules for Project Guidelines

  • Summary: Add global or project-specific rules to enforce coding best practices, like style and structure. Create a .cursor-rules file and copy templates from cursor.directory for frameworks like Next.js.
  • Key Takeaway/Example: Paste rules for TypeScript and Next.js to maintain consistency across the project.
You are an expert in TypeScript, Node.js, NextJS, app router, and a bunch of other stuff.

Adding MCP Servers for Advanced Integrations

  • Summary: MCP servers act like advanced APIs for LLMs, allowing connections to tools like Supabase, GitHub, or Zapier. Add a .mcpservers.json file and copy setups from cursor.directory.
  • Key Takeaway/Example: Use for database handling or authentication in scalable apps.
  • Link for More Details: Ask AI: Cursor MCP Servers

Enabling Beta Features

  • Summary: Switch on early access in beta settings for weekly updates and new tools.
  • Key Takeaway/Example: Great for trying the latest features as Cursor evolves.
  • Link for More Details: Ask AI: Cursor Beta Features

Setting Up a Web Project with Next.js

  • Summary: Plan your project, like a ChatGPT clone using Next.js, Supabase, and Vercel. Prompt Cursor to set up with secure environment variables via env.local and gitignore for deployment readiness.
  • Key Takeaway/Example: Prompt example: "Set up my project in Next.js connecting to Supabase and using env.local to securely store my environment details and keys. For deployment on Vercel ensure adequate dependencies and versions."
  • Link for More Details: Ask AI: Cursor Web Project Setup

Setting Up an iOS Project

  • Summary: For iOS, install Xcode, create a new app project with Swift, then open the folder in Cursor where files are pre-populated.
  • Key Takeaway/Example: Select iOS app in Xcode, name it, and open in Cursor to start coding.
  • Link for More Details: Ask AI: Cursor iOS Project Setup

Generating UI from Images

  • Summary: Upload images or screenshots (e.g., from Figma) into the chat to generate matching front-end code using Next.js and Tailwind.
  • Key Takeaway/Example: Prompt: "Create a page similar to the image that I can use to access different AI functions like in the screenshot." Cursor analyzes and builds autonomously.
  • Link for More Details: Ask AI: Cursor Image to UI

Running and Debugging the Project

  • Summary: Run the dev server with "npm run dev" to test locally in the browser. Use restore checkpoint to rollback changes if errors occur or code goes off-track.
  • Key Takeaway/Example: Copy error logs into Cursor for fixes; be specific in prompts to avoid issues.
  • Link for More Details: Ask AI: Cursor Running and Debugging

About the summarizer

I'm Ali Sol, a Backend Developer. Learn more: