How we’re using AI tools to ship updates faster

Summary

The TZ-SAM Solar Asset Explorer user interface was rebuilt from a resource-heavy tool into a responsive, interactive map application using AI tools like ChatGPT, Cursor, Mapbox Studio, and React

AI-led development enabled rapid implementation of features such as interactive solar farm polygons, reduced lag, and improved data visualization at all zoom levels.

Enhanced functionality now includes raw satellite imagery display, seamless Mapbox integration, and user-friendly interactivity, demonstrating the potential of AI-powered development for creating complex applications efficiently

In this article, I’m going to walk you through my experiences rebuilding a small but relatively complex frontend map application. By the end of the process, it went from a limited, resource-heavy tool, to a responsive, interactive frontend. I used Cursor, ChatGPT, Mapbox Studio, and React, with almost zero starting knowledge of JavaScript and React. I’ll share my general workflow for AI-led development as well as specific tips for building slick, map-based applications with minimal code.

If you want to follow along and build a map of your own, you’ll need:

• A Mapbox account. There’s a fairly hefty free tier and you don’t need to set up billing.
• Access to an AI coding assistant. I’m using Cursor — I can’t guarantee you’ll have the same experience with another tool but feel free to try!

Background: The TZ-SAM project and our map

At TransitionZero, we are building cutting-edge data and software products for energy, planning and investment. My team oversees the Solar Asset Mapper (TZ-SAM) dataset, an open-access, global collection of utility-scale solar farms detected with computer vision on satellite imagery. The dataset consists of over 94,000 solar farms, updated once per quarter. It’s useful for anyone modelling energy systems with high spatial granularity, or analysing solar power growth in close to real time. The dataset has already been cited by the Economist, the New York Times, and the Australian Broadcasting Corporation.

To allow users to visualise the data, we maintain a simple map UI. While we initially built this as a quick internal-use-only tool, it ended up in production pretty much as-is due to competing priorities. While it worked, it wasn’t exactly the smoothest experience — it was laggy, demanding on our database, and lacked interactive features. It also failed to show off the scale of the dataset at lower zoom levels, and caused some confusion with users due to the use of a high resolution satellite basemap, which had some significantly out of date regions.

Our UI before the AI-assisted rebuild

When we released the TZ-SAM’s Q2 2024 data update, which included significant model improvements it felt like the right time to rebuild the app and properly showcase our work.

Our main goals were to:

• Eliminate browser and tile server lag to improve user experience
• Add interactivity to the solar farm polygons
• Show off the scale of our data at low zoom levels
• Enable users to view a more recent image in places where our detections are more recent than the basemap

Here’s how I used AI to do this, fast.

My recipe for AI-led development

The recipe is pretty simple:

1. Use ChatGPT, Google and Perplexity to understand the problem and research possible approaches
2. Use Cursor to generate and edit code
3. Test, debug and iterate with Cursor assistance

Asking the right questions with ChatGPT

Modern LLMs like ChatGPT are incredibly useful for knowledge discovery in cases where you can’t formulate a question specifically enough to use plain web search effectively. In the past, this would generally lead to iterative, random walk Googling. Now, you can dump your stream-of-consciousness, half-baked question into ChatGPT or Perplexity, and invariably get useful answers. Since I didn’t have much front-end experience, ChatGPT filled in those gaps. It helped me identify frontend design principles, find resources, and even figure out terminology.

Open

Magical code generation with Cursor

Cursor (running Claude 3.5 Sonnet) took the reins when it came to the coding itself. With the Composer feature, I could describe what I wanted, and it would generate the code, integrate it into the right files, and even reference other components as needed. Here’s a look at how it went:

Open

With this prompt, Cursor generated a modal component with all the specified details displayed on click. I didn’t need to write any JavaScript or React to make this work.

Cursor is not the only AI coding assistant, so if you don’t want to pay for Cursor and already have a ChatGPT subscription, try Canvas.

Building the map: migration to Mapbox

With the help of ChatGPT, I understood that OpenLayers might have performance issues when rendering large amounts of vector data. It was also clear that our self-hosted vector tile server was not up to the task, with tiles often dropping out when scrolling through the old app. We could make all of these problems go away if we simply allowed Mapbox to do the heavy geospatial lifting for us.

Carrying geospatial data into Mapbox Studio

Map libraries like Leaflet, OpenLayers, and Mapbox GL allow you to render vector data (polygons and multipolygons in our case) directly from GeoJSON files. This is usually the simplest way to do things, but it requires your entire dataset to be loaded into RAM on the client's web browser. Above a few MB of data it is generally advised to switch to using a vector tile server. This is a server that allows the client to query for just the data in the portion of the map they are viewing, reducing the amount of memory and rendering required.

Our initial solution was to use a self-hosted tile server, tipg that connects directly to a cloud SQL database and renders the geometries stored there. This works, but it requires

1. A database
2. Some knowledge of how to deploy and secure a web service
3. Maintenance
4. Configuration

I'm sure we could have made tipg perform to the level we needed, but it would have taken a lot of development time. Instead, Mapbox makes the whole thing a breeze.

Mapbox's MTS product provides tools so that you can create tilesets from your data, while Mapbox Studio straps some of that functionality in a no-code UI. If you have a GeoJSON dataset that is too large to render directly, you just need to make a quick formatting change and upload it to Mapbox Studio. Mapbox tiles the dataset and allows you to access it in-studio to create a Style.

A Style is just a collection of map data layers that you can format and customise. You can select your custom tileset as well as a large number of preset layers like satellite imagery, roads, etc. Once the style is published, it is hosted in Mapbox and you can either embed it directly into a webpage or build on top of it with the Mapbox GL JavaScript library. You will need it to build our modal and any other extra interactive elements.

Plugging Mapbox GL into React

When it came to plugging the map data into a UI, we were not starting from zero: we already had a functioning React app in production from which we could start. If you are starting from scratch, do some research about which (if any) framework you want to use, and make use of existing examples and project creation tools to get started.

The map logic is stored in page.tsx, so we'll start working from there. Cursor will usually give suggestions if you should be making changes to other files.

Let's start with this:

Open

That's it. The bulk of the rewrite is done in one shot.

With that done, I could fiddle with other features like adding a pop up:

Open

Not everything is perfect in one shot — Cursor got some details wrong, and I had to pick up basic React skills to debug a couple of errors. But the process was 100x faster than how I would normally be muddling through in a completely new framework, i.e. read Stack Overflow, break things, repeat.

Key AI-Driven improvements in the new map app

The new map app has some major improvements, all largely possible thanks to AI-generated code:

1. Reduced Lag: Mapbox GL is far more optimized for the kind of data-intensive visuals we’re using.
2. Interactive Polygons: You can click on any solar farm polygon to get key details such as estimated capacity and construction date.
3. Sensible data when zoomed out: The new setup allows for proper rendering at both macro and micro views.
4. Raw Imagery Display: We’re now able to serve up the raw satellite imagery used by the model, which removes the confusion caused by outdated high-res basemaps.

Our UI after the rebuild

Why you should stop worrying and learn to love AI-led development

1. It empowers the inexperienced. Cursor enabled me to write code in a language I barely knew, and it felt like having a superpower. Enabling users with little coding experience to prototype applications enables shorter feedback loops in development. Designers are empowered to build out designs, and consumers of data are empowered to analyse it themselves.
2. It’s a powerful learning aid. I now know my way around React and Mapbox. The AI acts as a pair programmer and helps you to learn by doing.
3. It’s fast. Cursor handled complex tasks, like the Mapbox GL migration, in single prompts. It was a game-changer for rapidly deploying new features.
4. It’s time to get on the bandwagon: It’s reasonable to believe that AI-led development will become the norm. It’s a good idea to get ahead of the curve and understand how to work with these tools effectively and responsibly.

Why you should keep worrying

1. There are ethical concerns. I won’t cover these in detail but they include safety, copyright issues, and environmental and societal impact.
2. The bugs. The generated code isn’t always perfect. Sometimes elements would render in the wrong spot or behave unexpectedly, requiring a bit of manual intervention. Over-reliance on the AI may lead to missing serious bugs.
3. It can lead to ugly code. Without clear guidelines, AI-generated code can fail to adhere to style guidelines, use deprecated functionality or otherwise write poor-quality code.
4. It empowers the inexperienced. Lowering the barrier to entry to writing code might increase the number of employees with just enough knowledge to be dangerous — and increase the chance of people breaking things.

Aside from ethical concerns, this list has significant overlap with issues you’ll see when working with human developers, so many of the same mitigation strategies should work. Be vigilant about code review, do static analysis, test thoroughly, and deploy in stages.

Final thoughts

The process of using AI tools like ChatGPT and Cursor for building our solar map app has been surprisingly effective. I went from knowing nearly nothing about frontend development to deploying a slick prototype with multiple new features — all with minimal code written by hand.

You can read about our 2024 Q4 data release, and play with the new UI here.