The AI revolution in software development is a double-edged sword. Lean too heavily on LLMs without a thorough understanding of your tech stack, and you veer into vibe-coding. But stubbornly resist all AI tooling, and you'll be left in the dust while your colleagues 10x your output.
The fact is, if you aren't using an AI-powered code editor like Cursor today, then you're not moving as fast as you could, or working as smart as possible.
This guide will take you from zero to hero using Cursor. Follow these steps and you'll turbocharge your efficiency and skills as you write code. We'll specifically focus on the ideal Cursor AI setup for working with React, Next.js, and Tailwind CSS, but many of these steps apply to any tech stack.
Follow this checklist and you'll get a near-perfect Cursor AI setup without reading any further:
Settings + Rules
Press the gear wheel in the top right corner to open the Cursor settings. Then enable the following:
-
Open the Features Tab and confirm these settings:
-
Cursor Tab
-
Enable
Cursor Tab- Why? Core feature. Gives you turbocharged tab completion powers.
-
Enable
Suggestions in Comments- Why? Lets Cursor Tab write comments and documentation.
-
Enable
Auto Import- Why? Automatically adds required import statements. Big time saver.
-
Enable
-
Chat
-
Set default new chat mode to
Agent- Why? Ideal for complex tasks and code generation.
-
Enable
Auto-refresh chats- Why? Keeps the chat view updated automatically as context changes.
-
Enable
Auto-scroll to bottom- Why? Ensures you always see the latest AI messages in the chat window.
-
Enable
Auto-apply to files outside context in edit mode- Why? Allows AI edits to affect relevant files not explicitly added via
@. super useful for refactoring.
- Why? Allows AI edits to affect relevant files not explicitly added via
-
Enable
auto-run mode- Why? Allows the AI to execute certain actions (like tool calls) without explicit confirmation. Massive efficiency gains.
-
Inside
auto-run, enableDelete file protection,MCP tools protection,Dot files protectionandOutside workspace protection- Why? Adds sane guardrails to prevent accidental destructive actions during auto-run operations.
-
Enable
Large context- Why? Allows the AI to consider more code and information, improving understanding for complex tasks.
-
Enable
Iterate on lints- Why? Enables the AI to automatically attempt fixes for linter errors in generated/edited code.
-
Enable
Web Search Tool- Why? Grants the AI the ability to search the web for current information or documentation.
-
Set default new chat mode to
-
Codebase Indexing
-
Enable
Index new folders by default- Why? Ensures new code added to the project is automatically included in the AI's context.
-
Set
Git graph files relationshipstodefault- Why? Uses Git history to help the AI understand file relationships and provide more relevant context.
-
Enable
-
Docs
-
Click
+ Add new docand add this link to the official React docs- Why? Makes the official React documentation readily available context for the AI.
-
Click
+ Add new docand add this link to the official Next.js docs- Why? Makes the official Next.js documentation readily available context for the AI.
-
Click
+ Add new docand add this link to the official Tailwind CSS docs- Why? Makes the official Tailwind CSS documentation readily available context for the AI.
-
Click
-
Editor
-
Enable
Show chat/edit tooltip- Why? Provides visual hints when AI chat or edit actions are available.
-
Enable
Auto select for Ctrl/Cmd + K input- Why? Automatically selects the prompt text in the Cmd+K bar for easier modification.
-
Enable
Use themed diff backgrounds- Why? Improves readability of AI-generated changes.
-
Enable
-
Terminal
-
Enable
Terminal hint- Why? Provides AI-powered suggestions directly in the terminal.
-
Enable
Show terminal hover hint- Why? Displays hints when hovering over relevant terminal content.
-
Enable
-
Cursor Tab
-
Open the Models Tab
- Why? If you’re not on a Cursor Pro account and you have your own access to AI models (Gemini, Claude 3.5 Sonnet, etc), add your API keys here.
- Note: Bringing your own models to Cursor can get expensive fast. If you are going to be a Cursor power-user, it’s often much cheaper to pay for Cursor Pro.
-
Open the Rules Tab
-
Click
+ Add new rule- Why? Begins the process of creating a custom set of guidelines for the AI.
-
Copy and paste this comprehensive rule for React, Next.js, and Tailwind CSS
- Why? Provides the AI with specific, detailed instructions for generating code consistent with React, Next.js, and Tailwind best practices.
-
Click
Notepads
Close Cursor Settings. Now, press the + button in the "Notepads" section in Cursor's sidebar to add a new notepad (or use the command palette).
-
Create a notepad and paste in these React component development standards
- Why? Stores React standards for easy AI reference.
-
Create a second notepad and paste in these Next.js development standards
- Why? Stores Next.js standards (like App Router patterns) for easy AI reference.
-
Create a third notepad and paste in these Tailwind CSS usage guidelines
- Why? Stores Tailwind CSS guidelines for easy AI reference.
Add ESLint
Make sure you have ESLint installed and enabled
- Why? ESLint identifies code quality issues; enabling
Iterate on lintsallows Cursor to automatically fix these, improving code quality.
Use Visual Editor CLI
Use Cursor + Builder.io's Visual Editor CLI to add professional UI designs
- Why? Go from Figma design to polished UIs without leaving Cursor. Provides the missing link between design and development.
If you followed the above steps, then you've got yourself a pretty solid Cursor setup already. Now let's do a deep dive.
First, we'll explore how to use the code editor’s core settings and features to supercharge your workflow, then we'll complete the final steps for our perfect Cursor AI setup.
If you want to jump ahead and finish your developer environment for React and Next.js, then skip down to the section on “Setting up Cursor’s test-based code generation loops”.
Cursor offers tab completion, which functions like a supercharged autocomplete for your code. It generates intelligent code suggestions and is capable of performing multi-line edits and even taking your recent changes or linter squiggles into account.
You can enable it in Cursor's settings under Features > Tab Completion, where you can also customize options, such as disabling it for comments. To use it, simply press Tab to accept a suggestion and move to the next edit, Esc to dismiss it, or Ctrl/⌘ → to accept it one word at a time.
Cursor Chat is an AI assistant right in your sidebar, ready to discuss your code base in plain, natural language. You can ask it questions about your project, request multi-file code generation, get help understanding the entire codebase, or even get assistance with terminal commands.
There isn't much setup required; you can access it using the shortcut ⌘+L (Mac) or Ctrl+L (Windows/Linux). Once open, type your prompt in natural language, select 'Agent' mode for complex coding tasks or 'Ask' for queries, and let the Cursor AI assist you with its powerful code generation functionality. The chat can provide helpful code suggestions and perform smart rewrites of selected code blocks based on the provided context.
For example, when working with React, Next.js, and Tailwind CSS:
- Agent Mode example: You could tell the Agent in natural language: "Create a new reusable React component called
PrimaryButton. It should acceptchildrenand standard button props. Style it using Tailwind classes to have a blue background, white text, padding, rounded corners, and a subtle hover effect. Generate code for this component." - Ask Mode example: You might ask using natural language: "Explain how data fetching works within the Server Component in
app/posts/[id]/page.tsxto retrieve data for a specific blog post. Also, what's the best way to apply conditional Tailwind classes to the post's title based on its published status? Examine the relevant code."
Cursor Rules lets you give persistent instructions to the AI, such as setting coding standards or project-specific guidelines, so you don't have to repeat yourself. Think of them as sticky notes for the AI that apply automatically based on context or when you manually invoke them, enhancing codebase understanding.
You can create project-specific rules by adding .mdc files in a .cursor/rules folder within your project or setting global rules in Cursor's settings. To use a rule, you can configure it to apply automatically (e.g., always or when certain files are involved) or invoke it explicitly using @ruleName when you generate code.
We already linked to an example rule for React, Next.js, and Tailwind CSS. If you are looking for more, check out cursor.directory, where community members submit their best Cursor rules. It’s a great resource.
The @docs feature in Cursor allows you to enhance the AI's capability by providing external documentation for the libraries or frameworks you use. Cursor downloads and indexes these documents so that the AI can reference them directly when answering your questions or writing code.
Setting it up is straightforward: navigate to Settings > Features > Docs and add the URLs for the documentation you wish to include. Then, when you're chatting with the AI, just mention @docs in your prompt to instruct it to consult that specific documentation for better, more context-aware answers regarding relevant code.
Here are some examples relevant to the React, Next.js, and Tailwind documentation that we added earlier:
- React hook query: "Using
@docs, explain the differences betweenuseMemoanduseCallbackin React and provide an example use case for each within our component library." - Next.js API route: "Consult the
@docsfor Next.js and show me how to create a dynamic API route that accepts a slug parameter and fetches corresponding data." - Tailwind layout: "How can I create a responsive three-column grid layout using Tailwind? Please reference the
@docsfor the best practices."
Cursor's @web feature allows the AI to search the internet directly from the chat, bringing real-time information into your development workflow. This is incredibly handy when you need the absolute latest information, like finding a new library version or checking recent API changes that might not be indexed in documentation yet.
To enable it, go to Settings > Features > Chat and ensure the Web Search Tool is toggled on. To use it, type @web followed by your query in the chat, prompting the AI to perform a web search to answer your question.
Here are some examples relevant to a React/Next.js/Tailwind stack:
- Latest Version Check: "Use
@webto find the latest stable version of theframer-motionlibrary and check its compatibility with React 18." - New Feature Research: "Are there any new experimental features in the latest Next.js canary release related to server components? Search using
@web." - Tailwind Plugin Discovery: "I need a Tailwind plugin for creating complex gradients. Search with
@webto find popular options and their usage."
Cursor offers Notepads (currently in Beta), which are shareable, global documents within the editor where you can store project context, guidelines, or code snippets. They go beyond simple rules by allowing you to attach files and combine different pieces of information, creating reusable resources for your team or personal workflow.
You can create a new notepad by clicking the + button in the Notepads section of the sidebar and giving it a name. To use its contents in chat or other AI interactions, simply reference it using the @ symbol followed by the notepad's name (e.g., @my-react-patterns).
We’ve already linked to three notepads for React components, Next.js’s App Router pattern, and Tailwind CSS.
Sometimes the code generated by Cursor introduces small errors. Cursor's automatic linting resolution helps keep your code clean by having the AI try to fix any lint errors it might introduce after making changes or generating new code. It works by automatically checking the output of your installed linter (like ESLint) right after the AI agent modifies your code.
To set it up, ensure you have a linter like ESLint configured for your project, then enable the Iterate on Lints option in the Chat settings (Settings > Features > Chat). When you use Agent mode, Cursor AI will automatically attempt to resolve any new lint warnings or errors that appear after its initial code generation or modification of the new code. It can clean up your existing code across multiple lines and files as well.
Here are some examples relevant to a React/Next.js/Tailwind stack:
- React hook rules: If the Agent generates code that violates the rules of hooks (e.g., calling
useStateinside a condition), ESLint will flag it, and Cursor will attempt to refactor the component to use the hook correctly at the top level. - Unused imports/variables: The Agent may add an import for a utility function, but then not use it in the final code. The linter flags the unused import, and Cursor automatically removes the unnecessary line.
- TypeScript type errors: If the Agent generates TypeScript code that causes a type mismatch detected by the TypeScript ESLint plugin, Cursor will attempt to adjust the types or the code logic to resolve the error.
You can leverage Cursor's iterative capabilities to follow a Test-Driven Development (TDD) workflow, where you write tests before the actual code implementation. Start by instructing the AI agent to generate test cases for the specific function or component you intend to build, ensuring that you outline the expected inputs and outputs clearly.
Once the tests are written (and failing, as expected in TDD), prompt the agent to write the implementation code specifically designed to pass those tests and to iterate until all the tests pass. If the initial code doesn't pass all the tests, the agent’s smart rewrites will refine the code until all tests transition from red (failing) to green (passing).
Here are some examples relevant to a React + Next.js + Tailwind stack (hot tip: you could also save a general TDD pattern as a notepad):
- Utility Function TDD: "Write Jest tests for a utility function
formatCurrency(value: number)that takes a number and returns a formatted currency string (e.g., $1,234.56). Cover cases for positive numbers, zero, and negative numbers." Then, after reviewing the tests: "Now, write theformatCurrencyfunction to make these tests pass. Iterate until all tests are green." - React Component Interaction Test: "Using React Testing Library, write tests for a component. It should display an initial count of 0, increment when an 'Increment' button is clicked, and decrement when a 'Decrement' button is clicked." Followed by: "Generate the component implementation, including basic Tailwind styling for the buttons, to satisfy these tests. Iterate until all tests are green."
- API Route Logic Test: "Write tests for a Next.js API route
/api/validateEmailthat accepts a POST request with anemailfield. The tests should check if it returns a 200 status for valid emails and a 400 status for invalid emails according to a basic regex pattern." Then: "Implement the/api/validateEmailAPI route handler to pass the tests you just wrote. Iterate until all tests are green."
The Model Context Protocol (MCP) acts like a plugin system for Cursor, allowing you to connect external tools and data sources directly to the AI agent. This deep integration enhances Cursor AI's capabilities, enabling it to interact with databases, APIs, or other services without the need to supply information manually.
You configure MCP servers by creating a mcp.json file either globally in ~/.cursor/ or per-project in .cursor/, specifying how Cursor should connect to your tools (such as a command to run or an SSE endpoint). Once set up, the Agent can automatically detect and use relevant MCP tools, or you can prompt it directly to take advantage of these integrations for specific tasks.
Here are some examples relevant to a React/Next.js/Tailwind stack:
- Database Schema Integration: Configure an MCP server that connects to your project's database. You could then ask the Agent: "Using the database MCP tool, fetch the schema for the
userstable and generate a Next.js API route (/api/users/[id]) to retrieve a user by ID, including appropriate TypeScript types based on the schema." - Headless CMS Connection: Set up an MCP tool for your headless CMS (like Contentful or Sanity). You could then prompt: "Use the CMS MCP tool to fetch the content model for
blogPostand generate thegetStaticPropsfunction inpages/blog/[slug].jsto fetch and pass the necessary post data."
Visit cursor.directory for a large list of community-created Cursor + MCP integrations.
Builder.io’s Visual Editor plugin now features a robust CLI workflow. This allows you to export Figma designs directly into your project through your preferred code editor. A single command automates the entire process —downloading your design, converting it into code, and integrating it into your codebase.
If you prefer terminal work, and particularly if you want to master AI-powered code editors like Cursor, transforming Figma designs into code can easily integrate into this development workflow.
By diligently configuring Cursor AI's settings and leveraging its powerful features like Agent mode, Rules, @docs, @web, and Notepads, you've established a highly optimized AI-powered code editor tailored for React and Next.js development. This setup is designed to significantly boost your software development speed, streamline complex tasks, enhance coding efficiency, and help maintain high-quality standards for new code.
Remember that mastering AI assistance is an ongoing process. Refine your prompts continually, commit your code changes often, try new AI models, use the right context, and adapt these techniques to your specific projects. Embrace the power of AI as a collaborative partner, and you'll unlock new levels of productivity and coding proficiency.
Introducing Visual Copilot: convert Figma designs to high quality code in a single click.
