Using the Virten Prompt Library To Focus On Adding or Removing An App Feature In A Complex Codebase

Using the Virten Prompt Library To Focus On Adding or Removing An App Feature In A Complex Codebase 00:00:02    Hello everyone, Terren here, founder of Virten.app and producer of the Virten prompt library. In this episode, I'm going to show you how to use a powerful prompt from the Virten library to deal in a complex code base. We'll be using bolt new. And what we'll be working on first is this. Uh I was middle of I was in the middle of testing and trying to implement a new feature that had to do with displaying graphics or SVG decorations on the Virten app. But uh it it kind of failed. I learned some things 00:00:43    but right now the implementation is in a state of failure. It needs to be redone. But first I have to remove it from the codebase. So anytime you want to remove a feature from the codebase, this would be how you do it. Of course, it's preferable if you had forked the codebase and could just roll it back or go back to your other fork. Uh however, in this case, this is going to be very informative for you on how to uh extract information from the codebase with the help of the AI and then use that information. So let's do that. 00:01:19    Okay, so we're here with the Vertton prompt library on the left. We're going to get rid of this bounding box, which was part of the testing. And in the settings window, we're going to get rid of the whole SVG feature set. And here's how we'll do it. We'll begin by building a context with the AI by having it do a stack trace for the SVG feature. The feature set is the SVG test container and SVG decoration system. That's what we've been calling it. So, we'll simply send that off to the AI, have it produce a detailed document 00:02:05    where it's going to search out all of the related components to this SVG feature that's going to build a context with between me and the AI so we're on the same level. We know what we're talking about when we send the next prompt. So, let's review that document that this sucker spitting out. It's gone through the whole codebase as it was instructed to by the stack trace order. It's detailing everywhere the SVG feature is involved, integrated, has a line of code in the code base. Now I'm going to give it the order to 00:02:59    remove the SVG feature. Here we'll tell it exactly which document to use. It's this and what folder it's in. It's that stack trace it just created. telling it exactly what we want. Remove the SVG decoration system and the test container. Just to make it more clear, I'm saying we are removing this feature the SVG feature entirely. And we need a clean production ready application following the removal of SVG related systems. Okay, so we give the instruction for what to do, what document to read for 00:04:18    the context, which is that stack trace report. Now I'm going into the combination prompts and we're going to call this an implementation. The implementation order has several features. If it takes more than one round for it to create the removal, the implementation order says, "Well, then tell me the user that you have more to do." Now, the bot is going to go through and clean up the SVG system, remove any dependencies that were exclusive to the SVG system from the configuration files. etc. etc. All right. So, it finished the 00:05:24    first round of this well of reverse implementation or it's the implementation of the removal order. It finished the first part. It says there's more to do and it gives me the message. Prompt continue for the next chunk. Let's send that off. We'll see the AI get back to work and go from there. Here the AI says it needs a third round to affect the implementation. So we prompt it continue again. All right, the AI completed the third or the phase three of the removal and it's asking again for uh another round to affect the 00:06:22    completion of the implementation. Let's see how it goes. All right. So, after four phases, the AI says, "Well, I'm done with the job." Now, in a perfect world, we did do this correctly. We told the AI exactly what it needed to do, and we said, "Faking do it, man." Our bot and it got to work. It announces that the implementation is complete according to the Virten prompt libraries instruction. Star key is in the air. Stars is in the air. In this case, SVGs are supposed to no longer be in the air. Now, I'm going to go through 00:07:09    my steps where I simply download the app or download the project files and update my GitHub. And that does not really need to be on the video. So, I'll be right back after a pause. What we're looking for here is this bounding this box to be removed. This was a test container box. And for the settings page to no longer have the SVG decorations, one thing is um well that's about it. So let's see how that goes. I'll perform the GitHub work real quick to update the project and push it to my host. I'm back for a moment before updating 00:07:51    the app and pushing it to production or my preview build. And this is a handy thing to do. Never forget to do this really once you do code modifications and you're trying to go test it. Go ahead and save yourself having to go back and forth about TypeScript errors by running this command npxtsc- no emomit. that runs a compiler on the inside of the web container to test if all the TypeScript checks out. In this case, our TypeScript checks out and I'm going to proceed to update the application. All right, so the 00:08:30    application built successfully at the host. We should now be able to refresh this screen here, which is my testing environment and which is sort of a production environment where I just kicked it off to the side. And um see if this decoration tab is removed. So that went well. See if the SVG container is removed. That's gone too. All right. So what did we see in this video? We saw how to you utilize the AI with the verten prompt library in a complicated codebase. We went in we aligned ourselves with the AI in the job by 00:09:11    telling it perform this full report on the feature that we would like to work on. Then we went and used the implementation prompt code name the implementation and boom bap boom bap oneshotted the whole job. So, if you like what you see so far with the Virten prompt library, check it out. Uh, do a Google, go to launch.Virten.app and learn more. Thanks for watching the video and this episode. I hope you get something out of it. I'm sure this will be useful for you somewhere when you're programming 00:09:42    applications, especially as the application becomes more complicated. And thanks for watching. Make sure you like and subscribe. Share the video. Get your Verin account at account.vertin Virten.app.