Leveling Up with AI Coding Assistants

The world of AI coding assistants is advancing incredibly fast, and it’s a topic we developers, and companies like Hotovo, need to pay close attention to. These tools aren’t just novelties; they can significantly boost our productivity and effectiveness. Adopting these tools can significantly enhance our daily workflows, boosting productivity and even helping reduce bugs. For companies like ours at Hotovo, staying ahead of the curve with these technologies is crucial for maintaining a competitive edge.

I personally see AI coding capabilities evolving through different levels, based on the complexity and autonomy of the assistance they provide:

Level 0: IDE Autocomplete

This is where we started. It’s simply using the basic code completion features built into your Integrated Development Environment (IDE). It predicts keywords, variable names, and suggests basic syntax based on your project’s structure and language rules.

Level 1: AI Autocomplete or “Fast typing with a brain”

This level really took off a few years ago, perhaps most notably with GitHub Copilot (which I still highly recommend!). It feels like having a junior developer typing alongside you. These tools offer much more context-aware suggestions, generating entire lines or even functions based on the code you’ve already written and the comments you provide. This brought more context-aware code completion – essentially “fast typing with a brain.”

If you’re not using any of these today, you absolutely should try them out. Most have a free tier available, so you can see the difference in your workflow yourself. It’s a significant step up from basic IDE completion.

Level 2: AI Pair Programmer in Action or “You prompt, it builds”

This is the level that really changes the game. Instead of just completing lines, the AI acts like a pair programmer. You describe what you want to achieve in natural language, and it generates significant code blocks, understands your existing code structure, and helps solve more complex problems. This shift means we spend less time on repetitive coding and more time on architecture, problem-solving, and reviewing the AI’s work.

Based on my exploration, here’s a quick comparison of some key players in this space:

The major advantage here is speed in tackling tasks that might require looking up documentation or remembering specific patterns. The AI often has this knowledge built-in or can quickly access it.

To illustrate this, I tackled a common UI bug during my session: a dropdown component whose popup was getting clipped by a parent container with overflow: hidden. This CSS rule clips any content that extends outside the container, including the dropdown, even if it’s positioned absolutely or fixed. The standard, widely accepted way to fix this in React is to render the dropdown using ReactDOM.createPortal. Portals allow you to render a component into a different part of the DOM tree, outside of its parent component’s hierarchy, effectively avoiding the overflow clipping issue.

Here’s how you would typically fix this bug manually:

1. Identify the Problem: You’d visually see the dropdown being clipped.
2. Diagnose the Cause: You’d inspect the elements to see the overflow: hidden; style on the parent container and confirm the dropdown’s positioning is relative to the parent, not the viewport or document body.
3. Recall/Research the Solution: You’d remember (or look up the documentation for) ReactDOM.createPortal as the standard approach for this type of DOM issue in React.
4. Implement the Fix: You’d wrap the dropdown content in createPortal, calculate its dynamic position relative to the trigger element (the button), and ensure it handles scrolling and window resizing correctly. I’d also need to ensure clicks outside the dropdown close it.
5. Test: Run the application to verify the fix and check for any side effects.

This process, while standard for experienced React developers, still involves multiple steps, context switching (IDE to browser inspection, potentially to documentation), and careful manual implementation.

Now, let’s see how the AI tools fared when I prompted them with the request: "Make Select use React portal to show the popup with items."

1. Gemini Code Assist: Integrated directly into the IDE, Gemini quickly grasped the need for createPortal and provided a comprehensive, integrated solution. Unfortunately, the current version lacks full integration with JetBrains IDEs, so you have to manually copy and paste the code from the assistant’s response into the editor. In VS Code, however, you can view a diff and review changes before accepting them.
2. GitHub Copilot: Similar to Gemini, Copilot in Edit mode understood the problem and proposed the Portal solution, outlining the steps and allowing me to review the code changes via a diff view in both JetBrains and VS Code. However, I found the diff view less intuitive in VS Code for complex changes compared to JetBrains. Unlike Gemini, Copilot allows you to select from multiple model providers, and its VS Code extension also supports adding custom providers using your own API key.
3. Augment Code: Augment Code, which uses its own model, also identified the clipping issue and suggested using React Portals. The workflow for reviewing changes involved a separate diff view within both IDEs, similar to Copilot’s approach. One important note: the free tier of Augment Code uses your code data for training its model, which may raise privacy concerns for some teams or projects.
4. AiderDesk: This tool operates as a standalone desktop application with connectors for various IDEs. While not integrated directly into your IDE, it connects via a plugin or extension. It successfully identified the problem and proposed a solution involving createPortal, showing the changes in its own diff view within the app. The response was fast, and the overall experience was clean. Unlike the previous tools, AiderDesk uses a pay-as-you-go model with your own API keys, rather than a subscription.

From the perspective of fixing this specific bug, all the Level 2 AI Pair Programmers tested successfully identified the standard solution (Portals) and provided correct code modifications. The differences lay mainly in the user experience - the clarity of the explanation, the workflow for reviewing and applying changes (integrated vs. external diff, direct code application vs. diff review), and the specific models/providers used.

This reinforced my view that these tools, while powerful code generators, require the developer to act as a “code reviewer” for the AI’s output. You need to understand what the AI is doing and why to ensure the changes are correct and fit your project’s architecture. Tools with good diff views are valuable here, making it easier to review the proposed changes and spot any potential issues quickly.

Level 3: AI Agent or “Your autonomous coding teammate”

This is the frontier where the AI becomes a truly autonomous teammate, capable of tackling tasks that might involve multiple steps, file modifications, testing, and self-correction based on results. You give it a high-level goal, and it orchestrates the necessary actions, potentially using multiple tools or models in an iterative feedback loop.

While Level 2 tools focus on generating code based on a specific prompt, Level 3 agents aim to complete tasks through iterative processes. Tools like Augment Code and GitHub Copilot are beginning to incorporate agent-like features, performing validation steps and automatically fixing errors they detect. Other tools, like Roo Code and Claude Code, are built from the ground up as agent interfaces, allowing you to interact with the AI to perform sequences of actions across your codebase. AiderDesk’s architecture, allowing integration with multiple models and operating as a separate application, also aligns with the concept of an AI agent capable of coordinating tasks.

1. GitHub Copilot: In its agent mode, it successfully found the files that needed to be updated, solved the problem, and validated its changes by checking for errors.
2. Augment Code: Its agent capabilities included analyzing the codebase, proposing multi-step modifications across files, running validation checks (like syntax checks), and iteratively refining its solution until errors were resolved.
3. Roo Code: A powerful VS Code extension that acts as an agent, using various models and capable of performing complex tasks involving reading/writing files and executing commands. Roo Code operates on a pay-as-you-go model, so it requires you to provide your own API key. As part of the proposed solution, it updated index.html and added a portal root div to which the Portal was mounted.
4. Claude Code: Operating purely in the terminal, Claude Code provided a highly detailed, step-by-step breakdown of the solution, demonstrating strong reasoning capabilities before presenting the code changes via a terminal diff. This tool runs entirely in the terminal, independent of any IDE interface. Claude’s strength was its verbose and clear explanation. It thoroughly described the problem and the reasoning behind using Portals, breaking down the technical details in an easy-to-understand way. It showed the code changes directly in the terminal using diff formatting. Claude Code also requires an Anthropic account and incurs additional pay-as-you-go costs.
5. Windsurf: Windsurf is a full IDE distribution based on VS Code, with a plugin also available for JetBrains. It aims to provide a full-featured, AI-powered development environment with agent capabilities, supporting multiple models. During testing, it successfully identified the files that needed to be updated and proposed the correct solution. Diffs were presented as chunks, allowing the user to accept only part of the solution if something was not completely correct.

Conclusion:

The landscape of AI coding tools is rapidly evolving. Level 1 and 2 tools are already powerful assistants that can significantly speed up your work, particularly on common patterns and standard bug fixes. The Level 2 tools, like Gemini, Copilot, Augment, and AiderDesk, offer different user experiences and model integrations, allowing you to choose what fits your workflow and needs best.

Level 3 AI Agents, as seen in tools like Augment Code and Roo Code, and embodying the multi-model approach like AiderDesk, represent the next leap, capable of more autonomous problem-solving. While they still require developer oversight to review and guide, their ability to iterate and self-correct on complex tasks is incredibly promising.

Choosing the right tool depends on your needs: your preferred IDE, privacy requirements (cloud-based vs. local processing), budget (free tiers, subscriptions, pay-as-you-go), and the specific types of tasks you want the AI to handle. The important takeaway is to start exploring these tools now, understand their capabilities and limitations, and integrate them into your workflow. Investing in your skills with these AI assistants is a key step in staying ahead in our ever-changing field. By understanding the different levels of assistance and exploring the available options, we can leverage these AI teammates to become significantly more productive and effective developers.