Using a Coding Agent

[00:00:00]
>> Sabrina Goldfarb: OK, now let's get back to our standard prompt, because I want to actually implement this prompt, right? So my standard prompt is going to be like this, and again we can find this in the course catalog. So if you pull up that and need to find the prompt, I will be editing it slightly because I want to just mention Live Server at the end of it, and I also want it to be in light mode for today to make it easier for you all to see.

[00:00:29]
But you're welcome to dark mode, light mode, whatever you may want, right? So for me, I'm going to say create a Prompt Library application that lets users save and delete prompts. Also, if you need to add a new line, Shift-Return adds a new line. Users should be able to—and then I'm actually just going to copy the rest, but I will read it out loud to you as well. OK, users should be able to enter a title and content for their prompt, save it to local storage, see all their saved prompts displayed on the page, and delete prompts they no longer need.

[00:01:16]
Make it look clean and professional in light mode—again, use whatever mode you want—with HTML, CSS, and JavaScript. And then, because I'm using VS Code and I want to use the Live Server extension, I want to be able to use Live Server to press Go Live and see the application. I will give you all just another quick second to take a look at that, and then I will send my prompt. OK, I'm going to send the prompt because it's going to think for a minute and I will keep this up so you all can still see it, in case anyone isn't copying and pasting and just wants to type it in.

[00:01:57]
But we can see slowly that we see our AI assistant and Copilot actually talking back to us a little bit. Gathering current workspace state before adding new application files, OK? And it's reading the files in here. I'm just going to scroll down the tiniest bit. OK, so I'm going to scroll down just to this so we can see it. Reading current readme to integrate new instructions without overwriting unrelated content.

[00:02:20]
Great. So we can see that GPT-4.5 is working in the background, right? And this will take a few seconds because it's trying to add a bunch of code, and now we can see something popped up, right? We see index.html and this beautiful green popped up, and I'll get rid of my terminal so we can see it. We're not going to be focusing again on the code today just because it would take a long time to get through, but we can just kind of see in the meantime that we have a title of Prompt Library.

[00:02:51]
We have an H1 of Prompt Library, we have a paragraph tag that says save, review, and refine your prompt engineering snippets. OK, add a prompt title, a short searchable name. OK, so we're seeing a lot of stuff actually, and we're going to talk about this in just a moment. But now that I've given everyone a moment to catch up on their thing, let's see what it says. OK, so created the required HTML, CSS, and JavaScript files, then updating the readme.

[00:03:19]
So we can see that it's still updating and I actually am unable to click this Keep button until it has finished, right? So we can see that Copilot then gives me a summary of what it has done. And same thing if you're using like Claude Chat or Claude Code, they're just going to give you a summary. So built a self-contained Prompt Library web app with index.html, style.css, and script.js plus update of the readme.

[00:03:46]
What you can do now: click Go Live, right-click and choose Open, add prompts, search, copy, delete, and export. Wait a minute, we didn't say export, right? Don't worry, this was intended, right? This is why we're talking about the standard prompt. The standard prompt is good, but the standard prompt is not great. So let's keep all of the suggestions that it made. I'm just literally pressing Keep through index.html, script.js, and styles.css.

[00:04:16]
All I did was press Keep, Keep, and Keep, right? And in my readme as well. So now let's do the dreaded Go Live and see what happens when we open up our localhost. So I'll go back over here and say localhost 5500. All right, at least we got—OK, looks like it generated a prompt, but there we go. OK, at least we have light mode, right? We have a Prompt Library, and it says add a prompt title with a short searchable name.

[00:04:48]
That's pretty cool. And we have a prompt section where we can write our structured instruction. You can include variables, that's kind of cool. OK. But over here we have a search bar we didn't ask for, and over here we have an export button we didn't ask for, but whatever. Let's just for now type something in and just see what happens to make sure it works, right? So I'll put sample and sample, hmm, and I can't actually even save my prompt, right?

[00:05:17]
So we can see from this that standard prompts are OK, but we want to go more. We want to have better, right? We deserve better than this as developers because we could build this ourselves without the extra stuff, without the bugs, right? All we wanted was save and delete. So what I'm going to do with the standard prompt, I'm sorry to do this to you Copilot, but I'm actually going to revert all of these changes, and we're going to talk about a different prompting technique, and we will use that to scaffold our project again.

[00:05:52]
So yes, we are chucking all of these changes in the trash. I'm sorry. I'm sorry we wasted a prompt, but we just had to see why the standard prompt isn't going to suffice all the time. Now, something you'll notice here, just a little Copilot tidbit in case you don't know about it. If you click this Restore to Last Checkpoint, then everything up to your most recent prompt will go away. So when I click this, it's going to undo all of these changes for me.

[00:06:21]
I just think that's a really cool little Copilot thing. If I were to type in another thing, then I would see below that, like, checkpoint, and then you can just restore to your last checkpoint. So I am getting rid of all of this stuff. Goodbye, and you can see that it reopens your prompt because it's like, obviously something went wrong, right? So obviously you might want to just edit your prompt.

[00:06:45]
We want to delete our prompt. I'm actually going to start an entirely new chat after I get rid of all of this. I'm not going to save any of these files. I don't want them. We were just using this to kind of see what we had to do. OK. Do you want to keep pending edits? Undo and continue. OK, great. So now we're back, we can see in our VS Code, we are totally back to just a readme with just a sentence in it.