Updated March 2026 — added Background Agents, BugBot, Cursor Memories, and Cursor 2.0 coverage.
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 workflow. Either way, less prompting and more shipping.Try Builder.io free →
Follow this checklist and you'll get a near-perfect Cursor AI setup without reading any further:
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’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.
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 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 2.0 update: Starting with Cursor 2.0, 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 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.
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 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."
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 (introduced in Cursor v0.50) let you delegate long-running tasks and walk away. Instead of watching the AI work, you spin up a background agent, describe the task — refactor this module, migrate to a new API, run the full test suite — and get notified when it’s done. Meanwhile you keep working on something else in the foreground.
For React and Next.js projects this is a significant workflow change. Large refactors, dependency migrations, schema updates, and end-to-end test runs that used to block your editor can now run in the background in a sandboxed environment with its own terminal and browser. To start one, open the command palette and select "New Background Agent."
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, so you can address the issue without hunting for it manually. For teams shipping React and Next.js, it acts as an always-on reviewer that catches regressions before they reach the main branch.
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, Memories, and Background Agents, 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.
Cursor supports a wide range of models including Claude Sonnet, Gemini Pro, GPT-4, and Cursor’s own Composer model. Cursor Pro gives you access to these through the subscription without managing your own API keys. If you bring your own keys, heavy usage can get expensive quickly — for most power users, Cursor Pro (or the higher-tier Ultra plan for teams doing heavy parallel agent work) is the more cost-effective option. Model capabilities evolve fast; the best approach is to experiment with the latest available models in your Cursor settings rather than anchoring to a specific version.
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.
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.
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.
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.
@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. Note that in Cursor 2.0 and later, the Agent automatically performs web searches when relevant, so explicit @web usage is less necessary than it used to be.
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.
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.
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.
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.
Builder.io visually edits code, uses your design system, and sends pull requests.
Builder.io visually edits code, uses your design system, and sends pull requests.
Connect a Repo
