UsingTheVPLandAIDaydalToUpdateAComplexCodebaseIII

Using the Virten Prompt Library and Daydal Sidekick AI To Update A Complex Codebase III 00:00:02    Welcome. My name is Terren, founder of Virten.app and producer of the Virten prompt library. This episode is a continuence of working with the sidekick AI data, bringing in a good implementation plan and having our main ai and our main codebase update the category pages with new data files and new hyperlinks. Now, we ran into a little bit of trouble as you might have seen last episode. And what we're going to get out of this video is first we're going to see that to fork the project at the beginning of 00:00:37    the job as we did at the beginning of this series of episodes, let us simply go back, create a new fork, and just roll back the failed implementation that we've had when it comes to updating the category pages. So, we'll begin this video by opening up a new fork for our new development session and submit a new refined plan to the AI on our main IDE to make sure we get this job done, this job of updating the category pages hyperlinks to the new data file organization correctly. And well, if it's not, it's going to be a one shot 00:01:19    this time is the hope. So, let's get to it. Uh, here we've rolled back to our previous branch. We're going to fork it. Give it a nice unique new name. open up our main IDE. And here in the note document, we have the plan, right? And so one thing that we should do to make sure that the AI really understands this plan is have it verify that the prompt data files in the codebase actually match the plan. And that way we get on the same wavelength as the AI because what we're doing is updating the category 00:02:17    indices to the new data file organization that we put into that code base in the first episode of this series. So here that's what we'll do. We'll tell uh read the data prompts folder in the codebase and verify that this code snippet which is this large instruction for how to update the category pages. This want to verify the coherence of our plan and the actual files in the codebase. So we're not telling the AI to create hyperlinks to files that don't exist. We're going to get on the same wavelength and check the code base 00:03:20    versus our plan before we attempt the implementation. So, we gave it that instruction and we don't want the AI to code here. We want it to write a document. So, we'll use our general use prompt. Fire that off and let's see the output from Bolt. All right. So, this was a surprise when I updated this with the new prompt. I must have dragged and dropped in the wrong uh updated set of prompt data files. So now we've caught a big mistake that the developer in this case myself made in this process where we're making 00:04:02    sure we get on the same wavelength with the AI before attempting the implementation. And so here the AI points out that well no your list of things to do is not coherent with what's actually in the codebase. All these files are missing and I figure I got the wrong prompt data folder in there. So I'll go through that process. I just open up the Stack Blitz IDE and drag in the correct prompts file and we'll be right back with the updated prompts. All right, so we're back with the updated code base. The prompt files 00:04:38    are now correct. They're in the base. We're now going to begin again and ask the AI to verify our instructions for our planned implementation to update the category pages with what's actually present in the codebase. So I simply took that first prompt from a few moments ago and put that back in. tell other AI that I've updated the code base. Send that job again and let's see if our master plan is correctly reflecting the actual prompt data files. Oh, they're right. Looking at the feedback from Bolt this time, it 00:05:33    actually is saying things that are not even real or correct at all. This is one of the problems that happened with the AI. It's like inexplicable. Why does that happen? And how do we get past it? So, I'm going to work with the AI in this is a live environment to try and figure out how to get the AI to properly do the job. What it did not do in this case, for instance, what it's saying is there's missing files in the code snippet. Here's our code snippet. It says chat instructions combinations.ts is missing. 00:06:08    Let's see. Here's the code snippet we gave it. There's no combinations listed in the chat instructions. So, it's like it it made up its own code snippet. So, how do we get past that? We'll have to work through that. First, we'll simply ask it to do the job again and correctly. I'm going to tell it you have failed to properly digest the web container context and the chat instruction and the code snippet provided in the previous prompt. So I'm just telling it what it failed to do. It failed to actually look at the codebase 00:06:59    and it failed to actually look at the code snippet. I'm going to tell it to thoroughly review this interesting part of the codebase, which is the data/prompts folder. Compare the contents of the codebase with the instructions included in the code snippet. Ding-dong below. And of course, it needs to output a document. I'll also remind the AI to thoroughly you review the code base since it seems to be ignoring that part of its job. Let's see what it comes up with. So, what's going on here? All right. 00:08:35    So, this is what happens sometimes. Things go wacky haywire. We had a very straightforward plan going into this. We have the implementation that we need done, which is this code snippet that we're talking about. It lists every file, every modification that needs to be done to update the hyperlinks for every category index. And the AI is just spitting out nonsense. It's not reading our codebase correctly and it's uh basically behaving very badly. And then the input stream is now failing for some 00:09:12    whatever internet glitch, right? So, let input stream. Let's make sure I still have the internet. Okay, internet's there. Can't do anything else about that. So, I'm telling it more specific. More specific. This is the way to sometimes get around this. Even if it sounds like repeating oneself, I have to get more specific. So, I'm specifically saying you must review specifically the data prompts folder and the pro the project files. And so, we'll try that again. All right, let's review the output now 00:10:16    that we've gone in and said, "Okay, we got to make sure we hone the AI in on exactly what we wanted." So, I said specifically the data prompts in the code base. Look at that folder. Look at the contents of that folder. And what's happened is somewhere on the back end of Bolt, it's actually not reading my codebase at all. It just wants to read the old version of the codebase before I updated it. So there's no way to get around this except to perhaps try to create a new fork so a new chat session 00:10:50    can be created and then perhaps the AI will review the situation. Now um on the other hand I just realized what may be going on. So in this IDE environment to control the size of the context window with the bot there is such a thing as an ignore file where you can tell it ignore the contents of this directory. So if that directory is not something that you work on very much, but it needs to be in the codebase, then you can tell the a you can make it invisible to the AI so it doesn't use up tokens and context window 00:11:29    as you chat. And I just remembered that I have the prompt data folder on ignore. Now, why doesn't the AI why doesn't Bolt tell me remind me what my ignore list is and things like that? I guess because it's a new technology. Anyway, let me go ahead and update my ignore list so the AI can actually read. Here's the entry, the data prompts section. Now, this is a super handy feature to be able to ignore parts of the codebase so that it fits inside of the the AI's context window, but sometimes you run into a 00:12:02    little trick like this where I needed to update this contents of that folder and use the contents of that folder and uh it was simply not available to the AI. All right. So, we'll let the AI see that folder again. We'll hope uh that does not blow up the context window and that it can work with this size of the codebase now. And simply give the AI our initial instruction like we're starting from scratch. I'm just going to ask it to clear all prior context and works. I'm going to tell you'll digest 00:13:01    the code base a new in response to this prompt. I don't know if that helps at all, but it's there. Now I drop my message in. It should be able to view the prompts data or the data/prompts folder and subfolders now and actually do this job correctly. It seems the AI did not update properly from the ignore list. This is where a lot of vibe coders and software engineers are just like whoa this is terrible this sucks and I am I found a mistake that was on the developer side where I had that prompt folder on ignore. We have taken it off 00:13:53    of ignore and for some reason the AI does not recognize that. There's one more thing that is most expedient to do which is to create a new fork of the project. So the AI receives the project perhaps is the hope. The AI will receive the project with the updated codebase with the accurate ignore list. So we'll simply fork the project. Give it an updated name so we know it's the latest version. verify that that ignore order is removed. So it is it does have access to the data/prompts folder and we'll give it this order 00:14:54    again. I'm going to ask the AI to ensure it works refreshed. There goes that first initial message over again that says, "Okay, let me align what we're trying to do with the AI very uh here's the master instructions we want to use for the implementation. Take a look at the codebase and see if it meshes. Write a document about it." That's what that message we just sent is. And here we get the output. Okay, so here it did properly perform the checks. It turned out it was having trouble uh digesting the codebase from 00:16:00    the web container. We did our Hail Mary to open up a new fork where we knew everything could be as fresh as possible. Turned out that worked. The AI correctly read the situation. Now, we're going to give it, now that we're on the same page with the AI, we're going to give it this code snippet and the implementation order updated button links, button labels for each of the category pages, index pages that is as indicated in the code snippet below. We'll throw down with the code name the implementation 00:17:00    prompt. Give a unique name to the implementation and send that one off. All right, let's see the result. So, since we've been having problems with this particular implementation, I have to be more thorough to review it. And so, I'll test first the chat instructions page versus the instructions we gave it. So the instructions were that the clarifying message should point to squashbugs.ts, not what it did what pointed to before which was clarifying.ts. I informed the AI that the hyperlinks or the internal data 00:17:53    links should be updated. And so reviewing the updated chat instructions file, I see that it failed to do the job correctly. Also I see that it does not title things in all capital letters as per is evident in the code snippet instructions. So I mentioned all that in this latest prompt. I said follow the code snippet instructions perfectly to accurately produce the corrected job. I need to tell it that you failed to correctly update internal links to the data files. You failed to create button link labels in 00:18:51    all capital letters as indicated in the code snippet. So basically give it as much information as possible. Tell it how it did the job wrong last time since we're in an iterative process with the AI and this development session. give it the information that it needs to perform the implementation correctly again which is in this code snippet. Give it the uh code name implementation prompt with its unique name. I put stars key 45 in this case and we'll send that one off into the cyber world and see what our AI 00:19:46    spits back out. All right. So there we go again. We sent it off. The AI went and made it happen. It did in this case update everything to have capital letters in the button link label. And for some reason it continues to fail with this job of updating the link to the data file. What to do? Aha, I figured it out again. It was on the developer. I overlooked part of how this hyperlink process works and how the prompt pages are generated from data files. So what's going on is that this link actually 00:20:34    points to a subfolder prompt/clarifying whereas I expected it to be pointing directly to the data file because of some kind of brain fart. So I have to actually also update each of the subfolder pages to each category where the prompt pages are generated by a serverside component. Now we got complex and I've been trying to keep these videos simple, but like I mentioned a few times in previous episodes, this is a sophisticated codebase. And so when you're working with a sophisticated codebase, it can be 00:21:13    very easy to make this kind of mistake where I thought only these links needed to be updated when in fact also this other feature and part of the application needs to be updated for any of that to work at all. But now that we know the problem, which is that the renamed data files are not being correctly pointed to by the prompt page template generation pattern that exists in the codebase. I can now tell the AI what actually needs to be done. I could have also asked the AI at the beginning in the phase of 00:21:51    development trying to get on the wavelength, what is everything that we need to do in order to make this update work? Write a document about it. And the AI may have pointed that out. Anyway, we got here now through this adventure we've been on. And we'll go one more round to see if we can have the AI truly one shot the second leg of this update. After updating the category pages, hyperlinks, we have to update each prompt snippet pages server component. So let's tell the AI about this situation and I'll write that 00:22:37    prompt. All right. So, here it is. Now, I wrote a message that says what the rest of this job is. Like I mentioned, leg two of this job is to get down into each of the prompt snippet pages and their server components and update those to reflect the new data file organization. Now, let's see. The AI is can be pretty smart. I'm going to send this in giving it the authoritative code snippet. with its information about everything should be linked up and what the names and hyperlinks point to and all that is 00:23:15    right there in the box of the uh code snippet. Going to tell it to create an implementation plan to comprehensively update every category is prompts. So we'll have it write a document to continue. We want to align with the AI every time we have a big job in order. We want to document what it thinks the plan is so that we can see if our our plan is what their plan what the AI's plan is. So let's see AI pop out an explanation of what it intends to do. And we expect it to say update every categories 00:24:09    subfolders prompt snippet server components. I'm just reading over this. It looks like it gets the idea. It's mentioning the correct job. So it creates a document asks would you like me to proceed? I'm going to say yes. I'm going to give it my implementation order from the version prompt library. So I know that it's organized with a unique name and I also get the final technical document in case uh that could be useful at a later time. Also, this code name implementation order gives the AI instructions that if you need more than 00:25:09    one turn to complete all of those files, it's about to update 16 files or more. that if you need more rounds, tell me so I can tell you to continue. Whereas without the code name implementation prompt, often the AI will not tell you if there are more work to do to get the job done. Here we get the message implementation in progress. Prompt continue for the next chunk. All right, the AI blasted right through it with the second round of implementation. Now, one thing since this has been quite a complex project, 00:25:58    I'm going to ask the AI to run its own compilation checks, read the logic in the codebase, and see if and ask it if it expects each of the hyperlinks to work correctly. So that's just the message I wrote. Check every link on the category pages and tell me do you think it's actually going to work to load the prompt snippet page? That's the whole idea of having links on the category pages. We wanted to write a document. So, I throw the general use prompt in there. All right. So, here's the reply. 00:27:15    It does an analysis as instructed. It checked every category index and its hyperlinks and said, does it go to the actual prompt page as desired? And it did that for each section as we can see chat instructions category combo prompts category and it found some errors little things that for some reason it didn't pick up along the way. This is great and a normal process of iterating to ensure that your implementation is complete uh by asking the AI to run mental compilation checks. Tell it what you 00:27:49    actually expect to be going on in the application since you updated it and it'll give you a good feedback like this. So, here's what we have in our analysis results. A couple errors, and we're just going to tell it to simply resolve the following. Call an implementation iteration. Drop the information in there for it to interpret. Tell the AI used the code base. Actually, we'll just drop another code name in there. Send that one off. So the AI performed the updates as we iterate on the implementation and try to 00:28:54    iron make sure all the details are ironed out. Now there's a good idea here I just had. Let's have the AI now verify that there's no loose ends in the codebase. So, I'm going to say, check the category index and each of the button links that we just had to install. Check that they point to a functioning prompt page. And also check the subprompt folder, the subfolders for prompts in each category. And tell me if there are any antiquated antiquated prompt pages from the prior form of the codebase with the previous 00:29:50    set of data/prompts files. as each button link point to an actual and correct prompt snippet page. And the second part of this was use the category use each category index as an authoritative rule verify each category folder. There it does not contain out of use server components for the previous iterations prompt data files in this application. Produce a document. All right. So basically write whatever you want to the AI and then give it the produce a document order. Let's see how it goes. But going 00:31:17    through that resolve problem, iterate the implementation, check the implementation, check it with your compilation checks, AI, see if we're doing it right. I have to think about it as the developer a little bit to look at it from the other angles. And that's how you come up with what you what you write in the prompt before you put in that write a document prompt snippet. What did we get here? It verified and says all links are verified and correct and no orphaned pages found. So it gives me a nice 00:31:55    summary report. then this should be considered possibly a successful implementation. Let's see how it goes when we push it into our production preview environment after we do the TypeScript compilation check. All right, so we did write a lot of files and have this circumstance. So the TypeScript errors, it almost always will fix them immediately. Tell it to resolve the TypeScript errors. I don't understand what this error came from. So, we'll just kind of have to hope. And with this kind of TypeScript 00:33:12    fix, it's good to drop in remind the AI to use the documentation from the Virten Prompto library. Let's send that one off. So this was a syntax error that I introduced while I was modifying these data files and updating them by hand. Okay, it says it resolved the error. run our TypeScript check again. It's quite unusual that this error did not pop up in the first time. A new TypeScript error has popped up nonetheless. drop in that remind AI to use the documentation and off it goes. These are the less exciting parts of 00:34:43    developing an application sometimes and uh this is where some of the work comes in. you know, this series of episodes where we've been working to bring in the new updated prompt data files and make sure and bring those into the application could with on my part as the developer a little bit more attention to the actual codebase or if I had gone in and asked the AI here's what I want to do and gave it that master code snippet with the updates what needs to be done throughout the whole codebase to make sure these 00:35:25    fixes work. That's a good way to to open up and get on that wavelength with the AI at the beginning of an implementation or a change. Now, if I had then maybe had a checklist that said, "Bring the implementation plan in and ask the AI what it thinks needs to be done throughout the rest of the codebase, if anything." Then that would be that would have saved a lot of development time and a lot of bug squashing and headscratching about why isn't this working? It turned out I had overlooked a whole feature or component of the fe 00:36:04    of the features in this application and tried uh and and we made our way through it in reasonably good time. And nonetheless, this all this update all could have been done in 20 minutes flat instead of an hour and a half like would have been on if I had followed the proper development sequence and included at the beginning of bringing in the implementation plan asking the AI what else or to review the codebase and the plan and what else might be affected by these changes or the incoming implementation. 00:36:40    Now anyway, we're at the end of all that encountering TypeScript errors that we probably would have encountered in the first place, but these are pretty easy to go through. Run that command npxtsc- no emit. Feed that TypeScript error to the bot. It fixes them. Sort of a last step to the finish line. And so now, let's see if all of this is really going to add up to a success. I'm going to pause the video for a moment and bring in the updated files and the updated codebase. Push it to my host. Let it build the application. Then we'll 00:37:13    be back. We'll refresh the VPL that we hear have on the left. Check that the hyperlinks are working now and see whether or not everything worked out just how we desire to. All right, we're back. updated the app, pushed it to this production environment. Let's see how it goes. Now we have the updated button links. Now let's see that the hyperlinks work correctly. I have a feeling everything is going to work in order. So, I'll do a proper check and visit every link and we'll be right back. All right. So, now I've checked 00:38:06    every link. Everything is complete. It's gone off without a hitch. What an adventure that was. Up, down, left, right. The AI didn't tell us a few things that I feel like it I I could have uh that it could have told us like, well, I have an ignore folder. I have a folder on ignore that we're trying to talk about instead of just insisting it knew what was in that folder. It it should have just told me I can't actually read that folder and it will do that if asked directly. So maybe we'll get a vertin prompt in there that 00:38:39    contains a check for that so that that kind of error doesn't persist or confuse you while you are working on your application. Now, um, any last things to mention? We've got this slick app for you guys to use. Check out the description, the Vertton library resources and get that checklist so that you can follow a the right development process to create that implementation plan. Introduce that plan to the AI. ask the AI whether there's anything else going on that would affect this implementation and then be ready to 00:39:25    rework or upgrade the implementation plan to make it complete and send that plan off to the AI with the code name the implementation prompt. If I had followed if I had a checklist like that and followed it step by step three videos ago, all of this would have done been done in just 20 minutes. Now imagine how many people are running around without the Virten prompt to library spending eight hours on the same job, 20 hours on the same job because they get lost in a bug loop and an incomplete job. When 00:39:58    you're working with a sophisticated codebase like the Verin Prompta library is what we've been working on where we're talking about page generation patterns that work with templates from data files in JSON format instead of just having web pages that that have HTML files that are there. this situation has to be done this way because it's a more secure application and so that's why some of the sophisticated stuff comes in and it helps and it's more sophisticated server software that can serve it faster than a 00:40:34    normal website. That's why we go through these complications on the inside of the codebase and have to deal with these sophisticated things when you're talking about making real professional applications. Now, the Vertin prompt library is super useful for simple websites and sophisticated applications like we're seeing today and everything in between. So, if you like this video, thanks for sticking with me through the adventure, huh? Ran thought we ran into like walls three or four times and it 00:41:04    was all over, but we persevered, thought around the problem, and made it through. Please like and subscribe if you enjoyed this. My name is Terren. Go to launch.Virten.app. app. Learn a little bit more about the VPL and get your subscription. Get your Virten subscription today. You gain access to a lot of other tools in the Virten ecosystem and but of course it's all worth it just for the VPL and I'm looking forward to hearing from you. Good luck and have fun while you develop your next application or do research 00:41:38    with the AI.