Prototyping Web Apps with AI: Pair Programming with a Robot Friend

See a real experience using ChatGPT to help prototype a web application and get some developer advice on how to use it well.

AI isn’t here to replace developers—it’s here to collaborate with us. In this post, I’m going to show you what it actually looks like to prototype a web app alongside ChatGPT, from spinning up a fresh Angular project to debugging those maddening errors … complete with a little unexpected emotional support.

I’ll walk you through two main workflows I’ve found helpful:

• You hold the code, Chat helps you think.
• Chat holds the code, you steer the vision.

Both have strengths, both have gotchas. You’ll see real examples of how to guide ChatGPT with better prompts, how it struggles with memory (bless its heart), and why clean, semantic markup still takes a human touch. But most importantly, you’ll see how this tool can spark momentum, help you work through roadblocks faster and maybe even talk to you like a kind coworker who actually read the docs.

So if you’re curious what it feels like to build with AI instead of just asking it questions, come along—I’ll show you how I prototype dashboards, fix bugs and even argue a little with ChatGPT as we build something together.

But First—Because I Know You’re Busy (And So Am I)—Here’s the Quick Hit List

These are the main takeaways I’ve learned while prototyping with AI, especially in the early phases of building out web apps. Think of this as your TL;DR before we dive deeper into the real-world examples.

Point 1: It is a collaboration, not a handoff.

The better your inputs, the more fully fleshed out your thought process, the more you know what you are doing, the better it will be able to assist you to the highest quality. Your prompts matter. Your level of coding knowledge matters. This is very much a tool for a craftsperson to use, not a replacement for the craftsperson. (So stop panicking, dev in the back, and don’t get too excited, marketing person in the front row.)

Point 2: It needs better state management for the working code.

As I’ll go into in point 4, it doesn’t have amazing recall of past changes made, especially much later after those changes were made. I think some sort of change log commit system would be stellar and help keep both human and AI on track with decisions made in the fluctuating code base.

Point 3: It needs to generate cleaner more semantic markup and more elegant logic.

As of right now, Chat just doesn’t generate the cleanest code. But I’ve noticed this improving. Perhaps once you work with it enough, chat will pick up on your better habits … similar to adopting your tone when aiding in article writing?

Point 4: There are two main work flow options.

There are probably more, but there are two ways I’ve found when prototyping applications with the help of ChatGPT. The first is to have Chat manage the code and you give it instructions. This is great, up to a certain point. It’s so powerful to see in real time your ideas come to life in the browser faster than you could possibly code it yourself. Is it the most elegant code? No. Does it work? Yes. This is where the craft part comes in. This is where the developer should take over and refine.

The other way of prototyping is more modular. You work on bits and pieces together and then you, the developer, plug those into the greater whole where they fit.

So which do you choose? Well, it depends what you are building. Is it part of an existing app or an entirely new thing? How quickly do you need this out versus how refined do need it? Is the working code more important or is this going to just be used as a living, breathing wireframe to get the POC out the door?

I recommend doing the code in a separate document from that which you are collaborating in. Chat isn’t great at remembering a modification you made five iterations ago, so when you ask it to update that if statement, it might undo that change you made. So it is best to go at it in a separate space, untouched by AI for preservation of state and momentum in building your app.

However, I like to kick things off together with Chat at the wheel. Even if I don’t use any of the code it generates, it creates momentum and gets something, anything on the page right away—which allows my brain to more fully grasp the scope of what I am about to build, and better dissect the pieces of the process.

So, what does it really help with? What does working alongside it really feel like? Well, let’s prototype a dashboard together with ChatGPT’s help and I’ll show you.

Spinning Up A New Project: System Setup

Oftentimes, spinning up a new project can be the most daunting part. This is truly where AI shines. Whether it is a coding project or not, AI is extremely helpful in ramp-up. Here, you can see I had multiple questions, such as:

• How do I update the Angular CLI, again?
• What version of Node does Angular 19.2 require?
• How do I update Node again?

You can see in the screenshots of my conversation, that Chat helped me quickly get those CLI commands and get my system ready to create a new Angular app.

Now normally, these kind of questions would take me a bit to get through on my own. Not because they are super difficult, but because in Googling for the answers on various different sites, I would inevitably get side-tracked on other tasks or rabbit holes.

Besides avoiding distractions, ChatGPT is just much faster at parsing the internet and finding the snippets I need. It’s using a computer for what a computer does best—sorting through data.

Generating the New Angular App

Next, I needed to generate a new Angular application. I remembered this command, so didn’t ask Chat, but proceeded to just do it:

However, I was fuzzy on routes. With everything that has changed in the last few versions of Angular, I wanted to know if there was a schematic to say “generate a component along with its route.” So, I checked with Chat:

And here is where Point #1 comes in. As an Angular developer, I don’t waste any time. I know immediately this ain’t it. Modules are yesterday’s news. So I let Chat know:

This is exactly what I was hunting for. It tells me: 1) there is no flag or anything to generate the route for you, and 2) I need to use the route syntax to create the paths. So I go over to my code and do so:

I do, however, make sure to correct ChatGPT about the generation line it gave me. I want it to be as smart as possible in future projects (or just down the line in this project), so I find it worth correcting.

ChatGPT reminds me of the steps for generating a standalone component and defining its route.

Me: Awesome, I will do that soon. (I didn’t, I totally forgot and had to do it near the end. 🤪) I just generated a dashboard and card component as well as activated my kendo ui license. What npm package do I need to install to get the kendo ui card component? I can never remember? Is it layout?

ChatGPT: ​Yes, to use the Kendo UI Card component in your Angular application, you’ll need to install the @progress/kendo-angular-layout package, as it includes the Card component along with other layout components. ​Telerik.com

You can add the package to your project using the Angular CLI’s ng add command, which handles the installation and configuration automatically:​

ng add @progress/kendo-angular-layout

I would like to point out that the blog post it pointed to with the answer to my question, was in fact, written by me. This is not the first time I have searched online, only to have myself answer. 🤦‍♀️

Me: amazing, how do I include the card component into my app?

ChatGPT: To include the Kendo UI Card component in your Angular app, follow these steps:

1️⃣ Import the Kendo UI Card Module

Since you’re using Angular 19 with standalone components, you do not need to import an NgModule. Instead, import the component directly into your standalone component. Example:

import { Component } from '@angular/core';
import { CardModule } from '@progress/kendo-angular-layout';
@Component({
selector: 'app-dashboard',
standalone: true,
imports: [CardModule], // ✅ Import Kendo UI CardModule
templateUrl: './dashboard.component.html',
})
export class DashboardComponent {}

Me: That sounds good but I don’t want to import modules. Do they have an updated way to import their components without modules?

Once again, notice I needed to course correct our trajectory.

ChatGPT: Yes, Kendo UI for Angular has embraced Angular’s standalone components feature, allowing you to use their components without importing traditional NgModules. This approach simplifies integration and aligns with Angular’s modular architecture.​

To integrate the Kendo UI Card component as a standalone component:

1. Install the Kendo UI Layout Package: Ensure you have the Kendo UI Layout package installed, as it contains the Card component.

   npm install --save @progress/kendo-angular-layout

2. Import the Card Component Directly: In your standalone component, import the KENDO_CARD utility array, which includes all necessary directives and components for the Card.

import { Component } from '@angular/core';
import { KENDO_CARD } from '@progress/kendo-angular-layout';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [KENDO_CARD],
  templateUrl: './dashboard.component.html',
})
export class DashboardComponent {}

This method allows you to utilize the Card component without the need for NgModules.

3. Use the Card Component in Your Template: In your component’s template (dashboard.component.html), you can now use the Kendo UI Card component as follows:

<kendo-card>
  <kendo-card-header>
    <kendo-card-title>My Dashboard Card</kendo-card-title>
    <kendo-card-subtitle>Overview of statistics</kendo-card-subtitle>
  </kendo-card-header>
  <kendo-card-body>
    <p>This is the body of the card. You can include charts, text, or any other content here.</p>
  </kendo-card-body>
  <kendo-card-actions>
    <button kendoButton>View More</button>
  </kendo-card-actions>
</kendo-card>

By following these steps, you can effectively integrate the Kendo UI Card component into your Angular application using standalone components, streamlining your development process and reducing reliance on NgModules.​

For more detailed information, refer to the Kendo UI for Angular Layout Dependencies and Standalone Utilities documentation.

So I go ahead and install and implement the Kendo UI Card in my pony card component, but I make sure to not import modules, and instead use the newer arrays that Progress Kendo UI provides.

Debugging with Emotional Support

Later, when I was trying to test out my routes, for the life of me I could not get my dashboard component to show up on load at the root of the app. I opened up the console to see this humdinger (which many of you might be accustomed to):

main.ts:7 ERROR NullInjectorError: R3InjectorError(Environment Injector)[_PonyService -> _HttpClient -> HttpHandler -> HttpHandler]: NullInjectorError: No provider for HttpHandler!

Instead of Googling the error, I just gave it to Chat, who was already open and waiting. Within seconds, it told me what I had been doing wrong:

Check out the tone of this back-and-forth it has with me after I fix the bug:

It’s might sound silly, but this tone, this additional … emotional support, is what has me coming back to Chat time and time again, when I could easily use a search engine. It’s more than a list of links that might have the answer I need. It’s a friend that has all the knowledge and history of our past conversations, guiding it to help me and speak to me in the voice I most easily resonate with.

Chat and I go back and forth like this to flesh out the rest of the demo app I created for an Angular Air episode exploring the new HttpResource API in Angular 19.2.

However, I wanted to show you the other way of working with Chat that is supremely powerful and, if your prototype is concise enough, would work even better than what I just demonstrated.

Pairing with ChatGPT Option 2: Letting Chat Hold the Code

It’s important to note what model I used. Although model o1 says it’s better at coding, 4o is the one that offers this pair coding option.

I prompted Chat with these to get my prototype rolling:

Me: Can you help me create a quick wireframe for UI design?

ChatGPT: Absolutely! I can help you sketch out a wireframe. Just tell me a bit about what you’re designing:

1. What is the app/page for? (e.g. dashboard, landing page, profile screen)
2. What core features or sections need to be included? (e.g. navbar, search bar, cards, charts, sidebar)
3. Do you want mobile, desktop, or both layouts?
4. Any specific vibe or style? (e.g. clean/minimal, colorful, corporate)

Once I have that info, I can generate a wireframe for you!

Me: I have an admin page for managing a users features. The options are to turn each feature on/off. Let’s say “UN Feature” (assigned access from the people team) and the “Print Feature” as well as any other features you can think of to mock up.

Now, the hierarchy of data is correct, but visually, it still isn’t nested under the “Beta Features category.” Let’s try again:

It still really wasn’t creating a visual difference for me, so I decided to reach for a UI library, sooner than I thought I would need to for such a simple mock up request.

So, I next asked Chat:

Me: Can you use Kendo UI cards for each feature, please?

Now, at last, there was a visual difference between each feature, but let’s make it look better, shall we? I, perhaps, was a bit ambitious with this next ask, but what on earth is all this computer power for, if not ambition?

Me: Awesome, thanks! Here are a list of changes I’d like made to the UI:

• move download reports out of the beta features section
• give the feature cards a max-width of like 350px
• put the feature cards in flex rows that wrap
• ensure the feature titles are inside kendo-card-headers (or whatever that element needs to be per their api)
• move the checkbox into the same header as the feature titles

When asking it to do these tasks, it did add classes here and there to make the changes, but they weren’t enough. So, as a dev, I of course was itching to just go make the changes to the code myself.

However, once you do this, you are fully back on the first way of doing things—where you are responsible for holding the code somewhere and keeping the version up to date as you work. If I made a change inline the code (which I can do, it is editable) I would see the change right away. But the very next task I have Chat do, it will wipe that change, since it has no knowledge of it. You went rogue while it wasn’t watching. If you don’t talk about it in the chat, Chat doesn’t know about it.

So, in order to prepare to take over fully, I had Chat update the code to actually use Angular v19 features, which took a bit of coaxing, I’ll admit. You can watch that play out here, if you like:

Once I had the demo app in a framework I was comfortable writing, I copied it over to a local project and finished out the styles. When I needed Chat, I asked for pointers, but I was driving from then on.

You can do powerful things in this mode, where Chat holds the code. And you can do them quickly too, if you don’t care what it is writing in or what the code looks like. It’s prototyping after all, not pair coding.

Once you are ready to pair code, I’d move the code out of Chat. Because letting Chat code while you tweak to death feels slow. Since it goes line by line for updates with each and every ask, it can be a bit sluggish. The previous method was more bite-sized and therefore quicker.

Wrapping Up: Build with It 🦾

Prototyping with AI isn’t about handing over your vision—it’s about accelerating it. Whether you’re using ChatGPT to spin up boilerplate, unblock yourself mid-debug or just get past the dread of the blank file, it’s a tool that meets you where you are … and occasionally tells you you’re doing great while you curse at your console.

The key is knowing when to let it take the wheel and when to grab it back. Let Chat hold the code when you need a fast scaffold or visual mockup. Take over when it’s time to refine, clean up or do anything stateful and nuanced. Use it to start. Use it to unblock. Use it to brainstorm.

But most of all—use it with your brain, not instead of it.

This was just one way I’ve found to collaborate with AI as a developer. I’d love to hear yours. How are you pairing with these tools? What’s working? What’s not? Let’s compare notes. Just remember: AI can help you build fast—but only you can build well. And what you can’t build well, buy. 😉