What humans and Github Co-Pilot have in common

I’ve spoken to a number of Blazor developers over the last few months who are trying to figure out where, and how AI fits into their workflow.

I know, I know, AI is a divisive subject.

Depending on where you stand it’s either an amazing productivity tool, or an existential threat to our entire industry.

(and, quite possibly, both)

My current view is:

1. I can’t pretend it doesn’t exist
2. It’s important to know what it can, and can’t do (and how to get the most out of it)

In that spirit, I decided to give agent mode for GitHub Co-Pilot a spin.

In Agent mode Co-Pilot can read and change multiple files, and call other tools (for example to check for errors in your project).

As an experiment I asked it to create a Blazor product details page.

And guess what? It did exactly what a lot of humans (myself included) would do…

It created a product details page with all the markup in one giant ‘page’ component.

I’m actually a big fan of starting with the markup in one place.

It makes it much easier to quickly iterate a V1 of a UI.

But then it’s important to take a moment to refactor (otherwise we’re left with a page that’s doing too much, and has too many reasons to change).

Which brings us to an interesting ‘habit’ of Co-pilot.

It likes to leave comments, to describe the code its generated.

Like this:

<!-- Product Image and Title -->
<div>
    <img src="@Product.ImageUrl" alt="Product Image" />
    <div>
        <h2>@Product.Name</h2>
        <p><strong>Category:</strong> @Product.Category</p>
        <p><strong>SKU:</strong> @Product.SKU</p>
        <p><strong>In Stock:</strong> @Product.Stock</p>
    </div>
</div>

<!-- Product Description -->
<section>
    <h3>Description</h3>
    <p>@Product.Description</p>
</section>

Which is kind of interesting, because these are essentially comments being used as a way to divide the UI up into smaller pieces.

But each of these different ‘blocks’ of UI could just as easily be a component.

Cue my next prompt:

Please refactor the UI to smaller components, ensuring each component has a single responsibility where possible.

(I feel like you should always be polite to AI, you never know when that might be important down the road 😅)

Co-pilot took me literally…

<h1>Product Details</h1>

<ProductImageAndTitle Product="Product" />
<ProductDescription Description="Product.Description" />
<ProductPricingAndOrder Product="Product" />
<ProductReviews Reviews="Reviews" />
<RelatedProducts Products="RelatedProducts" />

Now personally I think this is a little too granular.

I would have probably gone for a single ProductDetails component that showed the basic details like image, title and description.

But components for pricing (including checkout), reviews, and related products makes sense.

Think like a human#

As AI continues to evolve, something interesting is emerging.

The indicators of good quality code (separation of concerns, low coupling and high cohesion) apply equally in a world where AI is generating code.

Give AI a small component and a small change, and it will get it right most of the time.

Give it a giant component, and fuzzy requirements, and it will out-human most of us in its ability to screw the code up, royally.

So in this brave new era, remember to keep an eye on quality.

Good code is good code, whoever, or whatever is writing and reading it.

— Jon

P.S. Connect with other developers navigating building and marketing apps in this era of AI, in Dev Builders Club