Deep Dive - Claude AI as a Pair Programmer

Let's solve the problem first

In this scenario, let's assume you need to build a shopping cart module that needs to live in your codebase in isolation but receive events when new items are added to the shopping cart. Our codebase in this case is a React/NextJS application.

The critical parts of the criteria are the isolation and modularity - this needs to be able to live anywhere in your codebase but respond to things happening in it. As a junior, you may not know exactly how to solve this yet, but someone in your team mentioned using Context Providers to handle the event triggers and listening.

Claude, I need to use context providers to manage adding items to my shopping cart, as the components included in different areas of my codebase, can you show me an example of how I can write a context provider to send and listen to state/event updates

This type of prompt gives you a nice initial foundation to base your solution on. Do not simply copy and paste or ask for the AI to apply this for you. Instead, begin implementing it yourself, using the example code as a basis.

This will verify that you understand the implementation locations and specifics. If things go wrong, you can begin to see why - was it your understanding? Was Cursor wrong? You can begin comparing and debugging yourself.

Gather insights on your code

In the previous example, we used Cursor to help guide us and introduce us to a specific pattern commonly used in React and NextJS. We implemented it manually and worked through the process to complete the feature.

Now we can go one step further before submitting the code for review by asking Claude to suggest potential improvements:

Claude, is there any optimizations or a better approach I could've made to make this shopping cart functionality work in the frontend

The response will likely mention things like: Context Splitting, Memoization, localStorage persistence, SSR compatibility and probably more.

This becomes interesting, as a senior developer I can better see the value in context splitting and SSR compatibility but am less inclined to use localStorage or Memoization since the account object stores the shopping cart (database) and the shopping cart doesn't update often enough for Memo to provide meaningful performance benefits.

As a Junior Developer, you might not know the impact and may implement all suggestions. This would be an excellent time to ask someone in your team for a quick review of the suggestions and current code. They can explain what's actually applicable in this case as you begin manually refactoring your code to support the worthwhile optimizations.

Create the Merge Request

At this stage, we've used Cursor to help us learn a new approach, optimize that approach, and engage in valuable discussions with the team about micro-optimizations and over-optimizations.

Assuming your organization uses linting tools and pre-commit hooks to ensure code consistency in your codebase. If you're not using those types of tools, you can ask Claude to lint your project based on the surrounding codebase.

HOWEVER - I'd advise doing this as a separate commit, so you can distinguish your changes from Claude's linting changes, making it easier to revert if needed. This separation allows you to maintain clear visibility of your actual changes versus automated formatting changes.

Working with Templates

At this level, Cursor can help us with much of the mundane work. Using the same scenario above, we can write more extensive prompts because we already know the type of code we want to create.

Claude, please write for me a context provider similar to #account-context.js but in this case it will be a shopping cart, that stores the information in the account context using UpdateAccount() method, we need the typical features of adding, removing, incrementing etc items in our cart, link back to the shop item detail page etc etc

This will generate a template based on existing solutions, with the optimizations we're looking for already included.

The Impact of Technology Popularity

Through my experience, I've found that the quality of AI assistance varies significantly based on the technology's popularity and documentation. This variance is understandable - LLMs can only be as good as their training data, and less-adopted technologies naturally have fewer examples to learn from.

Let me illustrate this with three real-world examples from the same project:

• Warcraft Logs: As a niche service with limited documentation, working with this API proved challenging. Cursor struggled to provide meaningful templates or solutions, requiring extensive manual effort and multiple iterations to determine the correct query structures.

• Prismic: Despite being more widely adopted and having better documentation, the AI's suggestions for Prismic integration were still suboptimal. However, the results were noticeably better than with Warcraft Logs, showing how increased adoption improves AI assistance.

• WordPress: Here's where AI truly shined. With WordPress's extensive documentation, numerous repositories, and widespread usage, the quality of suggestions and generated code was significantly higher. Queries and prompts consistently produced more accurate and useful results.

This pattern emerged while building the same project, where I implemented both Prismic and WordPress solutions using Warcraft Logs as the data source. The contrast in AI assistance quality was striking, directly correlating with each technology's adoption rate and documentation availability.

Business Logic Considerations

This also applies to your business logic - your data format and workflow may be similar but different enough to cause more noise, overreach and issues unless you scope down your requests to specifics and make smaller iterative changes.

Alternative Tools and Approaches

The simplest approach is avoiding editors or extensions like Cursor, preventing any bugs, technical errors or user errors from sending your code to the cloud.

If using these tools, try to ensure you have a company-managed account where you can delete and remove data. However, this still requires trusting the service and its reliability with your indexed code.

Claude.ai on the web offers a nice solution, letting you provide prompts, example code and context while maintaining full control over what's sent for processing.

Data Anonymization

Think in 'relatable' terms when interacting with AIs.

For example, when building tax software or something for local energy transition initiatives - political and sensitive topics where information leaks could cause public concern - approach it carefully.

For energy transition work, write context-aware but not data-aware prompts: I need a function that will take the gigawatt hours being produced and transform it into this format: XYZ, but also in ABC and EFG based on props. This gives you what you need without exposing specific data or values.

In an alternative case, you may think of passing it an actual API response with actual values, but this could contain sensitive information about energy usage in specific areas or by specific customers.

Beyond Time Savings

Interestingly, using Cursor doesn't always result in direct time savings. However, its real value lies in streamlining the development process and providing structured starting points that can improve decision-making down the line.

The benefit isn't necessarily in writing code faster, but in reducing cognitive load and maintaining better mental clarity throughout the development process. This allows developers to focus their energy on critical thinking and problem-solving rather than routine implementation details.

The Myth of AI Replacement

While there are compelling stories about entire SaaS solutions being built purely with AI assistance, we need to approach these claims with careful consideration. Yes, AI might be capable of generating MVP-level applications or templates, but this raises important questions about code quality and long-term maintainability.

Consider these key concerns:

• How well does the developer understand the generated codebase?
• What happens when things break or external dependencies change?
• Who maintains and debugs this code in the future?

It's similar to construction: using cheaper materials might seem cost-effective initially, but there's usually a good reason why certain standards exist. The same principle applies to software development - a solution generated entirely by AI might work today, but could become a maintenance nightmare tomorrow.

The true cost of an AI-generated solution often reveals itself over time. While it might seem faster and cheaper initially, the lack of deep understanding and potential quality issues could lead to significantly higher costs in the long run. Just as in construction, cutting corners in software development rarely pays off.