In the constantly changing software development landscape, the use of AI tools is a game-changer. Sahaj’s team was tasked to port an Angular codebase to React in an efficient manner without sacrificing quality. While migrating this, we strive to leverage generative AI tools to accelerate the development process and reduce manual effort, which will assist in streamlining tasks and increasing efficiency and productivity during this. We tried out a few options like GitHub Copilot and Bolt, we landed on Cursor GenAI Tool.

Why Cursor GenAI Tool?

  1. Comprehensive Codebase Understanding & Onboarding

    • Cursor AI provides deep insights into the project’s architecture, manages dependencies, and assists in onboarding new developers by explaining code components and their interactions.

  2. Automation of Best Practices & Code Reviews

    • Unlike other tools, Cursor AI enforces standardized coding conventions by leveraging web documentation, ensuring high-quality, consistent code and improving overall review efficiency.

  3. Customization & Interactive Development

    • Cursor allows developers to define custom coding rules and templates, tailoring AI-generated code to match project-specific requirements, which many generic AI coding tools lack. 

Unlike other AI tools that just help with code completion, Cursor actually acted more like a team member. The biggest game-changer was its ability to understand our entire codebase architecture. If we asked where the login function was, it wouldn’t just point to a file – it would explain how that piece fit into the broader system.

The Approach

We actually tried two different approaches. First, we used what we called ‘interactive code generation’ – basically having a conversation with Cursor while coding. It was great for generating well-structured Next.js code with proper TypeScript types checks, Unit and E2E (End to End) test cases, and feature and technical documentation. But we found we were still spending a lot of time going back and forth with the tool.

Then, we tried our second approach – ‘visual code generation.’ We took a screenshot of the user interface we wanted to implement, created detailed prompts about the requirements with this pattern(Context, Task definition, Design requirements, Functional requirements, Constraints, Expected output), and let Cursor generate the code based on that. It was like giving it a complete blueprint instead of having a conversation. This reduced the back-and-forth significantly, though we did notice it sometimes struggled with exact styling matches.

Coding Standards

We used the Claude 3.5 Sonnet model in Cursor, and by setting Cursor rules, it adapted to our coding standards and TypeScript best practices. This allowed it to generate code in a consistent style, closely matching our specified guidelines. It even created documentation for both the technical implementation and feature specifications.

Reduces Knowledge Transfer Overhead

While Cursor AI didn’t completely replace human knowledge transfer, it became our first point of contact. When new developers asked questions, they asked Cursor first and got a solid foundational understanding. Even though for a deeper domain-specific knowledge, they needed to talk to the team, but those conversations became much more focused and productive.

The Future Versions

We’re actually exploring something even more interesting now – using multiple AI agents in parallel. Currently, we’re using Claude 3.5, but there’s flexibility to switch between different models like GPT-4 and deepseek, Claude 3.7, and Claude 3.7 thinking. The key advantage over tools like Copilot is that Cursor maintains context of the entire application, not just individual files. It’s really changing how we think about AI assistance in development.

Overall, we feel it’s not about replacing developers but augmenting our capabilities. It’s like having a really knowledgeable junior developer who never sleeps and can prototype ideas incredibly fast! 

Key Takeaways

Here are the key takeaways from the Cursor AI experiment in the Migration to React project:

  • Codebase understanding and onboarding

    • Cursor AI helps developers grasp the entire codebase structure, manage dependencies, and understand architectural decisions.

    • It accelerates onboarding by providing contextual explanations of components and their data interactions.

  • Code review and best practices enforcement

    • The tool ensures adherence to coding best practices by leveraging web documentation as context.

    • It provides valuable insights during code reviews, improving overall quality and consistency.

  • Interactive and visual code generation approach

    • Interactive code generation allows real-time collaboration, resulting in well-structured, type-safe code with reusable components.

    • Visual code generation supports UI-based development with screenshot-based prompts but struggles with automatic theming and styling.

  • Customization and documentation support

    • Cursor AI allows the creation of custom coding rules and templates, enabling developers to enforce project-specific styles and best practices.

    • It also facilitates project documentation by indexing the entire codebase and generating relevant explanations.

  • Delivery Time Optimization

    • The project has achieved a significant reduction in estimated delivery time, with a streamlined approach resulting in a performance improvement of over 40% for the planned project scope.

  • Challenges and limitations

    • Generated code, while efficient, often has compilation errors requiring manual fixes (~30%).

  • Styling and test modifications remain problematic, necessitating significant manual adjustments (30-40% for CSS).

Thanks to Priyank Gupta, Akshay Karle, and Veda Kanala for reviewing early drafts and providing detailed feedback.