Welcome to the Tips & Tricks for AI Coder Beginners, A comprehensive resource designed to help developers effectively use AI tools to develop websites, apps, and other projects. This guide is based on real-world experience and practical advice tailored for absolute beginners.

---

• 📌 Introduction

• 🧠 Chapter 1: Getting the AI to Do What You Want – The Power of Thoughtful Prompts
• 🔍 Chapter 2: When Things Aren't Going Your Way – Troubleshooting with AI and Regaining Momentum
• 📸 Chapter 3: Using Screenshots and Tracking to Handle Persistent Issues
• 🛠️ Chapter 4: Guiding AI to Address Problems, Errors, and Challenges Effectively

• 🌐 Chapter 5: Understanding CDN Libraries and Their Role in Your Project
• 🤝 Chapter 6: How to Work with AI, Not Just Let It Work for You

• ⚡ Chapter 7: Making the Most of Your AI Assistant – When to Use Agent Mode, Edit Mode, and Other Models
• 📏 Chapter 8: Taming the Code – Why Smaller Files Are Better (for You and Your AI)
• 🤖 Chapter 9: How to Choose the Best AI Coding Assistant

---

This guide also serves as a testament to my journey as a beginner developer learning to harness the power of AI. Every chapter is inspired by lessons I've learned while navigating the world of AI-driven development. My goal is to share these insights with you so you can avoid common pitfalls and maximize the potential of these tools.

---

Let me share with you one of the biggest lessons I learned early on. Here it is: The way you phrase what you ask the AI to do is everything. The difference between getting something brilliant and getting something useless often comes down to how you asked for it. Sounds simple, but this tip alone can save you a lot of frustration.

So, let’s talk about how to ask your AI “coder assistant” for help in a way that actually gets results—because trust me, the way you talk to the AI makes all the difference.

Here’s the deal: AI tools are smart, but they aren’t mind readers. They’re brilliant at following directions, but they need those directions to be clear and specific. If you’re vague or leave room for guessing, things can go sideways fast.

Think of it this way: Imagine you’re hiring a contractor to build you a house. If you say, “Build me something nice,” you might end up with a treehouse when what you really wanted was a three-bedroom ranch with a pool. But if you hand them blueprints and say, “I want this exact house with these exact features,” they’ll know exactly what to do.

AI works the same way. If your instructions are specific, the output will be better. Instead of saying, “Fix this code,” try something like, “Fix the problem with the submit button not working when a user clicks it.” Instead of “Make my app pretty,” say, “Modernize the app’s UI with sleek, professional fonts and high-quality icons.” See the difference? The AI now knows exactly what you want and has a clear path to follow.

One trick I’ve learned is to start with the right task-specific phrase—think of it as the secret sauce that gets the AI into the right mode. Here are examples of phrases you can use for different situations. Feel free to copy, tweak, and use these as much as you want.

1. When Something’s Broken:

   • Use this: “Fix the problem with…”
   • Example: “Fix the problem with the login button not doing anything when clicked.”

   This tells the AI to focus on fixing one specific issue. Instead of trying to redo your entire code, it homes in on solving just that problem.

   Pro Tip: If you know what broke things (like a certain line of code), include that detail. And if you’re not sure? No worries—just focus on describing the symptoms of the problem as clearly as possible.

2. When Adding New Features:

   • Use this: “Add a feature to the existing…”
   • Example: “Add a feature to the existing app that allows users to filter products by price without removing any other features.”

   This phrase is worth its weight in gold because it tells the AI two critical things: (1) what you want to add and (2) what not to touch. Trust me, you don’t want the AI to accidentally break something while it’s adding your shiny new feature. That’s why the “without removing any other features” part is so important—it keeps everything else intact.

3. When You Need to Fix Browser Errors:

   • Use this: “Fix these errors found in the browser console…”
   • Example: “Fix these errors found in the browser console: [Paste the error messages here].”

   Okay, this might be the most beginner-friendly pro tip ever. If you’re building a web app and things aren’t working, your browser console is like a detective who’s already figured out the crime scene for you. To find it, right-click on your webpage, click “Inspect,” and go to the “Console” tab. You’ll see error messages there—just copy those and paste them into your AI tool.

   Why does this work so well? Because those error messages often contain the exact information the AI needs to figure out what went wrong. It’s like giving it a roadmap for fixing your app. Seriously, this trick is a lifesaver.

4. When You Want to Improve How Your App Looks:

   • Use this: “Improve the overall app (or specific part) UI with professional, modern, visually appealing…”
   • Example: “Improve the overall app UI with professional, modern, visually appealing, high-quality fonts, icons, and a cohesive color palette inspired by minimalist designs.”

   Let’s be real—design is subjective. What looks great to one person might not be someone else’s cup of tea. That’s why it’s especially important to guide your AI with words like “modern,” “professional,” and “high-quality.” These kinds of adjectives help the AI understand the overall vibe you’re going for.

   Pro Tip: If you have a specific app or website that you love the look of, mention it! For example: “Make this look more like the design of Spotify.” The AI will try to mimic that style and apply it to your project.

5. When Removing Features:

   • Use this: “Remove the [feature] and all related code without breaking the core features of the app.”
   • Example: “Remove the search bar and all related code without breaking the shopping cart or user profile features.”

   Removing features can be tricky because you don’t want to accidentally take out something important. This phrase lets the AI know to cleanly remove the feature but leave everything else working exactly as it should.

6. When You Accidentally Delete Something:

   • Use this: “I lost the [file], please restore it so that the project looks and functions exactly as it was.”
   • Example: “I lost the style.css file, please restore it so the project looks and functions exactly as it did before.”

   It's important to let the AI know what file you lost and give it some context (e.g., “This file handled all the styling for my homepage”). While the AI might not restore the file perfectly, it’ll often provide enough to get things back on track.

If there’s one thing you take away from this chapter, let it be this: specificity is everything. The more detail and clarity you give in your prompts, the better the AI will perform. Here’s what I’ve learned:

• Always describe what you want in plain, simple language. Don’t overcomplicate it!
• Focus on one task at a time. Big, multi-part prompts can overwhelm the AI.
• Don’t be afraid to experiment. If the first answer isn’t quite right, tweak your wording and try again.

This process might feel clunky at first, but I promise, the more you practice, the better you’ll get at it.

Working with AI to build apps and websites isn’t always smooth sailing. There will be moments when you feel like you’re on a roll, only to hit a wall where nothing seems to work. You’ve given the AI clear instructions (or so you thought), you’ve rephrased your requests, and yet… your project isn’t moving forward.

This chapter is all about troubleshooting those frustrating situations and getting yourself unstuck.

---

Sometimes, the AI just… forgets itself. If you find yourself repeating a command over and over, and nothing is changing, the problem might not be with your instructions—it might be the chat history.

AI language models work by keeping track of previous instructions and responses in the current conversation. Over time, this history can become cluttered with conflicting context. For example:

• You might have asked for a feature earlier and then changed your mind, but the AI is still trying to balance both instructions.
• The AI could be interpreting your new commands in the context of outdated instructions instead of treating them as independent tasks.

The Fix: Start a new conversation with the AI.

• Open a fresh chat, paste the most recent version of your code, and explain what you’re trying to accomplish.
• Starting fresh clears the history and eliminates contradictions that may have crept in during your ongoing conversation.
• Bonus: A new chat can often lead to better, more focused results because the AI isn’t distracted by its past “thoughts.” It’s like pressing a reset button.

---

If starting fresh doesn’t solve the problem, there’s a chance the issue is in the code itself. Contradicting code happens when two pieces of code tell your app to do opposite things. This can often occur when:

• The AI added a new feature but forgot to clean up or remove old code related to a previous version of that feature.
• You’ve tried to patch multiple problems one at a time, and the AI accidentally created logic overlaps.
• You’re working on a complex project, and somewhere along the way, something got tangled.

For example:

• Imagine you’re creating a button for your app. One part of your code says, “When the button is clicked, submit the form.” Another part says, “When the button is clicked, refresh the page.” Now the app is confused—does the button submit or refresh?

The Fix: Ask the AI to identify and resolve contradictions. Using the chat feature of your AI assistant, you can give it a prompt like, “Review my code and identify any parts that might be contradicting each other.” Then paste the relevant sections into the chat.

Another Fix: Debug manually. If the AI isn’t catching the problem (or you just want more control), start testing pieces of your app one at a time. Disable or comment out parts of the code and see how the app behaves when those sections aren’t running. This process can help you locate the specific lines causing the conflict.

---

Here’s a game-changer: AI doesn’t always need to write code for you. You can also use it as a trusted debugging partner to answer your questions and guide you through problems without actually changing your project. This approach gives you more control and can help you better understand how everything is connected.

For example, you can ask:

• “What might be causing my app to crash when I click the submit button?”
• “How does this section of my JavaScript interact with the CSS styling below?”
• “What impact would deleting this variable have on the rest of the code?”

This back-and-forth isn’t about handing over control to the AI—it’s about using it as a coding coach. By treating AI as a teacher rather than a task executor, you can unlock insights that help you troubleshoot faster and better.

---

If one AI model isn’t giving you answers you can work with, try mixing things up. Different models have different strengths:

• ChatGPT (especially GPT-4): Great for general-purpose coding advice, debugging, and generating reusable code snippets.
• Claude (Anthropic): Often excels at understanding complex instructions and summarizing code but can miss finer debugging details.
• Gemini (Google): May provide additional context if you’re dealing with Google-related tools or technologies.
• Specialized Coding Assistants (e.g., Cursor, GitHub Copilot, Windsurf): Integrated directly into IDEs for real-time coding help.

Here’s how to do it:

1. Copy your current code or problem description.
2. Paste it into another model.
3. Ask the same or similar question.

Even if you’ve been working exclusively with one tool, switching to another can provide valuable new perspectives (and solutions).

---

Changelogs are lifesavers. They let you:

• Track exactly what the AI edited or added to your project.
• Roll back changes if something goes wrong.
• Compare older versions of your code to pinpoint issues.

Many tools and IDEs allow you to enable changelogs or version history. If not, you can use Git for version control to achieve the same effect.

---

Sometimes, the issue isn’t you or the AI—it’s the language you’ve chosen. If your app isn’t working well or feels overly complex, ask the AI: “Is [current language] the best choice for this project?”

This one shift can be a game-changer.

---

---

This chapter focuses on leveraging screenshots in creative and effective ways, along with strategies for having the AI track and remember changes so that your workflow stays productive and frustration-free.

---

A screenshot can often say more than words, especially when something in your UI doesn’t look or behave as expected. However, without proper context, the AI might misinterpret the screenshot and assume it represents the solution you want rather than the problem you’re highlighting. To address this, it’s critical to pair your screenshot with precise prompts that guide the AI’s focus.

1. Provide a Clear Description Alongside the Screenshot:
   A screenshot without context can lead to misunderstandings. For example, if you’re highlighting a visual bug, include an explanation like:

   • “This screenshot shows the UI after submitting a form. The button is supposed to redirect the user to a confirmation page, but nothing happens. Please identify the issue.”

2. Highlight Key Areas in the Screenshot:
   Use basic image editing tools to circle, underline, or annotate the parts of the screenshot that are relevant to the problem. This helps the AI know where to focus.

3. Clarify That the Screenshot Represents a Problem:
   To make sure the AI doesn’t misinterpret the image as your desired output, use this prompt:

   • “The problem continues - the picture shows the problem, not the solution.”

   Why this works: This phrasing explicitly tells the AI to treat the screenshot as evidence of the issue, ensuring it analyzes the problem rather than assuming the outcome.

---

Another common issue is when the AI generates code changes that don’t appear in the app or website’s UI. This can happen for several reasons—deployment issues, unsaved changes, or even hidden bugs in your project structure. Screenshots are especially useful here because they can visually capture the “before” and “after” states, helping the AI pinpoint what went wrong.

1. Take two screenshots:

   • One showing the state of the UI before applying the changes.
   • Another showing the UI after applying the changes (where the issue remains).

2. Include both screenshots in your prompt with an explanation like:

   • “These two screenshots show the UI before and after I implemented your suggested changes. The UI doesn’t reflect the changes. Analyze the code to find the issue and fix it.”

3. Use targeted prompts to go deeper:

   • “Analyze the entire directory and look for problems that are preventing your changes from being implemented.”
   • “Figure out why your changes are not reflecting what I see on the project.”

Why this works: Combining screenshots with prompts gives the AI both visual and written context, making it easier for it to identify underlying issues.

---

Screenshots aren’t just for pinpointing UI problems. Here are some additional ways you can use screenshots to improve communication with your AI assistant:

1. Show Error Messages or Logs:
   If your browser console or application log shows an error, take a screenshot of it and include a prompt like:

   • “This error message appears in the browser console after clicking the submit button. Please identify the issue causing this error and provide a solution.”

2. Capture Unexpected Behavior in Live Environments:
   When debugging deployed projects, take screenshots of any unexpected behavior and describe what should have happened instead:

   • “This screenshot shows the mobile layout where the navigation menu is broken. It should collapse into a hamburger menu, but it stays expanded. Please fix this issue.”

3. Highlight Missing Elements in the UI:
   If something is missing from your UI (e.g., an image, button, or text), use a screenshot to show its absence:

   • “This screenshot shows the current UI. The ‘Add to Cart’ button is missing below each product listing. Please analyze the code and make sure the button appears in the correct location.”

4. Comparing Designs:
   Use screenshots of designs from similar apps or projects as inspiration and ask the AI to replicate elements from those designs:

   • “Here’s a screenshot of a competitor’s navbar. Make my navbar look like this, matching its style and responsiveness.”

---

Another frequent challenge with AI-assisted development is when the AI forgets prior edits or loses track of changes it has made. To combat this, you can ask the AI to create a custom change-tracking system within your project. This system will document the changes it makes, acting as a “memory” to reference whenever something goes wrong.

• “Create a system within the project that automatically keeps track of all changes made to the code, along with timestamps and descriptions of each change.”

This can include:

1. A Centralized Log File:
   The AI can create a file (e.g., changelog.txt) where it automatically appends a description of each change it makes:

   • Example format for changelog entries:

     Timestamp: 2025-01-06 11:30PM
     File Edited: main.js
     Description: Fixed the submit button functionality to redirect to the confirmation page.
     

2. Inline Code Comments:
   Ask the AI to annotate its changes directly in the code:

   • Example:

     // Added event listener to fix the submit button issue (2025-01-06)
     submitButton.addEventListener('click', handleSubmit);
     

3. Version Numbers or Tags:
   Have the AI embed version numbers or tags within the code so you can revert to specific points if needed:

   • Example prompt: “Add version tags in comments at the top of each file, updating them every time a change is made.”

• It creates a single source of truth for all changes, helping you debug and roll back if necessary.
• It reduces frustration when the AI forgets past edits, as you can refer to the changelog or inline comments.

https://github.com/techcow2/cursor-agent-tracking

When working on a project, you’re bound to encounter issues—whether it’s crashes, unexpected behavior, or persistent errors. These moments can be frustrating, but there’s a simple and effective way to guide the AI to handle these challenges carefully while avoiding known pitfalls. This section will show you how to craft thoughtful prompts that help the AI tackle problems effectively without introducing new ones.

---

Sometimes, when trying to fix an issue or add a new feature, you might find that the AI inadvertently repeats the same mistake or introduces new problems. This can happen because the AI isn’t aware of past errors or isn’t given enough context to avoid them. Without clear guidance, it might overlook critical details or create unintended side effects.

---

To prevent these issues, you can craft prompts that combine your task description with explicit instructions about what to avoid. This ensures the AI approaches the task with caution and focuses on solving the problem without causing further complications.

1. Revert to a Stable State (if needed):

   • Before making changes, ensure your project is in a stable state where it functions correctly without the problematic additions or modifications.

2. Identify and Document the Problem:

   • Gather all relevant information about the issue:
     • Error messages from logs or consoles.
     • Steps to reproduce the problem.
     • Observed behavior versus expected behavior.

3. Craft Your Prompt:

   • Use this template to guide the AI:

     Implement [task/feature] carefully while avoiding [specific problem/error]. Ensure all existing functionality remains intact.
     

   • Examples:
     • “Add a feature that allows users to filter products by category on the homepage. Implement this feature carefully and avoid causing this error: TypeError: Cannot read property 'map' of undefined.”
     • “Fix the issue with the login button not redirecting users after submission. Ensure no other features are disrupted during this process.”

4. Provide Context (if applicable):

   • If you suspect certain parts of your code are related to the issue, include those details in your prompt:

     The error might be caused by how the product list is being rendered. Please ensure any changes to this part of the code do not introduce new bugs.
     

5. Review and Test Output:

   • Carefully review the AI’s suggestions before applying them.
   • Test changes in a controlled environment to confirm they resolve the issue without introducing new problems.

---

• Error Awareness: Including specific problems or errors in your prompt helps the AI focus on avoiding known pitfalls.
• Precision: Phrases like “implement carefully” signal that accuracy is critical.
• Proactive Debugging: This approach encourages the AI to analyze potential risks and produce solutions that are both effective and safe.

When building or enhancing a website or a web-based application, efficiency and performance are two critical factors. One effective way to achieve these goals is by using Content Delivery Network (CDN) libraries. This chapter will guide you through what a CDN library is, how it benefits your project, and introduce some of the most popular libraries like Tailwind CSS, Bootstrap, Material UI, and more. It will also provide helpful examples on how to prompt your AI assistant to integrate and use these libraries—especially useful if you’re new to coding and rely on AI to simplify development tasks.

---

A Content Delivery Network (CDN) is a geographically distributed network of servers that delivers web content—such as JavaScript libraries, CSS frameworks, or fonts—quickly to users based on their location. A CDN library refers to a version of a popular framework or tool (like Bootstrap or jQuery) that is hosted on these networks. Instead of downloading the files to your own server or development machine, you reference them directly from the CDN.

1. Faster Loading Times
   CDNs serve files from servers located closest to your users, reducing the time it takes for your site to load.

2. Reduced Bandwidth for Your Server
   Offloading the library hosting to a CDN means your own server doesn’t have to handle those file downloads.

3. Ease of Implementation
   You can add powerful libraries quickly—often with just one or two lines of code.

4. Automatic Updates
   CDNs typically host the latest versions of libraries, so you can easily stay up to date.

5. Caching Advantages
   If a user has already loaded the same library or framework from a CDN on another site, their browser may use the cached version, speeding up load times further.

---

If you’re brand new to coding and rely on AI for setting up your project, here are prompt examples you can use to have AI handle library integration:

• Integrating a CSS Framework
  Example Prompt:

  “Use the Bootstrap CDN in my existing HTML file. Make sure the navbar collapses on mobile. Place a footer at the bottom with a simple copyright notice.”

• Migrating from One Framework to Another
  Example Prompt:

  “Replace Tailwind CSS with Bootstrap via CDN in my project. Carefully convert existing Tailwind classes to Bootstrap equivalents to keep the same overall design.”

• Adding a JavaScript Utility
  Example Prompt:

  “Include Lodash from a CDN in my index.html. Then, in my main.js file, demonstrate how to use Lodash’s debounce function for a text input.”

These prompts give the AI clarity on which library to use, how to use it (via a CDN), and any specific tasks or features you want implemented.

---

Below, you’ll find popular libraries you can easily add to your project via a CDN. Each entry includes a description, usage notes, a sample snippet, and a prompt example for your AI.

---

• Description:
  A utility-first CSS framework that helps you build custom designs rapidly by using pre-defined classes in your HTML.

• Best For:
  Developers who want granular control over the design without writing a lot of custom CSS.

• Sample Implementation:

  <link 
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
    rel="stylesheet"
  >
  

• AI Prompt Example:

  “Add Tailwind CSS to my project via a CDN. Create a homepage with a header, a simple hero section, and a footer. Use Tailwind classes to ensure a clean, modern design.”

---

• Description:
  One of the most widely used CSS frameworks for building responsive, mobile-first websites. It comes with pre-designed components like navbars, forms, modals, and more.

• Best For:
  Beginners who want a quick and consistent design with minimal setup.

• Sample Implementation:

  <link 
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet"
  >
  <script 
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  ></script>
  

• AI Prompt Example:

  “Add the latest Bootstrap CDN links to my website. Create a responsive navbar with a dropdown for ‘Services’ and a search bar on the right. Ensure it looks good on mobile devices.”

---

• Description:
  A React-based library that implements Google’s Material Design system, offering ready-to-use components like buttons, cards, and dialogs.

• Best For:
  React projects requiring a sleek, modern, and professional design aesthetic.

• Sample Implementation:

  • CDN for Material Icons:

    <link 
      href="https://fonts.googleapis.com/icon?family=Material+Icons" 
      rel="stylesheet"
    >
    

  • React Integration (via npm):

    npm install @mui/material @emotion/react @emotion/styled
    

  (While Material UI primarily recommends npm, you can still reference their icon fonts via CDN.)

• AI Prompt Example:

  “Integrate Material Icons from a CDN and use them in my React app. Build a simple card component for displaying products with a material-style ‘Add to Cart’ button.”

---

• Description:
  A comprehensive icon library offering scalable vector icons that can be easily styled with CSS.

• Best For:
  Quickly adding social media icons, nav icons, or any other iconography without creating custom SVGs.

• Sample Implementation:

  <link 
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    rel="stylesheet"
  >
  

• AI Prompt Example:

  “Add Font Awesome to my HTML via CDN. Replace all placeholder icons in my navbar with Font Awesome icons for ‘Home,’ ‘Profile,’ and ‘Cart.’ Ensure they scale correctly on mobile.”

---

• Description:
  A classic JavaScript library known for simplifying DOM manipulation, event handling, and AJAX operations.

• Best For:
  Legacy projects or beginners who want to do complex UI interactions without writing extensive vanilla JavaScript.

• Sample Implementation:

  <script 
    src="https://code.jquery.com/jquery-3.6.4.min.js"
  ></script>
  

• AI Prompt Example:

  “Add jQuery via CDN to my index.html. Show me how to hide a div when a user clicks a button, and log a success message to the console.”

---

• Description:
  A JavaScript utility library that provides a wide range of functions for data manipulation, including deep cloning, debouncing, and more.

• Best For:
  Simplifying complex operations on arrays, objects, and strings.

• Sample Implementation:

  <script 
    src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"
  ></script>
  

• AI Prompt Example:

  “Add Lodash from a CDN. Convert my existing for-loops to Lodash methods, and demonstrate how to debounce a search field.”

---

• Description:
  A CSS library offering pre-made animations (fade, bounce, slide, etc.) that you can apply to elements by adding specific classes.

• Best For:
  Quickly adding animations to elements without writing custom CSS animations.

• Sample Implementation:

  <link 
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" 
    rel="stylesheet"
  >
  

• AI Prompt Example:

  “Include Animate.css via CDN and apply a fade-in animation to my hero section on page load. Also apply a bounce effect to the ‘Sign Up Now’ button.”

---

• Description:
  A versatile JavaScript library for creating interactive charts and graphs.

• Best For:
  Beginners who want a straightforward way to visualize data without diving into more complex libraries.

• Sample Implementation:

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  

  const ctx = document.getElementById('myChart').getContext('2d');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3],
        backgroundColor: ['red', 'blue', 'yellow']
      }]
    }
  });
  

• AI Prompt Example:

  “Add Chart.js via a CDN and create a bar chart showing monthly sales data. Label the y-axis as ‘Sales’ and the x-axis with the months of the year.”

---

1. Identify Your Needs
   Decide if you need help primarily with styling (CSS) or with JavaScript functionality. Some libraries (like Bootstrap or Tailwind) focus on design, while others (like jQuery or Lodash) focus on helping with JavaScript tasks.

2. Check Compatibility
   Ensure the library you choose works well with the tools or frameworks you already have in place.

3. Look for Active Community and Documentation
   Well-supported libraries typically have better tutorials, larger communities for troubleshooting, and frequent updates.

4. Ask Your AI
   If you’re still unsure which library to use, prompt your AI for advice:

   “Which library is best for a beginner-friendly, highly customizable UI: Tailwind, Bootstrap, or Material UI?”

   The AI can explain the pros and cons for each choice in the context of your project.

Artificial intelligence is an incredibly powerful tool for coding, but to get the best results, I've learned that you shouldn’t rely solely on full automation. Many AI-powered IDEs, like GitHub Copilot, Cursor & WindSurf offer Agent Mode, which can take full control of problem-solving, but this isn’t always the most effective approach. In many cases, taking a more interactive role—by highlighting sections of your code, requesting edits, and guiding the AI—yields better results. The key to maximizing AI’s potential is striking the right balance between automation and human oversight.

Think of AI as a collaborative partner, not just a tool that runs on autopilot. At the start of this journey, I was under the impression that AI can independently produce flawless code without any guidance. The reality is that AI performs best when it’s working alongside human intuition and problem-solving skills. Even if you don’t fully grasp every detail of your code, having a general sense of where an issue lies is often enough to steer the AI in the right direction.

---

Letting AI take full control of debugging or code generation might sound convenient, but it often leads to unnecessary complications. Here’s why a guided approach usually delivers better results:

• Overgeneralization: The AI might scan your entire codebase instead of focusing on the specific issue, making unnecessary modifications.
• Unintended Code Changes: Rather than fine-tuning a particular function, the AI could refactor multiple files, creating new problems in the process.
• Longer Processing Time: Running extensive, unfocused fixes takes time and could slow down development, especially in larger projects.
• Lower Fix Rate: Because the AI doesn’t inherently understand the intent behind your code, its ability to blindly resolve problems successfully hovers around 50%.

By isolating the problem and guiding the AI with context, you significantly improve the chances of getting a correct fix. This works because:

• You Provide Context: Your insights help the AI zero in on the right section of code.
• More Accurate Fixes: Highlighting specific code increases the AI’s fix success rate to 85% or more.
• Faster Results: The AI processes smaller chunks of code, leading to quicker responses.
• Better Control: Instead of relying on AI to interpret vague commands, you direct it toward meaningful solutions.

This method is especially valuable in complex projects, where scanning and modifying the entire codebase isn’t practical. Even with minimal coding knowledge, you can still benefit from AI assistance by guiding it to relevant problem areas and making incremental improvements based on its suggestions.

---

Let’s say you’re working on a website and notice that new content sometimes appears and sometimes doesn’t. After experimenting, you realize that refreshing the page cycles between showing and hiding content. That’s as far as your debugging has gone.

If you let an AI agent take over with a vague command like:

“Fix the problem where content is sometimes there and sometimes not.”

1. The AI scans the entire codebase looking for anything related to content display.
2. It may focus on irrelevant sections because the description lacks specificity.
3. It might modify CSS rules or JavaScript functions across different areas, creating unintended side effects.
4. Since “ACME Incorporated” (the problematic section) appears multiple times across the website, the AI might edit all instances, generating even more inconsistencies.

Instead, let’s say you highlight the specific section of the code related to "The History of ACME Incorporated" and right-click to request an edit.

• Now, AI only reviews the highlighted section instead of the entire codebase.
• You provide a focused prompt:

  “Fix the issue where this section sometimes disappears and reappears on refresh.”

• AI recognizes only the relevant code and provides a more precise fix.
• Because AI is solving a localized problem, the chance of success jumps from 50% to 85%+.

---

Using GitHub Copilot or a similar AI-powered IDE, follow these steps to maximize effectiveness:

• Observe how the issue occurs and try to narrow down which part of the code is involved.
• Check for browser console errors or debugging logs for clues.
• Run simple tests to confirm what might be causing the problem.

• Select only the portion of the code where you suspect the issue lies.
• Avoid highlighting entire files unless necessary, as it may lead to excessive modifications.

• In GitHub Copilot, right-click the selected code and choose one of the following:
  • "Fix this code" if you know it's broken.
  • "Explain why this isn’t working" if you need AI’s analysis.
  • 🌠 "Look for the yellow stars after highlighting code" Instead of right-clicking, left-click on the yellow stars for more options to interact with your codebase.🌠

Instead of a vague command, structure your request with specifics:

• ✅ Good Prompt:

  “Fix the issue where this content section sometimes disappears after refresh. Ensure it always displays correctly.”

• ❌ Bad Prompt:

  “Fix this bug.”

• AI-generated fixes may not be perfect on the first attempt. Review changes carefully.
• If something looks off, refine your prompt and run the AI again.
• Keep interactions short and iterative—small adjustments lead to better long-term results.

---

Alright, now that you've got a solid understanding of how to work with AI rather than just letting it work for you, it’s time to put it into practice. Try highlighting, right-clicking, and using targeted prompts in your next coding session. You’ll be amazed at how much quicker and more accurate your fixes become!

AI is here to help, but it thrives when you take the lead. The more you interact with it, the better it gets at assisting you. Think of it like a teammate—you wouldn’t expect a great outcome without communicating clearly. So, keep experimenting, stay engaged, and most importantly, have fun refining your AI-assisted coding workflow!

---

In this chapter, we’ll explore Agent Mode vs. Edit Mode in your AI code assistant to help you choose the right approach for any situation. We’ll also cover how to avoid rate limits and which AI models to pick for different tasks.

---

Modern AI-powered IDEs often provide at least two ways to interact with your code. Let’s break down Agent Mode and Edit Mode so you know exactly when to pick one over the other.

---

Agent Mode is like firing up a mini “developer’s brain” in your IDE. It looks at your entire codebase, identifies where changes need to happen, and can implement those changes automatically. This can be an absolute game-changer when:

1. You’re Adding a New Feature
   • Example: Implementing a new user profile system that spans multiple files (database schema, backend routes, front-end forms).
2. You’re Making Big Structural Changes
   • Example: Migrating your project from vanilla CSS to Tailwind, or refactoring your entire component structure in React.
3. You’ve Tried Simple Fixes in Edit Mode, But Nothing Works
   • Sometimes, the quick patches just don’t resolve the deeper issue—Agent Mode can take a broader look.
4. You’re Not Sure Which Files Need Editing
   • If you only have a vague idea of what needs to change, let the agent handle the “detective work.”

Key Advantage: It’s a “big-picture” approach—Agent Mode can (theoretically) see the forest, not just the trees.

Caution: It can be overkill for small tweaks. If you only need to edit one or two lines, Agent Mode might create unintended changes elsewhere.

---

Edit Mode is your best friend for targeted changes in one or two specific files. You tell your AI code assistant exactly where to look, highlight the lines of code, and request a fix or improvement. This mode works best when:

1. Making Small Updates
   • Example: Changing a function name or updating an API endpoint in a single file.
2. Fixing Minor Bugs
   • Example: Correcting a single line that’s causing a console error, or adjusting a CSS property that’s misaligned.
3. Tweaking Known Problem Areas
   • Example: You know that login.js is causing issues—just highlight the relevant code block and let your AI assistant fix it.
4. Testing Quick Ideas
   • Example: “What if we rename this variable?” or “Let me see how the AI suggests a simpler for-loop.”

Key Advantage: Precision. You dictate exactly where the AI looks, drastically cutting down on guesswork.

Caution: Not ideal for large-scale changes or multi-file implementations. You’ll spend too much time highlighting different sections when a bigger “Agent Mode” pass might be more efficient.

---

Even though your AI code assistant is powerful, it can sometimes run into rate limits—essentially usage caps or busy servers that prevent you from making unlimited requests. Here’s how you can sidestep these limitations:

1. Use GPT4o for Inline Chat

   • GPT4o is typically faster for single-file edits and smaller changes.
   • It often has lower queue times and can be more accurate for brief tasks.

2. Save Busy Models for Larger Tasks

   • If you’re performing a big overhaul (i.e., Agent Mode or multi-file updates), you might need a more advanced or specialized model. But for quick fixes, GPT4o can help you avoid spikes in usage on the bigger models.

3. Keep Requests Specific

   • The more targeted your prompts, the fewer times you need to re-run them.
   • This helps reduce overall usage, preventing you from hitting limits quickly.

4. Switch Models When Necessary

   • If one model is giving you trouble or seems “busy,” you can switch to a different model if your platform supports it.
   • Don’t be afraid to bounce between models if you sense you’re nearing usage caps.

---

Selecting the right AI model can make or break your productivity. Here’s a quick reference:

1. GPT4o

   • Use it for smaller changes and inline edits.
   • Great for rewriting a single function, fixing a bug in a small snippet, or adjusting a CSS style.

2. Claude 3.5 Sonnet

   • Your go-to model for most tasks.
   • Balanced approach—handles moderate to complex changes without too much overhead.

3. Claude 3.7 Sonnet

   • For bigger challenges—significant refactors, multi-feature builds, or complicated debugging sessions.
   • If 3.5 Sonnet isn’t quite getting you there, try 3.7.

4. Claude 3.7 Sonnet (Thinking)

   • Last resort for “major problem meltdown.”
   • If everything else fails or you’re adding a massive set of features, this is your big gun.

5. Other Models

   • Explore them if none of the above deliver the results you need, or if you have specialized tasks.

---

Let’s look at a few real-world tips for using your tools effectively—especially if you’re still growing your coding confidence.

1. Prompt Clarity Is Everything

   • Whether you’re in Agent or Edit Mode, always specify the problem, the desired outcome, and (if possible) what to avoid.
   • Example: “Add a user registration feature that stores data in the existing MongoDB database without changing my express.js routes or altering the front-end sign-in form.”

2. Test in Small Steps

   • Even if you need a big set of changes, consider breaking them down into smaller tasks if possible.
   • This lets you catch problems early and revert easily if something goes wrong.

3. Use Version Control Religiously

   • Commit changes before letting your tools modify your code.
   • This way, you always have a stable restore point.

4. Watch the Console or Logs

   • Right after your code assistant modifies your code, open up your browser console (for front-end) or terminal logs (for back-end) to see if new errors appear.
   • This immediate feedback helps you catch issues introduced by AI-driven changes.

5. Combine Human Intuition with AI

   • Even if you’re a beginner, you can still sense when something in your code “feels off.”
   • If an AI-generated block looks overly complicated, ask it to simplify or explain itself rather than blindly trusting it.

---

Let’s walk through how you might apply what we’ve covered:

1. Step 1: Identify your goal (e.g., adding a new “user reviews” section that spans backend and frontend).
2. Step 2: Switch to Agent Mode in your IDE.
3. Step 3: Describe the feature in detail, emphasizing you’re not sure which files need changing. Provide any relevant database schemas or existing code.
4. Step 4: Let Agent Mode propose changes. Review them carefully.
5. Step 5: Test thoroughly and commit once you confirm everything is working.

1. Step 1: Identify the bug (e.g., a “forgot password” link that doesn’t work).
2. Step 2: Pinpoint the file or code snippet causing the issue (e.g., a small function in Auth.js).
3. Step 3: Highlight the relevant lines, open Edit Mode, and ask your AI coder to fix it.
4. Step 4: Test locally to verify the fix.
5. Step 5: Commit if successful; revert and try again if it fails.

---

Staring at a 1,200-line file can be overwhelming. It’s unwieldy, it’s intimidating, and it can quickly turn your coding sessions into a slog. But the truth is, long, monolithic files aren’t just hard on you—they’re also tough on your AI assistant. Bigger files consume more “brainpower” (a.k.a. tokens or requests) and can push you closer to those dreaded rate limits. That’s where keeping your files under 500 lines comes in as a lifesaver.

In this chapter, we’ll explore what has personally worked for me, why shorter files make life easier for both humans and AI, how to split towering monoliths into smaller modules, and how to keep track of the process in a low-stress way.

---

Imagine you’ve got a single file for all your app’s logic—authentication, user management, data handling, and UI interactions, all smushed together. That’s like stuffing an entire library into one book. Sure, everything’s there, but finding what you need is a nightmare.

• Fewer lines = Less confusion
• Smaller chunks = Quicker scanning

When you split your code into logical sections, you can open exactly what you need without scrolling forever or losing your place.

AI coding assistants have a certain “budget” of data they can process per request. If your file is gigantic, the AI can slow down, produce incomplete thoughts, or even time out/hit rate-limits. Shorter files mean the AI can home in on exactly what you’re asking it to edit or explain—leading to faster, more accurate help.

• Less overhead each time the AI tries to understand your code
• Reduced risk of hitting usage caps or rate limits

Bugs happen. But when they do, it’s so much easier to track them down if your code is nicely split into separate files. For example, you won’t have to hunt through 37 “scrolls” of code to find that one function messing things up. Shorter files keep everything simpler and more approachable.

---

Let’s say you’ve got examplefile.js that’s ballooned to 800 lines. Instead of soldiering through it alone, ask your AI assistant to help:

Prompt Example:
“My examplefile.js file has grown way too large (over 500 lines). Break it into smaller modules:

• auth.js for login-related code
• userProfile.js for user profile logic
• examplefile.js should import these new modules and remove any duplicate code.
  Make sure everything still works smoothly after the split.”

With a prompt like that, you’re telling the AI exactly what you want (smaller files) and how you’d like it structured. The AI will usually:

1. Extract code snippets into new files (e.g., auth.js, userProfile.js).
2. Insert the right import/export statements or require/module.exports lines to connect everything together.
3. Remove the redundant or duplicated code in your main file.

---

So, why 500 lines? It’s not a magic rule, but it’s a handy benchmark that has been working for me. If your file regularly creeps above that, it’s a sign you might be mixing too many features or functionalities in one place.

• Section Overload: If you have front-end logic, back-end logic, utility functions, and database calls all in a single file, it’s time to split them up.
• Mixed Responsibilities: If you find yourself building a small “mini-app” inside a larger file, that’s a big hint you should modularize.

• Ongoing Prompts: Whenever you see a file growing, you can say:

  “As you add code, keep orders.js below 500 lines. If it starts to exceed that, split out the logic into a new file called orderHelpers.js without breaking existing functionality.”

This keeps your AI on track while it’s generating code, so it doesn’t just dump everything into one giant file.

---

Comments are like sticky notes for your future self (and for anyone else, including your AI). You can say:

“Add inline comments to each function explaining what it does and why we need it.”

These mini-explanations help you (and the AI) quickly recall each function’s purpose. Bonus points if you include a brief changelog or history section at the top of each file.

A directory structure like this:

├── controllers
│   ├── authController.js
│   ├── userController.js
├── models
│   ├── userModel.js
│   ├── productModel.js
├── utils
│   ├── helpers.js
│   ├── validators.js
└── index.js

Makes your life easier than one big folder with randomly named files. Plus, your AI has a hint about where new code should go—so it won’t accidentally cram everything into index.js.

Before you let the AI do a big refactor, commit your code. That way, if something goes sideways, you can revert to a safe point. Pro tip: if you’re about to do something major, make a new branch, then merge it back into the main branch once you’ve tested everything.

---

Big files + repeated AI queries = quick path to hitting your usage limit. Every time the AI has to read or write code, it’s using up requests. By:

1. Keeping files small
2. Focusing the AI on just one feature or file at a time
3. Adding clarifying comments

…you cut down on those wasted queries. You won’t have to keep feeding thousands of lines back to the AI, and your prompts can be more precise (“Fix the function at line 35 in auth.js”).

---

1. Splitting a Monolith

   “Split main.js into mainUI.js (front-end UI code) and mainAPI.js (API-related code). Update imports/exports so everything works the same.”

2. Keeping Things Tidy from the Start

   “Create a new file for all database queries called dbQueries.js. Move related functions from app.js there. Make sure we still import dbQueries.js in app.js.”

3. Adding Comments & Changelogs

   “As you create auth.js and userProfile.js, add inline comments explaining each function. Also create a changelog entry in CHANGELOG.md summarizing the changes.”

---

Modularization is your friend. It keeps your code base from feeling like a never-ending labyrinth, makes debugging a lot simpler, and saves you from hitting AI rate limits. Remember:

• Shoot for under 500 lines per file, or at least keep that number in mind as a nudge toward splitting things up.
• Use clear, targeted prompts so the AI knows exactly how you want your code organized.
• Don’t forget to add comments and documentation as you go—it’s an investment in your sanity later.

Once you adopt these practices, you’ll notice fewer headaches, faster AI responses, and a better coding experience overall.

---

Selecting an AI coding assistant might feel like you’re trying to pin down a moving target. What’s “best” this week could change drastically next week, thanks to the constant stream of new updates and features. Still, there are core principles you can keep in mind as you search for an assistant that meets both your technical and practical needs. In this chapter, we’ll explore everything from IDE integration and pricing structures to code privacy and context limits. By the end, you’ll have a comprehensive framework for evaluating these rapidly evolving tools.

---

AI coding assistants are a hot new frontier—think of it as the “wild west” of software development. Tools like GitHub Copilot, Trae, Cursor, and Windsurf roll out improvements on a near-weekly basis, while new competitors pop up out of nowhere. Today’s best performance might be overshadowed tomorrow by a model upgrade or a big jump in context window size.

“What’s best” can hinge on many factors: cost, user experience, advanced debugging, or support for specialized programming languages. One developer might value a slick user interface, while another cares more about large context windows and advanced refactoring.

• One-size-fits-all doesn’t really apply because “best” heavily depends on your workflow and coding style.

---

You may have encountered platforms like Loveable, Bolt, or Replit—all of which try to simplify coding with a user-friendly, in-browser environment.

• No Install Needed: You can code on nearly any device with an internet connection.
• Quick Setup: Great for beginners or rapid prototypes—no fussing with IDE plugins or local configurations.
• Limited “Lock-In” for Hobby Projects: If you’re just tinkering, these can be enough to get you up and running fast.

• Restricted File Access: You might not see the underlying project structure or get to manage your own version control system.
• Fewer Advanced Debugging Tools: In traditional IDEs, you can set breakpoints, step through code, or integrate with specialized frameworks. Browser-based assistants may not offer this flexibility.
• Potential Vendor Lock-In: If your entire codebase lives on a single platform, migrating away can be tricky if you grow beyond their constraints.

Who Should Use These?

• Hobbyists wanting a quick, zero-install environment.
• Beginners who aren’t yet comfortable installing an entire development stack.
• Hackathon participants who value speed over full-fledged debugging capabilities.

---

If you’re comfortable with Visual Studio Code or JetBrains IDEs like IntelliJ, PyCharm, or WebStorm, AI plugins that integrate directly can be a huge benefit. You stay in a familiar environment, your normal debug workflow remains intact, and you have granular control over your project files.

• GitHub Copilot: Ties directly into VS Code or JetBrains, well-tested, broad language coverage.
• Cursor: A fork of VS Code with integrated AI, so you get most of VS Code’s extensions and environment plus AI features.
• Windsurf: Similar approach, aiming for a seamless extension in mainstream editors.
• Trae: Often praised for its advanced code suggestions, currently free and unlimited (at the time of writing).

• Deep Debugging: Set breakpoints, watch variables, or attach external debuggers.
• No Surprises: Code refactors happen in your local environment. You can review changes before you commit them.
• Integration with Version Control: You can push and pull from GitHub or GitLab without leaving your IDE.
• Fewer Quirks: Many web-based coding assistants have constraints on file types or project size. Local IDEs tend to be more flexible.

---

The race to provide better pricing, more interactions, and bigger context windows means these details can change frequently. However, certain themes stay consistent.

• Cursor: 500 completions on Pro.
• Windsurf: 500 completions on Pro.
• Trae: Free and unlimited (for now).
• Copilot: 2,000 completions/month plus 50 chat messages on a free plan.

A “completion” could mean a code snippet the AI produces, while a “message” might be one full turn in a chat. This distinction matters—be sure to read the fine print so you know whether you’re at risk of running out of monthly allowances.

Most of these platforms offer some sort of free tier or trial. This is the best way to sample the AI’s capabilities before committing money. Watch out for:

• Trial duration (e.g., 7 days, 14 days, or a full month).
• Trial limitations (some may restrict advanced features or significantly reduce context window size).

This indicates how much text (code or instructions) the AI can handle at once:

• Larger context windows let you paste entire files or even multiple files in one query.
• Smaller windows force you to break your tasks into multiple steps, which can cost more completions or messages.

Look for an AI assistant with a context window that suits your project size. If you’re building large-scale apps, you’ll want more space so the AI can “see” your entire codebase.

• API-Only: Usually requires hooking up an external language model (e.g., OpenAI’s GPT) and paying per token. This can get expensive if you’re generating code frequently.
• Managed Services: Tools like Copilot, Cursor, Trae, and Windsurf mediate communication with their back-end AI, often at reduced, predictable costs.

If you prefer direct control and have the budget, an API approach could work. However, for most developers, a managed service is simpler and often cheaper.

---

Some AI assistants upload parts of your code to the cloud for analysis. If you’re dealing with proprietary or sensitive data, it’s essential to check how your code is stored, whether it’s encrypted, and if the service keeps logs.

• Copilot tends to excel with JavaScript/TypeScript, Python, and other mainstream languages.
• Some tools offer specialized knowledge in less common languages (like Rust, Go, or Haskell), or niche frameworks (like Django, Next.js, or Svelte).

If you’re writing in a specialized domain (e.g., embedded systems), do a quick test in each tool to see which one has better comprehension.

Some assistants target solo developers, while others let you share and collaborate on AI prompts in real time—potentially helpful if you’re working in a company setting. Check for features like:

• Multi-user chat or code suggestions.
• Shared completions or enterprise license options.
• Integration with Slack or Microsoft Teams for status updates.

---

It’s perfectly fine to have multiple AI assistants installed, especially if you’re using a mainstream IDE like VS Code:

1. Try them side by side. You can toggle one assistant off and the other on to see which yields better results for your current project.
2. Watch performance changes. If an update slows one assistant down, you can pivot to another until it’s fixed.
3. Leverage free quotas. Some months you might run out of completions on one tool; simply switch to a free or cheaper alternative until your quota resets.

---

It’s easy to get attached to a single AI coding assistant because you’ve learned all its quirks, but staying flexible can pay off:

• You might find a new assistant that offers a bigger context window right when you need it most.
• Another tool might drop a major feature that perfectly matches your workflow (like better refactoring or integrated test generation).
• Pricing can suddenly jump or drop, making an alternative more cost-effective.

Don’t be afraid to remain a “free agent” in the AI coding world, adopting a “use what works best for the moment” approach.

---

Below is a longer table of AI assistants, complete with links and support info. Always check the docs or contact support if you’re unsure about a plan or feature—they may have updated details since the publication of this guide.

Tool	Website	Support Link	Notes
Cline	Visit	Support	A smaller, community-driven project with open-source roots.
Cody.ai	Visit	Support	Integrates well with Sourcegraph for code search + indexing.
Copilot	Visit	Support	Backed by Microsoft & GitHub, solid for mainstream languages.
Cursor	Visit	Support	Fork of VS Code, rapidly adding new features.
Gemini	Visit	Support	Google's foray; might integrate well with other Google services.
Trae	Visit	Support	Currently unlimited and free, though that may change.
WindSurf	Visit	Support	Another VS Code extension with a big push toward dev productivity.
Loveable	Visit	Support	In-browser environment, extremely user-friendly.
Replit	Visit	Support	Web-based IDE with broad community, but limited deep debugging.
Bolt	Visit	Support	Focus on simplicity; advanced debugging can be restricted.

---

1. Licensing and Intellectual Property

   • Some assistants store your code for training or indexing. If you’re dealing with proprietary code, check the TOS carefully.

2. Data Residency

   • If you must comply with data residency laws (e.g., GDPR, HIPAA), ensure your AI assistant can handle that or offers an on-premise option.

3. Language Model Updates

   • Many of these tools rely on back-end LLMs (Large Language Models). When those LLMs update, features, accuracy, and context windows can change drastically overnight.

4. Evolving Community

   • Larger communities often mean more tutorials, more ready-made prompts, and faster help when you run into issues. Tools like Copilot or Replit have big user bases, while smaller or newer tools may offer more direct developer feedback or specialized features.

---

So, is there a single best AI coding assistant? Probably not—at least not in the long term. Each assistant serves a different niche, and their features or pricing can pivot so fast it makes your head spin. The best strategy is to:

1. Define your needs: Large codebases vs. small ones, advanced debugging vs. quick prototypes, etc.
2. Research each assistant’s latest updates: Check context window size, pricing, and known bugs.
3. Take advantage of free trials: Kick the tires on each tool before you commit.
4. Stay flexible: Don’t lock yourself into a single tool, especially if the competition starts offering a better deal.

Keep these tips in mind, and you'll be well-equipped to navigate the fast-evolving world of AI coding assistants with confidence. From weekend projects to enterprise-grade systems, there's an assistant—or even multiple—that can help you write cleaner code, boost efficiency, and speed up development like never before.

---