The Ultimate Guide
Cursor is a code editor with an AI brain built in. Think of it as Microsoft Word, but instead of writing essays, you are building websites and apps -- and the AI does most of the heavy lifting for you. This guide covers everything from installation to advanced tips.
Cursor is an AI-powered code editor built on top of VS Code -- the most popular code editor in the world. If VS Code is a regular car, Cursor is the same car with a self-driving system installed. The dashboard looks the same, the buttons are in the same place, but now the car can drive itself when you tell it where to go.
With Cursor, you can:
If you like seeing your files in a sidebar, clicking to open them, and having a nice interface -- Cursor is your tool. It is a full desktop app, not a terminal.
Already use VS Code? Cursor is basically VS Code with AI superpowers. Your extensions, themes, and shortcuts all carry over. The switch takes about 2 minutes.
Cursor works great for teams. Everyone can use their own AI settings while sharing the same project. The Business plan adds admin controls and shared rules.
Hobby (Free)
$0/mo
Limited AI requests. Great for trying it out and small projects.
Pro
$20/mo
500 fast AI requests per month plus unlimited slow requests. Best for most people.
Business
$40/mo
Everything in Pro plus admin controls, team billing, and enforced privacy mode.
Go to cursor.com and click the download button. It works on Mac, Windows, and Linux. The download is about 200MB -- similar in size to any regular app.
On Mac, drag it to your Applications folder. On Windows, run the installer. That is it -- no command line, no terminal, no special setup needed.
When you first open Cursor, it will ask if you want to import your VS Code extensions, themes, and keybindings. If you have used VS Code before, say yes. If not, skip this step.
Create a Cursor account or sign in with Google or GitHub. The free tier gives you limited AI requests to try things out before committing to a paid plan.
Click File > Open Folder and select the folder containing your project. If you are starting fresh, create a new empty folder first. Cursor will index all the files so the AI understands your project.
Select any code, press Cmd+K (or Ctrl+K on Windows), and describe what you want to change. Like telling a coworker: 'Hey, can you make this button red instead of blue?' Cursor rewrites just that part.
Open a chat sidebar to ask questions about your project. It reads your files and gives answers with context. Think of it as a knowledgeable coworker who has read every line of your code.
As you type, Cursor predicts what you want to write next and shows a grayed-out suggestion. Press Tab to accept it. It is like predictive text on your phone, but for code.
In the chat, type @ followed by a filename to give the AI context about specific files. You can also @-mention documentation URLs, so Cursor reads them before answering.
Composer is multi-file editing mode. Instead of editing one file at a time, you describe a feature and Cursor creates or modifies multiple files at once. Perfect for adding a new page with all its components.
A special file you put in your project root that tells Cursor how your project works. Think of it as a cheat sheet for the AI -- 'we use Tailwind CSS, our components go in /components, always use TypeScript.'
Paste a screenshot or design mockup directly into the chat. Cursor will look at the image and try to build what it sees. Great for saying 'make it look like this' without describing every detail.
When you open a project, Cursor scans all your files to understand the big picture. This means the AI knows about your database setup when you ask about your homepage -- it sees the whole puzzle, not just one piece.
Cursor has a built-in terminal (just like VS Code). The AI can suggest terminal commands and even run them for you. No need to switch between apps to install packages or start your development server.
The most powerful mode. Agent can autonomously plan and execute multi-step tasks: read files, write code, run commands, fix errors, and keep going until the job is done. Like having a junior developer that follows your instructions.
You do not need to memorize all of these. Start with Cmd+K and Cmd+L -- those two will get you 80% of the way there. The rest you can pick up over time. (On Windows, replace Cmd with Ctrl.)
Cmd + KInline edit
Select code, press this, describe the change
Cmd + LOpen chat
Ask questions about your project in a sidebar
Cmd + IOpen Composer
Multi-file editing mode for bigger features
TabAccept autocomplete
Accept the grayed-out AI suggestion
Cmd + Shift + JToggle AI panel
Show or hide the AI chat sidebar
@ in chatReference files
Tag specific files for the AI to focus on
EscapeCancel / dismiss
Cancel the current AI suggestion or prompt
Copy and paste these directly into Cursor's chat (Cmd+L) or inline edit (Cmd+K). Modify them to match your project.
Understand your codebase
"Explain how this project is structured. What are the main folders and files, and what does each one do? Give me a high-level overview like you're explaining it to someone who has never seen this code before."
Build a new component
"Create a pricing card component that shows a plan name, price, list of features, and a 'Get Started' button. Style it to match the existing design of this project. Make it responsive so it looks good on mobile."
Debug an error
"I'm getting this error: [paste your error here]. What's causing it and how do I fix it? Explain what went wrong in simple terms."
Styling and CSS changes
"Make this section look more modern. Add more whitespace between elements, round the corners of the cards, and use a subtle shadow. Keep the existing colors."
Add a new page or route
"Add a new /about page to this project. Include a hero section with a headline and description, a team section with 3 team member cards, and a contact section with an email link. Match the styling of the homepage."
Database queries
"Show me how to fetch all blog posts from the database, sorted by newest first, and display them on the /blog page. Include loading and error states."
API calls
"Add a weather widget to the homepage that fetches the current weather from the OpenWeather API. Show the temperature, condition, and an icon. Handle the case where the API is slow or fails."
Refactoring
"This component is getting too long. Break it up into smaller, reusable components. Keep the same functionality and styling, but make the code easier to understand and maintain."
Writing tests
"Write tests for this component. Test that it renders correctly, that the button click works, and that it shows an error message when the form is submitted empty. Use the testing library that this project already uses."
Performance optimization
"This page loads slowly. Analyze the code and suggest improvements. Look for large images that should be optimized, components that re-render too often, and any heavy operations that could be cached or lazy-loaded."
Adding authentication
"Add a simple login and signup flow to this project. Users should be able to create an account with email and password, log in, and see their profile. Protect the /dashboard route so only logged-in users can access it."
Using the .cursorrules file
"Create a .cursorrules file for this project. Include the tech stack we're using, the folder structure conventions, preferred coding style, and any rules you can infer from the existing code."
Before you start building, create a .cursorrules file in your project root. This is like giving the AI a briefing document. Tell it your tech stack, folder structure, and coding preferences. Every prompt after that will be better.
Cmd+K is a scalpel -- use it when you know exactly which code to change. Chat (Cmd+L) is a conversation -- use it when you need to think through a problem, understand your code, or plan a new feature.
When chatting, type @ and select the files relevant to your question. Instead of 'fix the navbar,' say '@components/Navbar.tsx the mobile menu doesn't close when I click a link.' The more context, the better the answer.
Cursor shows you exactly what changed (green = added, red = removed) before you accept. Take 10 seconds to scan the diff. It is much easier to catch a mistake here than to debug it later.
When a feature touches multiple files (like adding a new page with a component and an API route), use Composer (Cmd+I). It plans all the changes together so they work as a set.
Have a design mockup or a website you want to copy? Paste a screenshot right into the chat. Cursor will analyze the image and try to recreate the layout, colors, and spacing. Way faster than describing it in words.
Agent mode lets Cursor work autonomously: it reads files, writes code, runs your dev server, checks for errors, and iterates. Use it for tasks like 'set up a complete authentication system' where multiple steps are involved.
If Cursor seems confused about your project, re-index it (Settings > Cursor Settings > Resync Index). This refreshes the AI's understanding of your codebase, especially after big changes.
Fix: Re-index your codebase. Go to Settings > Cursor Settings > Resync Index. This forces Cursor to re-read all your files. Also, create a .cursorrules file that explains your project structure -- this is the single most impactful thing you can do.
Fix: Always use @ mentions to specify which file you are talking about. Instead of 'fix the header,' say '@components/Header.tsx fix the logo alignment.' When the AI knows exactly which file to edit, mistakes drop dramatically.
Fix: Check your settings: go to Settings > Cursor Settings and make sure 'Cursor Tab' is enabled. If you are on the free plan, you may have used up your daily autocomplete requests. Try restarting Cursor.
Fix: Click 'Reject' and try again with a more specific prompt. Instead of 'fix this page,' try 'in the hero section, change the heading text to say Welcome and make the background blue.' The more specific your prompt, the more accurate the diff.
Fix: Close unused tabs and files. If your project is very large (thousands of files), try adding a .cursorignore file to exclude folders like node_modules, .git, and build output from indexing.
Fix: Cursor's AI models have a knowledge cutoff. Use @ to reference documentation URLs so the AI reads the latest docs. For example: @https://nextjs.org/docs for up-to-date Next.js advice.
Every AI coding tool has a different personality. Here is how Cursor stacks up against the alternatives.
Cursor is a visual editor with buttons, tabs, and a sidebar. Claude Code is a terminal tool -- you type commands and the AI works in the background. Choose Cursor if you want to see your files visually. Choose Claude Code if you are comfortable with the terminal and want a more hands-off experience.
GitHub Copilot is mainly autocomplete -- it suggests the next line of code as you type. Cursor does that too, but also adds chat, inline editing, multi-file Composer, Agent mode, and image input. Cursor is Copilot with a lot more features on top.
Bolt runs entirely in your web browser -- nothing to install. Cursor is a desktop app you download. Bolt is great for quick prototypes and getting started fast. Cursor gives you more control, works offline, and is better for serious, longer-term projects.
Windsurf (by Codeium) is very similar to Cursor -- also built on VS Code, also has AI chat and autocomplete. The main difference is the AI model powering them. Try both for a week and see which one gives you better answers for your type of project.
The Ultimate Guide to Claude Code
Terminal-based AI coding -- for those who prefer the command line.
Compare All AI Tools
Side-by-side comparison of Cursor, Claude Code, Bolt, Lovable, and more.
Quick Start: Cursor
Just want to get going fast? The 3-step quick start guide.
Not Sure Which Tool? Take the Quiz
Answer a few questions and we will recommend the best tool for you.