Updated May 2026 — refreshed for Cursor 3.2, Composer 2, the new model lineup (GPT-5.4, Opus 4.6, Gemini 3 Pro, Grok Code), the Cursor SDK, and Security Review.
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.
Same models. Smarter harness.
Builder.io runs Claude, Gemini, GPT-4, and more through its agentic harness — with a visual development platform built for React and Next.js engineers on top. Keep using Cursor for code, or go all-in on Builder.io for the entire team workflow. Either way, less prompting and more shipping. Try Builder free →
Tweaking the Cursor AI settings
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:
- Open the Models Tab
- Open the Rules Tab
Cursor Memories
Cursor's Notepads feature was deprecated in late 2025 and replaced by Cursor Memories. Instead of manually creating notepads, Memories is a persistent knowledge base the AI maintains automatically across sessions — it learns your conventions and project preferences so you don’t have to re-explain them.
You can seed it manually: open Settings > Features > Memories and add entries, or simply tell the AI in chat: "Remember that we always use Zustand for state management in this project." For structured coding standards, place .mdc files in your .cursor/rules folder so they apply automatically to every session.
- Why? Replaces Notepads with a persistent, session-spanning knowledge base that reduces repetitive context-setting.
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.
Skip the Figma-to-code copy/paste tax.
Builder Fusion exports a Figma frame straight into your Cursor workspace as production-ready React + Tailwind. See how it works →
Dialing in Cursor AI's settings and features
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”.
The Cursor AI 'Tab' feature in the Code Editor
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.
The Cursor AI 'Chat' Feature for Code Generation
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
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 Cursor AI @docs feature
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."
The Cursor AI '@web' feature
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."
Heads up: In Cursor 3.x, the Agent automatically gathers web context when relevant — you no longer need to type
@webexplicitly for most queries. The@webtag still works if you want to force a web search, but in most cases the Agent will self-initiate this without prompting.
Cursor Memories
Cursor Memories is a persistent knowledge base that Cursor maintains across sessions. Unlike Rules (which you write manually), Memories are built automatically as you work — the AI observes your patterns, preferences, and project conventions and stores them so it doesn’t re-learn everything each new chat.
For React and Next.js development, Memories means Cursor will remember your preferred state management approach, your component naming patterns, how you structure API routes, and which libraries your project relies on — without you having to re-explain in every session.
You can view and edit your Memories from Settings > Features > Memories. You can also tell the AI directly: "Remember that we always colocate styles in the same file as the component" and it will store that for future sessions.
We've linked to reference documents for React components, Next.js App Router patterns, and Tailwind CSS. Rather than Notepads (now deprecated), consider seeding Cursor Memories with your key conventions from these documents, or placing them as .mdc files in .cursor/rules so they apply automatically.
Improve code quality with Cursor AI's automatic lint corrections
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.
Set up Cursor’s test-based code generation loops
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 Cursor Memory or .mdc rule):
- 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."
Add MCPs to Cursor
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.
Background Agents, the Agents Window, and Multitask
Background Agents let you delegate long-running tasks and walk away. By Cursor 3.2 (April 2026) they’re no longer a bolt-on — the new Agents Window is the default surface for running multiple agents in parallel, with durable canvases, terminal, browser, and source control sitting alongside each agent run.
For React and Next.js projects, this is the biggest day-to-day workflow change in the last year. Large refactors, dependency migrations, schema updates, and end-to-end test runs no longer block your editor — spin up a Background Agent (or several), keep coding in the foreground, and review the diffs when they’re ready. Cursor 3.2 added Multitask, Worktrees, and Multi-root Workspaces specifically for this pattern, so two agents working in the same repo no longer step on each other.
To start one, open the command palette and select Agents Window, or visit cursor.com/agents and move the session between cloud and local as needed.
BugBot and Security Review
BugBot is Cursor’s automated PR code reviewer. When you open a pull request, BugBot analyzes the diff and flags potential issues — logic errors, missing edge cases, type inconsistencies — directly in the PR comments. Each comment includes a "Fix in Cursor" button that opens the relevant code in your editor with a pre-filled prompt.
As of late April 2026, Cursor also rolled out Security Review (beta, Teams + Enterprise), which adds two always-on agents on top of BugBot: a Security Reviewer that flags auth regressions, prompt-injection risk, and unsafe agent tool auto-approvals at the diff level, and a Vulnerability Scanner that runs scheduled scans for outdated dependencies and known CVEs. If you’re shipping production React/Next.js, both are worth turning on.
Cursor SDK
New in late April 2026: the Cursor SDK lets you build your own agents on the same runtime, harness, and models that power Cursor itself — including Composer 2. If you’ve ever wanted a custom agent that lives inside your CI pipeline or runs against a dedicated VM, this is the unlock.
import { Agent } from "@cursor/sdk";
const agent = await Agent.create({
apiKey: process.env.CURSOR_API_KEY!,
model: { id: "composer-2" },
local: { cwd: process.cwd() },
});
const run = await agent.send("Summarize what this repository does");
for await (const event of run.stream()) {
console.log(event);
}Use Builder.io’s Visual Editor to create professional UIs
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.
Want this without the CLI dance?
Builder Fusion brings the visual editor, the Figma import, and a real-time preview into one workspace — designers and PMs ship in the same repo, every change is a PR. Try Builder Fusion free →
Conclusion
By diligently configuring Cursor AI's settings and leveraging its powerful features like Agent mode, Rules, @docs, Memories, the Agents Window, Background Agents, BugBot, and the new Cursor SDK, 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.
And if your team has outgrown solo-dev workflows — designers, PMs, and engineers all needing to ship the same React/Next.js features — Builder Fusion is the natural next step. Same models you're already using in Cursor, but with a visual editor and PR-first delivery so non-developers can contribute without breaking your review workflow.
Further Reading on AI code editors
Frequently Asked Questions
What is the best AI model to use with Cursor for React and Next.js?
As of May 2026, Cursor's model picker defaults to Composer 2, with GPT-5.4, Claude Opus 4.6, Gemini 3 Pro, and Grok Code all selectable. Composer 2 (released March 2026) is Cursor's in-house model — it's frontier-level on coding benchmarks, fast enough for interactive use, and the cheapest option per token. For most React and Next.js work, start with Composer 2 on Auto and only switch to Opus 4.6 or GPT-5.4 for the gnarliest cross-file refactors. Cursor Pro covers normal usage; the Ultra plan makes sense if you're running multiple parallel background agents.
What is Cursor Agent mode, and when should I use it?
Agent mode is Cursor's most powerful chat setting for complex, multi-step tasks — generating new components, refactoring across files, writing and running tests, or executing terminal commands. Use "Ask" mode when you want to query or understand code without making changes. For most serious development work in React and Next.js, Agent mode with auto-run enabled is the recommended default.
What are Cursor Rules, and how do I use them for a React/Next.js project?
Cursor Rules are persistent instructions that guide how the AI generates code — covering things like naming conventions, component structure, TypeScript patterns, and framework-specific best practices. You can set them globally in Cursor's settings or per-project by placing .mdc files in a .cursor/rules folder. For React, Next.js, and Tailwind, adding a comprehensive rule file means you don't have to re-explain your standards every time you prompt.
What happened to Cursor Notepads?
Notepads were deprecated in late 2025 and replaced by Cursor Memories. Memories is a persistent knowledge base the AI maintains automatically across sessions — it observes your patterns and project conventions so the AI doesn’t re-learn everything in each new chat. You can view, edit, or manually add memories from Settings > Features > Memories. For richer reference documents like component standards or routing conventions, use .mdc files in your .cursor/rules folder so they apply automatically.
How does the @docs feature work in Cursor?
The @docs feature lets you add external documentation URLs — like the React, Next.js, or Tailwind CSS docs — that Cursor downloads and indexes. Once added, you can reference them in chat using @docs so the AI consults that documentation when answering questions or generating code. It's especially useful for keeping the AI grounded in the correct API surface for your specific framework versions.
What is the difference between @docs and @web in Cursor?
@docs pulls from documentation you've pre-indexed in Cursor's settings — it's curated and reliable. @web triggers a live web search at query time, useful for things that aren't indexed yet: latest library versions, recent API changes, or newly released features. Use @docs for your core stack and @web when you need truly current information. In Cursor 3.x, the Agent automatically performs web searches when relevant, so explicit @web usage is less necessary than it used to be.
How do I set up test-driven development (TDD) with Cursor?
The workflow is: first prompt the Agent to write failing tests for the function or component you want to build, then prompt it to write the implementation and iterate until all tests pass. With Iterate on Lints and auto-run enabled, Cursor will keep refining the code automatically until it's clean. This loop works well with Jest and React Testing Library for component tests and Next.js API routes.
What are MCPs in Cursor, and how do I add them to a Next.js project?
MCP (Model Context Protocol) servers are integrations that give Cursor's Agent access to external tools — databases, CMS platforms, APIs, and more. You configure them via a mcp.json file in ~/.cursor/ (global) or .cursor/ (per-project). Once connected, the Agent can query your database schema, fetch content models from a headless CMS, or interact with other services directly from within the editor. Cursor.directory maintains a large list of community-built MCP integrations.
Do I need ESLint set up for Cursor to work well with React and Next.js?
You don't need it to use Cursor, but it's strongly recommended. When ESLint is configured and the Iterate on Lints setting is enabled, Cursor's Agent will automatically detect and fix lint errors it introduces — things like violated hook rules, unused imports, or TypeScript type mismatches. This keeps AI-generated code clean without requiring you to manually review every edit.
How do I use Builder.io's Visual Editor CLI with Cursor?
Builder.io's Visual Editor includes a CLI that lets you export a Figma design directly into your codebase from the terminal with a single command. It handles downloading the design, converting it to React/Next.js code, and inserting it into the right location in your project. It's designed to slot naturally into a Cursor-based workflow, bridging the gap between design handoff and production-ready UI code.