How to Use Gemini 2.5 Pro with Cursor IDE for a To-Do List App

This guide will show you how to leverage Google’s Gemini 2.5 Pro (a cutting-edge AI model) together with Cursor IDE (an AI-powered code editor) to build and modify a web-based to-do list application. We’ll cover setting up both tools, using Repomix to bundle your codebase for AI input, prompting Gemini to plan or implement changes, and then applying those changes in Cursor. By using Gemini’s large context window (capable of handling entire repositories) and Cursor’s automated coding agent, you can efficiently add features, refactor code, convert styles, or fix bugs with step-by-step AI assistance.

Step 1: Set Up Google Gemini 2.5 Pro

Accessing Gemini 2.5 Pro: Ensure you have access to the Gemini 2.5 Pro model via Google’s platforms. Gemini 2.5 Pro is available through Google’s AI services – for example, in Google AI Studio (Vertex AI) or the Gemini web app (Google Labs) for users with advanced access. You may need to sign up for Google’s AI Pro or a preview program to use the Pro model in the Gemini app. Once you have access, open the Gemini interface (e.g. go to the Gemini chat UI) and select “2.5 Pro” as the model for your chat session.

• Tip: If using Google Cloud’s Vertex AI, you can find Gemini 2.5 Pro in the Model Garden or AI Studio and test it in a chat or notebook environment. In the Gemini web UI (labs), simply start a new chat and switch the model to 2.5 Pro (Experimental) if it isn’t the default.
• Why Gemini 2.5 Pro? This model is currently one of the most advanced for coding tasks, with strong reasoning and coding capabilities. Importantly, it has an extremely large context window – it can handle around 1 million tokens of input (with plans for 2 million). In practical terms, this means you can feed your entire codebase to Gemini in one go, and it can analyze all of it at once. This is a huge advantage over typical AI models and is the key to having Gemini understand your whole to-do app before planning changes. (For example, Google reports Gemini 2.5 Pro can even comprehend “entire code repositories” thanks to this long context.)

Step 2: Set Up Cursor IDE

Installing Cursor: Download and install Cursor IDE from the official website (e.g. via cursor.com). Cursor is an AI-enabled code editor (a modified VS Code) designed to boost your coding productivity with AI assistance. Once installed, open your to-do list app project in Cursor. You may need to sign in or provide API keys for AI models depending on your setup – refer to Cursor’s documentation for connecting models if required. By default, Cursor supports using models like GPT-4 or others, but here we will be using it in tandem with Gemini’s output.

• Features: Cursor offers features like code autocompletion, natural language code edits, and an “Agent” mode that can execute instructions on your codebase. It “knows your codebase,” meaning it can reference and modify multiple files as directed. This makes it ideal for applying the multi-step plan that Gemini will generate. Ensure your project is indexed in Cursor (it usually does this automatically on opening the folder).
• Agent Mode: Familiarize yourself with starting an Agent session in Cursor. In Cursor’s interface, you typically open a new chat or agent panel for your project (for example, via a “+ Agent” button or a keyboard shortcut). This Agent will be used to run the implementation plan from Gemini. We will cover this in Step 5.

Step 3: Package the Codebase with Repomix

Before asking Gemini to help, you’ll want to provide it with the entire context of your codebase. Repomix is an open-source CLI tool specifically made for this purpose. It packages all your project files into a single AI-friendly format (e.g. a big text or XML file), while respecting your .gitignore (so unnecessary files are excluded). In other words, Repomix bundles up your project’s code (folder structure and file contents) into one document that an AI can read in one go. This is perfect for Gemini’s large context window, allowing the model to “see” the whole to-do app at once.

Using Repomix:

1. Install/Run Repomix: In your project root directory, run the tool via npx (no install needed) or npm. For example:npx repomix > repomix-output.txtThis will generate a file (here named repomix-output.txt) containing your entire repository’s content. By default, it lists each file’s path and content in a structured way. Repomix is simple to use – just one command packs your entire repo.
2. Customize (Optional): Repomix supports output formats like XML, Markdown, or plain text, and you can configure what to include or ignore. For a basic usage, the default settings should suffice. The output may include a summary or directory tree as well. For instance, in some setups developers use an XML style output for better parsing. (Advanced users can create a config JSON and instruction template for Repomix, but for our purposes a straight dump is fine.)
3. Verify Output: Open the generated repomix-output.txt (it could be very large for big projects). You should see your codebase concatenated, often with file separators or XML tags. Example excerpt from the output might look like:<file path="src/App.js"> // content of App.js here </file> <file path="src/styles.css"> /* content of styles.css */ </file> ...Ensure that key files (HTML, JS/TS, CSS, etc., or backend files) are included. This is the context snapshot you’ll give to Gemini.

By using Repomix, you’re preparing a single input for Gemini that contains everything it needs to know about your app’s current state. (In fact, one developer notes that providing this full context to Gemini yields a more accurate and viable implementation plan than just asking an IDE assistant with partial context.)

Step 4: Prompt Gemini with Full Context to Plan Changes

Now it’s time to use Gemini 2.5 Pro’s coding prowess to generate an implementation plan or code changes for your to-do app. We’ll feed Gemini the entire codebase (from Repomix) along with a clear prompt describing what we want to achieve. The goal is to have Gemini output a structured response (steps with code) that we can directly hand off to Cursor’s agent.

Crafting the Prompt: When you open a new chat with Gemini 2.5 Pro, you will paste in two things in one message:

• The codebase context – i.e. the contents of repomix-output.txt. (It will be very large; Gemini can handle this in one go due to its large context window, which is exactly what we leverage here.)
• Your instructions – a request telling Gemini what to do with that code.

It’s usually a good idea to prepend a brief note before the code, like: “Below is the complete code for my web-based To-Do List app.” Then paste the code (or attach the file if the interface allows). After the code, write a detailed prompt. Here’s how to structure the instructions for Gemini:

• Role/Context (optional): You can instruct Gemini to take on a role, e.g. “You are an expert software engineer and code assistant.” Also, mention the tech stack if relevant (e.g. “The above code is a React front-end with a simple Express backend” or whatever fits your to-do app). This helps provide context beyond the code text, if needed.
• Task Description: Clearly state what change or feature you want. For example, “Add a new feature: allow tasks to have a due date.” or “Refactor the code for better readability.” Be specific: if it’s a new feature, describe its requirements; if it’s a bug, describe the observed problem.
• Guidance/Constraints: Include any preferences or constraints for the solution. For instance: “Follow the existing coding style. Use functional components only.” or “Ensure any new UI elements use the same CSS framework.” If you know certain files or areas are relevant, you can mention them (though Gemini can locate relevant parts itself from context).
• Output Format Emphasis: Tell Gemini exactly how you want the answer structured. Since we plan to feed the answer to Cursor (another LLM agent), we want a step-by-step, clear, and minimal conversational fluff format. Instruct Gemini to output an ordered list of steps, with each step containing the necessary code changes or additions. For example: “Provide a numbered list of steps to implement this, with each step containing any code modifications or new code in fenced code blocks. Start with Step 1, and include code diffs or code snippets as needed. Do not include extraneous explanations – the response will be given to another AI agent to execute.” This explicitly tells Gemini that its response is meant for another tool to read and act on.

By structuring the prompt this way, you’ll get a response that reads like a well-organized plan or set of instructions, rather than a generic explanation. In essence, you’re asking Gemini to behave as a project planner that writes down what needs to be done in your code, in order. (One example prompt from a developer asked Gemini for “a detailed, step-by-step guide including code snippets and exact commands to add a new feature” – this yielded a very concrete plan.)

Example Prompt Format: Below is an example of how you might write the prompt to Gemini for a specific task. You would paste your full repomix-output.txt content first, then add something like:

[PASTE YOUR FULL CODEBASE CONTEXT HERE]

Now, using the entire code above, please implement the following request:

**Task:** Add a "due date" feature to the To-Do List app. Currently, tasks have a title and completion status, but no due date. We want to allow users to set a due date for each task.

**Requirements:** 
- Modify the data model or structure to include a due date for each task (e.g., as a date field).
- Update the UI to allow inputting a due date when creating or editing a task, and display the due date in the task list.
- Ensure that due dates are saved and loaded wherever tasks are stored (in local storage or backend).
- Maintain the existing coding style and project structure.

**Your Output Format:** 
Provide a **step-by-step implementation plan** to add this feature, with **numbered steps**. For each step, include any code changes or additions *in code blocks*. Be specific about which files to modify or create, and show the exact code to be added or changed. The output will be passed to an AI coding agent (Cursor IDE) to execute, so it should be concise and actionable, without extra commentary.

Begin your response with "Step 1:" and follow with the plan.

The above prompt (which you would paste into Gemini) does a few important things:

1. It gives Gemini full knowledge of the current code (by including the context).
2. It clearly states the new feature and what needs to be done.
3. It explicitly asks for a structured, numbered plan with code, ready for Cursor to consume.

Gemini 2.5 Pro will then analyze the entire codebase and produce a detailed plan. Thanks to the large context, it can reference any part of your app in its answer – for example, it might say “Step 2: Update the Task model in models/task.js to include a dueDate field” and provide the code, because it saw that file in the context. The output might be quite lengthy, but it will be comprehensive. (It’s not uncommon to get a multi-step answer with code blocks for each step.)

Review the Plan: Once Gemini responds, read through the steps. Ensure the plan makes sense and doesn’t suggest anything obviously unwanted. If something looks off, you can ask Gemini follow-up questions or clarifications in the chat (since Gemini can do multi-turn conversations). For instance, “In Step 5, you added a due date to local storage – can you show how tasks are loaded on page refresh with the due dates?” Gemini can refine or correct its plan if needed. Iterate until you’re satisfied with the plan/instructions.

Step 5: Execute the Plan in Cursor IDE

After Gemini gives you the implementation plan (with code changes), the next step is to apply those changes to your codebase. Here’s where Cursor’s agent mode shines: you can feed the entire plan to Cursor, and let it carry out each step (creating files, modifying code, running commands, etc.).

Using the Cursor Agent:

1. Open a New Agent Session: In Cursor, open an AI agent chat for your project. (For example, in Cursor you might press a shortcut or click “New Agent” – on Mac one might use Cmd+N then Cmd+I as per Cursor’s docs.) This should bring up a chat interface within the editor where the AI can both read and write files in your project.
2. Paste Gemini’s Plan: Take the full output from Gemini (all the steps and code it provided) and paste it into the Cursor agent chat input. This might be a long message, but that’s okay. Make sure you include everything from “Step 1” to the final step.
3. Run the Agent: If Cursor’s agent has an “auto-run” or “execute plan” mode, enable it. In many cases, once you submit the prompt, Cursor’s agent will start executing step by step automatically. It will interpret each step, make the described code changes in your project, and even run commands or tests if instructed. For example, if Step 3 says “Run npm install dayjs to add a date library,” Cursor will execute that in a terminal. If a step says “Create a new file DueDatePicker.jsx with the following code…”, it will create that file with the given content.
4. Monitor the Execution: Watch as Cursor goes through the steps. It usually prints out what it’s doing or highlights the changes in the editor. This is an automated process, but you should keep an eye on it:
   • If all goes well, Cursor will implement each step exactly as planned. You’ll see your codebase updating.
   • If Cursor encounters an error or a step that it’s unsure about, it might pause or ask for guidance. For instance, if a command fails or a file path is wrong, the agent might stop.
5. Guide and Adjust if Needed: It’s important to remember that AI can make mistakes. If Cursor gets something wrong or stops (perhaps due to an ambiguous instruction), you should intervene:
   • Assist the Agent: You can type into the agent chat to correct the course. For example, if an error occurs at Step 4, you can provide a hint: “It looks like the file name was incorrect, it should be TaskList.js not TasksList.js. Please fix and continue.” The agent will typically try to comply and resume.
   • Minor Fixes: Sometimes you can just say something like “Fix that and continue from the next step,” but often a specific pointer is best (e.g., “Import the new component in App.js as well, you missed that.”).
   • Rerun or Stop: If things go completely off track, you can stop the agent and consider editing the plan or manual fixes. (In Cursor you might have options to halt execution or undo changes.) It’s a good practice to use version control (git) so you can revert if needed and try again with a corrected prompt.
   Real-World Tip: One developer using this workflow describes pausing the agent and giving feedback if it makes a mistake (like using a wrong command or modifying the wrong file). For example, telling the agent “Use the TodoController for that function instead” or “You forgot to run the migrations” helped correct its course. You can always nudge the agent with such instructions and then let it proceed.
6. Review the Changes: Once the agent finishes, review your codebase. Check that the new feature or fix is implemented correctly. Run the app and test the new functionality (e.g., create a task with a due date and see that it displays and persists). Run any tests if you have them. Because the plan came from analyzing the whole context, ideally everything should integrate well. Still, do a quick code review – since this was largely automated, you want to verify no files were unintentionally altered or any logic is flawed.
7. Iterate if Necessary: If you find issues during testing, you can go back to Gemini or use Cursor’s AI in a local context to fix them. For small tweaks, you might just use Cursor’s inline prompts (e.g., highlight code and ask Cursor to change something). For larger issues, consider asking Gemini again or modifying the plan.

By following these steps, you effectively let Gemini’s planning ability and big-picture understanding guide the changes, and Cursor’s hands-on execution apply them. This division of labor plays to each tool’s strength: Gemini handles the reasoning with the full project context, and Cursor handles the code edits within your environment. It’s a powerful combo that can significantly speed up development while keeping you in the loop to oversee quality.

Example Prompt Templates for Common Tasks

Finally, let’s look at some real use-case examples. Below are scenarios you might encounter while developing a to-do list app, along with example prompts you can use with Gemini 2.5 Pro. You can adapt these templates to your needs by inserting your own details or tasks. Each prompt is written assuming you will paste the full code context above it (using Repomix output), as described earlier. Remember to adjust file names or specifics based on your project’s actual structure.

1. Adding a New Feature: Due Dates for Tasks

Scenario: Your to-do app currently allows a title and completion status for each task. You want to add a due date field to each task and display it in the UI.

Prompt Example:

[PASTE CODEBASE CONTEXT HERE]

I want to add a new feature to the app: **Due Dates for tasks**.

**Task:** Implement due dates for to-do items. Users should be able to set a due date when creating or editing a task, and see the due date displayed in the list.

**Requirements & Details:**
- Update the data model or task structure to include a due date (e.g., a `dueDate` property, stored as a string or date).
- Modify the task creation form (and edit functionality, if present) to allow selecting a date. For example, add a date input field for the due date.
- Display the due date next to each task in the list UI (format it nicely, e.g. "Due: 2025-06-01").
- Ensure the due date is saved and loaded wherever tasks are persisted (local storage or backend API).
- If a due date is past due (optional), maybe style it differently (e.g., red text) – *if easily doable, but not required*.

**Instructions to AI:**
Provide a **step-by-step plan** to implement this feature. For each step:
- Specify which file(s) to create or modify (with file paths if possible).
- Provide the actual code changes. Use clear **code blocks** for additions/edits.
- Number each step (Step 1, Step 2, ...).
- The output will be given to another AI agent to execute, so *each step should be actionable* (e.g., "Add this code to this component", "Update this function...").

Begin with Step 1.

This prompt asks Gemini to generate a plan for adding due dates. You’ve outlined the requirements (updating data model, UI form, display logic, persistence) and explicitly asked for a stepwise solution with code. Gemini might respond with something like:

• Step 1: Modify the task model (showing the code to add a dueDate field in the object or database schema).
• Step 2: Update the New Task form component to include a date picker input (providing the JSX code to add an <input type="date"> and state handling).
• Step 3: Update the code that saves tasks (e.g., include dueDate when constructing a task object or sending to API).
• Step 4: Update the task list UI to display the due date (showing code where the task is rendered, adding something like <span>Due: {task.dueDate}</span>).
• Step 5: (Maybe) Add CSS or conditional styling for overdue tasks.
• Step 6: Testing or additional tweaks if any.

Each step will include the promised code snippets. You can then feed this plan into Cursor to execute as described earlier.

2. Refactoring Code for Readability

Scenario: Over time, your code may become messy – long functions, inconsistent naming, etc. You want to refactor the codebase for clarity and maintainability without changing functionality.

Prompt Example:

[PASTE CODEBASE CONTEXT HERE]

The code above is functional but needs refactoring for better **readability and maintainability**. 

**Task:** Refactor the to-do list app’s codebase. Focus on:
- Cleaning up any overly long or complex functions (split into smaller functions if needed).
- Renaming poorly named variables or functions for clarity.
- Adding comments or docstrings to explain non-obvious logic.
- Removing any redundant code.

**Guidelines:**
- Do **not** introduce new features or change app behavior.
- Ensure all existing features still work after refactoring (the changes should be behavior-preserving).
- Maintain consistent coding style (use the same formatting and patterns already in use).
- One step at a time: break down the refactor into discrete steps (e.g., refactor one component or module per step).

**Instructions to AI:**
Give a **numbered list of refactoring steps**. For each step, state what we are improving and show the code changes. Use code blocks to show the before/after or the new code for that part. Keep explanations brief – mainly show the improved code. The output will be executed by an AI agent, so each step should be a clear action (e.g., "Refactor function X in file Y...").

Begin with Step 1.

In this prompt, we emphasize that we want to preserve functionality and only improve the code structure. We ask for small, iterative steps. Gemini might respond with a plan like:

• Step 1: “Refactor the addTask function in App.js for clarity” – showing the old code and the new, cleaner version (maybe splitting some logic out).
• Step 2: “Rename variables in TaskItem component for clarity” – listing which variables and showing the updated code.
• Step 3: “Break out a utility function for date formatting since it’s used in multiple places” – creating a new helper function file, etc.
• Step 4: “Add comments in api.js explaining the localStorage usage” – providing those comments.
• …and so on.

Each step will contain the modified code. After getting this plan, you can review it (to ensure the refactor makes sense to you) and then let Cursor apply it. This kind of prompt harnesses Gemini’s understanding of the entire code to suggest cohesive improvements.

3. Converting Plain CSS to Tailwind CSS

Scenario: The app currently uses custom CSS (perhaps a file with classes and styles). You want to modernize it by using Tailwind CSS for styling instead of the existing CSS, to make styling more consistent and utility-based.

Prompt Example:

[PASTE CODEBASE CONTEXT HERE]

I want to **convert the styling of the app from traditional CSS to Tailwind CSS**.

**Task:** Migrate all styles to use Tailwind utility classes.
- Install/configure Tailwind CSS in the project.
- Replace CSS classes in the HTML/JSX with equivalent Tailwind class names (e.g., instead of a custom `.btn` class in CSS, use Tailwind classes like `bg-blue-500 text-white py-2 px-4 rounded` directly on the element).
- Remove or minimize the old CSS files once components are using Tailwind.
- Ensure the UI looks similar or improved after the conversion (colors, spacing, etc., should have Tailwind equivalents).

**Guidance:**
- Use Tailwind’s CLI or CDN as appropriate (if this is a React project, set it up via npm and a Tailwind config file).
- You can use Tailwind utility classes for layout, typography, colors, etc. Try to match the current design.
- For any unique styles that Tailwind doesn’t cover out-of-the-box, mention how to include them (e.g., custom CSS or Tailwind plugin).
- Maintain responsiveness/mobile-friendliness.

**Instructions to AI:**
Provide a **step-by-step migration plan**. Each step should detail a set of changes, with code examples:
1. Setting up Tailwind (e.g., adding dependencies, creating `tailwind.config.js`, including the Tailwind directives in a CSS file).
2. Converting styles in each major component or CSS section (show before/after code if needed, or just the new class usage).
3. Removing old CSS or cleaning up.
Use **numbered steps** and **code blocks** for any code (like configuration or example JSX changes). This response will be executed by an AI agent, so it should be precise and actionable.

Begin with Step 1.

This prompt first instructs Gemini to outline how to integrate Tailwind (which might involve installing the package and adding Tailwind’s base styles in your project). Then it asks for replacing the current styles. Gemini’s answer might be:

• Step 1: Install Tailwind via npm and initialize it – providing the command (npm install tailwindcss postcss autoprefixer) and an example Tailwind config file snippet, plus adding the @tailwind base; @tailwind components; @tailwind utilities; lines to your main CSS.
• Step 2: Convert the main container and layout styles – e.g., show the JSX of your App or HTML file before and after with Tailwind classes.
• Step 3: Convert button styles – e.g., “Replace .btn class usage with Tailwind classes on each button element” and show one example code snippet.
• Step 4: Remove old CSS definitions for classes that are now replaced, or delete styles.css if fully migrated, etc.
• Step 5: Maybe a step to test the UI or mention adjusting the Tailwind config for any custom colors if used.

Each step would have concrete changes. After obtaining this, you could run it in Cursor to actually perform the installation and text replacements. (Note: The agent can run shell commands if included, which is why providing the npm install ... in the plan is useful – Cursor will execute it.)

4. Fixing a Bug in the Application

Scenario: Suppose there is a known bug in your to-do app. For example, tasks aren’t being saved correctly – when the page reloads, new tasks disappear (indicating a storage or state bug). We want Gemini to diagnose and fix the issue.

Prompt Example:

[PASTE CODEBASE CONTEXT HERE]

There's a **bug** in the to-do app: new tasks are not persisted. When I add a task and refresh the page, the task is gone. We expect tasks to be saved (e.g., in local storage or via an API) so they persist across reloads, but that’s not happening.

**Task:** Identify the cause of this bug and fix it.
- Determine why tasks aren’t being saved or loaded properly (e.g., is the save function not called, or writing to the wrong key, or the load on startup missing?).
- Implement a fix so that tasks do persist across a page reload. This might involve modifying the save logic, load logic, or both.
- Ensure that no new bugs are introduced by the fix (for example, check that completing or deleting tasks still works after the change).

**Instructions to AI:**
Provide a **step-by-step solution** to fix this bug:
1. Explain briefly what is causing the bug (which part of the code is responsible).
2. Outline the code changes needed to fix it.
3. Show the code changes in context (use code blocks for the specific fixes in the specific files).
Use numbered steps for clarity. The solution will be applied by an automated tool, so make sure each step is clear and includes the actual code modifications needed.

Begin with Step 1.

This prompt asks Gemini to not only fix the bug but also to help us understand it by identifying the cause. Given the full context, Gemini might find, for example, that in App.js the function that saves tasks to localStorage is never called, or the key is wrong, etc. A sample answer could be:

• Step 1: Identify the issue – e.g., “The function saveTasks() in utils/storage.js is defined but never invoked when a new task is added. This means tasks aren’t actually being saved to local storage.【(It might cite the code)】.”
• Step 2: Implement the fix – e.g., “Call saveTasks(taskList) after adding a new task in App.js” and show the added line in a code snippet.
• Step 3: Ensure tasks load on startup – e.g., “In App.js, call loadTasks() in a useEffect (for React) or on page load to populate the task list from storage. Here’s the added code: …” with a code block.
• Step 4: Test persistence – maybe a note like “Now, after these changes, when you add a task it will be saved and componentDidMount/useEffect ensures it loads on refresh.”

Once you have Gemini’s plan with the bugfix steps and code, you can again give it to Cursor’s agent. Cursor will then make the code changes (adding the missing calls or lines). After running it, test the app: add a task, refresh the page, and verify the task is still there. If it is, the bug is resolved. 🎉

---

Conclusion: Using Gemini 2.5 Pro in combination with Cursor IDE creates a powerful workflow for software development. Gemini’s ability to consider your entire project context means the guidance or code it provides is highly informed and context-aware. Cursor IDE, on the other hand, executes those changes quickly and interactively, effectively serving as your pair-programmer that carries out instructions. By preparing good prompts (with tools like Repomix to gather context) and structuring the AI’s output, you can handle even complex updates to your web-based to-do list app with ease. Always review and test the AI-generated changes, but enjoy the boost in productivity this duo provides. Happy coding!