This New AI Tool Is The Beginning Of The End

welcome to this video where I'll be building a full web application using AI agents without touching a single line of code now let me start by giving you an overview of the complete application that we will be building today this is a fully custom prompt templating website that could remove the need for manual prompting within many businesses it includes authentication and template management and then afterwards if you follow this tutorial you'll be able to extend this indefinitely because as I mentioned this video will show you how to build this together with various AI agents and the tool that makes this new kind of workflow possible is called pythagora when they reached out via email to collaborate on this type of video at first I was in disbelief this seemed a little too good to be true but once I learned more about this workflow I realized that it actually works and I managed to build this app myself that we'll be looking at here today so they are the sponsor of this video but also a brand new tool that I added to my toolkit so as you can see I can sign up with a user account right here and as soon as I log in I can do things like use previous templates like this one that uses claw 3. 5 sonnet to use this simple poem writing prompt so for the subject I'll do a lonely bar and for the feature I'll say artificial super intelligence and as you can see my web app will generate this poem with Cloud 3. 5 Sonet now I could go to the homepage and use other presets or create a brand new template pick any model I want let's just go with 4al mini and there we set up a brand new prompt template now I could go ahead and either use it or delete it like so as you can see this is quite simple but it's a fully functioning app that includes user management so only the users who created the templates can delete them again plus as you might have noticed all of this is hosted on the web so I could share this with my team and we could start building our own templates and the best part is I built this myself today it took me about 3 hours including the setup and the learning process of how to do authentication and now about to teach you how to do this too and although I've never before built an application like this I do have some development Basics so I knew a little bit of python and I know how to use chat GPT to learn things and do basic things like install new packages now you might be asking yourself what's the advantage of a workflow like this versus just using cat GPT or Sonet 3. 5 well if you using son you're generating one code snippet at a time and you have to copy paste the code over into vs code integrate it save it and whenever you make changes you need to delete things replace them it works but you kind of need to know what you're doing because you need to create new files you need to hook up things for them to work together with the help of pythagora you just talk to the chatbot and it writes all the code implements everything connect everything for you that's the difference and this is sort of a big deal because once the application starts getting larger authentication and various templates and multiple pages and functionalities someone like me who hasn't built apps before gets lost very easily but with this edit it and in this video I'll show you the step by step and you can follow

along so the tools we'll be using today are the following you'll need vs code installed on your machine although we won't be writing code we'll use an extension that spawns various AI agents that will write the code for us but all of that happens inside of vs code so that's number one freely available on the Microsoft website and inside of vs code you'll also need python installed on your machine you can find this inside of the extensions next up we need another extension that will help me build all of this and this extension is called pythagora and this is what it looks like it adds a super simple tab to your interface and they're also the sponsor of today's video and I was so excited when they reached out because as you'll see in a second this thing actually works and is able to build entire apps with you not for you this is important the app assists you it spawns all the different agents using various models ranging from Sonet 3. 5 all the way cross 404 mini and even utilizing 01 in the background you just tell it what features you want and with the workflow I'll show you you'll even be able to fix little bugs that pop up along the way you can check out the link in the description for their pricing plans and once you sign up you will get detailed instructions on how to set this up with your machine but there the startup that makes all of this possible I wouldn't be showing it to you if it didn't do something super unique all right we need nodejs installed there's a million tutorials online on how to install that on your local machine plus you can ask cat GPT to assist you during the setup process it's a free web development framework that once it's installed on your machine it's good to go for all consecutive projects we need mongod DB and right here you have a simplistic explanation of what this is it's basically a database that stores all the data within our little web app so all the templates get stored there all the user logins get stored in there and to make your life a little easier I would recommend you download this mongod DB Compass application it's free and allows you to view your database in a way that is a bit more intuitive than using the terminal as again right here these are the two users I set up for my application and in the little demo in the beginning I showed you how to log in with user 2 the last items on our checklist are really straightforward first of all you need your openi API key you can get that under this URL by creating a brand new API key same thing goes for androvic you can get it under this URL by logging in creating your API key here this will allow the app to use your open AI or anthropic account to generate answers with their llms and then lastly you'll need this prompt that I prepared for this tutorial this will allow you to build this prompt template web app feel free to copy this one to one feel free to customize it to your own needs or write your very own prompt Pro tip you could throw this into something like GPT 40 and ask it to change the prompt to something that aligns with your vision for this application and once we manage to set up all of this we're ready to get into the step-by-step development of this web app and this is the fun part because we'll be utilizing over a dozen agents to build our very own web app with a combination of all of these now look for this video I decided to skip the step-by-step setup just cuz it's going to differ a little from machine to machine and there's a million tutorials on the internet explaining all of these things the good news is once you have all of this set up you're ready to build as many projects as you want add features to them and much more so let's

start building our web application the first thing I want to do here inside of the pythagora extension is go to the Cog wheel here I'm going to navigate to advanced settings right here and then I want to activate auto start browser I found this to be really helpful in the development process as you can just speed up the process and quickly see what changes you just implemented wonderful and now we're ready to create our app so I'll just go to this big purple button saying create new app and it will start conversing with me the interface is quite simple I'll explain the various parts as we move through this but first of all it just asks you what is the project name my little tip would be using underscores instead of spaces it's just a good way of making sure nothing goes wrong on the operating system level I'll call this the AI Advantage prompt Hub and this is going to be our demo project all I need to do is send it and off we go now it asks us to describe the app in as much detail as possible and this is where the prepared prompt comes into play again you can customize this with the help of cat gbt to your own needs in my case I'm just going to copy paste it you can find this in the description of the video so after just copy pasting it again I'm going to send this message with the send button and we just officially started our project and this is where Pythagoras spawns its first agents you can see the names of the various agents here in the chat so first of all the spec writer agent checks The Prompt and make sure it really understands it and the architect agent now lays out the plan and this is exactly how application development would work in practice one wouldn't just start building that you would actually go ahead and make a plan and the plan could be as simple as hey okay so we need a homepage we need another page that actually creates the templates and then we need to make sure we have a login someplace to store the templates and the AI connections right now this is a solid starting point but there's more steps that we could put on here like hosting it on the web Etc but if you've never built an application before like me you wouldn't even know all the points but the architect agent here does and I wanted to show you the sketching because that's exactly what the architect agent is going to do now but in a more sophisticated Manner and already you can see it's asking me hey I understand the type of project you're trying to do here can I use some of my templates because in the background they prepared several templates that help with setting up something like a server and authentication so you can log in and log out Etc now I'm doing a little bit of explaining here so you really grasp these Concepts but at the end of the day all I got to do is press yes please use the templates and then the architect agent moves on to actually build the entire plan so there you go as you can see here it checked if we have one nodejs and two database available to us as I said you need those for this to work if you don't have them installed or older version it will tell you here so again with these installations I would recommend use something like chat GPT or CLA to help you through the setup as I mentioned that's a onetime thing you need to do and then pythagora will just let you know if this is good to go as you can see both cases nodejs and mongod DB are available and it spawns a brand new tech lead agent which is combining everything to actually start a development environment in which we can build this and here it starts getting really interesting so have a closer look at this as you can see this Tech lead agent created the development plan that is structured in four epics you can think of these epics as chapters to your project and you're going to be handling one Epic at a time so first of all we want to implement the prompt template creation page allowing logged in users to create an save llm prompt templates with variables then it went ahead and created all the tasks for the Epic so to complete this epic or chapter we need to complete multiple subtasks all right then we have Epic 2 which is developing the template sharing functionality epic 3 which is creating the template usage page and epic 4 is setting up the homepage with a welcome message and a list of all the templates if we complete all of these chapters we have a functional web app and at this point as it created this plan we could tab over to the app progress and for the first time will see an overview of all of these epics and if I toggle this open you'll see all the subtasks so I won't read all of these but as you can see all of these chapters come with different subtasks now as we'll go through this I'll point out certain points where you might not need a task keep in mind that this all runs on state-of-the-art large language modles like gbt 40 or Sonet 3. 5 but they still have their limitations so this is not perfect it's 2024 and things like this weren't even thinkable a few years ago so you do have to think through this a little bit and if you're starting a new project I would recommend you go in and read every single task here but let me tell you even if you blindly go in here and just execute all the tasks with the little Buck fixing routine I'll show you here you'll be able to manage any problem that might pop up along the way that's the good news all right so let's get back to our stream here and let's start with the very first task which is creating a new route and EGS View for the promt template creation page EGS view look I myself I'm not even exactly sure what this means but I'll just put my trust into the developer agent here and say yes and immediately it starts writing the code and developing my project now again as I mentioned you don't have to edit or write a single line of code while doing this but I'll go over here and here I could switch from the chat which could help me at any point in time it's sort of like having chat GPT right in the interface to the Explorer and as you can see right here it created AI Advantage prompt Hub this is my base application that it'll be extending I'll just keep it open so you can keep an eye on how the app gets created as we just talk to this agentic interface here so as we move through this process we will fast forward to Parts where it's coding as you can see this took about 45 seconds but it wrote all this code compiled everything together and it's already done so now we come to the part where it's actually your turn to do something and the only thing you'll be doing here is actually testing and confirming if everything that the agents did works so as you can see here it says human test and this is where I need to actually do something and test all of these steps and see if it's working so I'll just start from the top here step one start the server using npm start now see this is actually a terminal action but I promised you we won't be using any codes so what you can also do here is just press this button that says start app and there you go it starts up a brand new browser and this is the first version of our application you can see we have a navigation bar here at the top it says AI advantage promp tuub and I can navigate between home and login all right looks pretty good let's go back to our chat here and inside of the stream let's see what's going on so open your web browser and visit Local Host 3000 the result should be the homepage of the application should load displaying a Advantage prompt Hub as a heading so yeah that totally worked here right step three click on the login Link in the navigation bar step four login with your credentials if you don't have an account click on the register link and create a new account then login okay so we can do that so let's just go over to the login and register because we don't have an account yet let's say demo user one and for the password I'll just pick testing register excellent so now I'm registered let's log in right away demo user one testing login nice it works now it added a logout button up here so step four was successful now I should test the create template Link in the navigation bar which should redirect me to this URL ending with creat template let's have a look creates templates yep it redirects me now this page isn't built yet but the testing didn't ask for that as you can see here the expected result is just to be redirected to this new page which I was that worked so this step is a success step number six verify the elements on a template creation page aha there are no something went wrong here and this is totally fine this is just a part of the development process wherever you're building something the journey consists of many ups and downs but the important thing is that you're always progressing and taking steps forward and extending your application so look five out of six steps worked perfectly I'm sure in a few years all of this will be perfectly fluid and you won't even need to be testing cuz the agents figure it out all on their own but at this point in time if you want to build something there's got to be a little interaction and that's where we get into fixing problems fixing bugs now luckily pythagora is set up in a way where you can intuitively do this but you need to follow a little formula that I will teach you right now it's quite simple it goes something like this so at this point we identified there's a problem right we should verify that there's various elements on the site like a drop down and a section to add variables and a button that says save template none of this is present this is empty page with an error so every time you run into an error I want you to do the following thing as you can see down here you have the choice between everything works which is not true and there is an issue which is true so I'm going to press there is an issue and now we can tell it what is wrong and we keep it's very simple I want you to formulate in one sentence what is wrong so step six was wrong right the template creation page doesn't exist so that's number one you're going to describe in human language what the problem is tip would be to use the same language that it uses in these steps then you're going to say error column and I'm just going to copy paste what I see here in the browser like so okay so that's the second part of the Formula First you describe what is wrong second you say error and you paste the error and third also very simple you're just going to say log column and then there's this button that says copy server logs and we don't have to do anything here it just copies everything that goes on in the back end and gives us the best chance at repairing this now all I need to do is send this message and as you can see it will spawn a brand new agent the Bug Hunter agent which will now be able to figure out what to do and what to change and not just that this is an agent it will also Implement all the changes not just tell us what we should change but it will also do it look I'm not touching anything here you can see AI is crunching the numbers AI is working it found the bug attempting to fix it breaking down the task into steps and Code Monkey agent is actually implementing all of these changes so there you go that's it I didn't touch anything it says it fixed the issue now I can test it again I'll simply go to start app again I have to restart the app after every single change for all the new code to be implemented and as you can see here this is the create prompt template page that now fully Works let's just verify if we can navigate the page home seems to work create template seems to work llm provider I can pick between mopic and open AI CLA 3. 5 Sonet and I can even add the variables down here this is wonderful so if you look into the original prompt I said that the variable should be inside of two curly brackets so that's how this works now so I could do something like this we use claw 3. 5 Sonet I'm going to save a topic variable insert topic here will be the description I save this template and there we go that's how this would work let me go back to pythagora here and say yeah the issue is fixed now it works right so if I go to step six and I verify that all of these elements are present llm template llm provider llm model llm template provider model add variable and safe template buttons all of this is here and now we simply fix the bug and let me tell you there was no editing no magic involved here we didn't fake this and show free Buck correction Cycles in the background that we skipped no this is just a workflow sometimes something goes wrong and this debugger is actually really good at repairing it so we're ready to go we're ready to say everything thing works I press that and now it moves on to the next task which is implementing the front end functionality for dynamically adding and removing variables in the template creation form okay so although I went through this process the code in the background didn't exist to register this but no problem we'll be adding this now we're just getting started right so I'll say yes and let me tell you that's a bulk of the learning here now I showed you how to work with the agent how to tackle different problems now we just rinse and repeat go through this entire process and build out our application so let's just proceed but now we'll do a little more editing whenever something is repetitive so as you can see here the Code Monkey agent is generating and implementing the code we'll do little edits to skip ahead so you don't have to watch every single thing actually I barely finished that sentence and it's already done so again we can start the server and open the web browser just by clicking this start app button which I'll do like so and now let me go through the rest of the steps here loging in with your credentials we did that already it actually saves your session you can see that by this logout button at the top let's go to the create prompt template and create a new variable which should add a new variable yep that still works and now we can also try this remove button does this work yep it removes the variable wonderful and the last step would be repeat adding and removing variables to ensure the functionality works as expected okay can do so let's add multiple variables test test two testing two fre free looks good I can remove this one yeah this seems to work perfectly all right so all of these nine steps work and as you can see some of these are repetitive the first ones with starting up the website and launching the app the more experience you gain with this the faster you'll be CU you'll realize okay steps one two and three I already have by clicking this button and now let's look at the actual things that I have to test but I think it's still good that it shows you every single time so it's a little more foolproof you just follow the human testing steps every time you just check that the expected results right here as are exactly as expected and you can keep working with this okay so yet again we're at a new task create a mongod DB model for storing prompt templates and implement the backhand logic to save templates yes look this is something I've never done manually myself and I wouldn't know how to do now could I figure this out together with cat GPT probably could I implement it correctly maybe with many headaches in between but you know what I prefer Mr developer agent over here kind of just doing it for me and that's exactly what's happening Code Monkey agent doing its thing by the way a little interesting side note for the Code Monkey agents the developers of this application told me that they're actually using gp4 turbo preview and that's an older model that's not even GPT 40 but that still works the best for analyzing the entire code base and implementing changes just thought it's interesting that they're using this mix of different models to perform all of these actions and yet again that's one of the advantages of using a product like this over just piecing it together yourself with the help of chat GPT okay ready to go test instructions first four steps are just starting the app step five is visiting the create template page and then in Step six I should fill out everything and I should get a new popup saying template saved successfully okay so let's have a look if this works I'll start up the app I'm still logged in I'm on the create template page just a little check everything still works that's great all right everything is filled out I'll say save template saved successfully well that worked so step six was a success step seven check the console output of the server you should see a log message indicating that the template was saved successfully including the template ID okay so this is something novel so it wants me to check the logs for the server which I can actually find over here and all the way at the bottom I can see that yep there's a new log entry here that says variable added meaning this was a success if you arrive at a point like this where you're not sure what this means you can just copy paste this into chat GPT and ask what does this want from me I would probably also screenshot my entire screen and give it that image to help it figure it out and it would point you toward the server logs but there you go this definitely worked step eight refresh the page and the expected result should be the form should reset and you should be able to create another template okay I refresh the page and everything is fresh no more variables this works like a charm everything works let's move on to the next step okay next task execute yes okay done first four steps again are just starting the app and logging in then we create a template fill it out and then here's the new result it should actually show that the template is saved successfully and display a sharable link okay let's have a look let's start up the app okay create template so I'll just enter whatever cuz it really doesn't matter right now as we're developing it open AI add variable save template and yeah there you go it actually worked your template has been saved here's the sharable link and I can hit copy and yeah that seems to be exactly the thing it asked for Next Step I already did an alert should appear with the message sharable link copied to clipboard did that happen let me test again copy oh there's no popup showing that so I'll say there's an issue click copy it does not show share blink copied to clipboard so remember we should include the error if there's one there's none here so I can simply say log colon and then copy the server logs and send now this is a minor thing I could also decide to ignore this and implement it later on but I'll be precise here and I'll make sure everything that it plans for is also implemented let's try this out again I'll restart the app fill out whatever add a variable description save the template we get the same thing and we click copy sharable link copy to clipboard now we have it here it fixed it yet again actually in the first try that's absolutely fantastic so I can go back to my stream say yes the issue is fixed and this would conclude step seven close it by clicking close yep that works what about step nine open a new browser Tab and paste the copy sharable link into the address bar then press enter ah yeah I have the copied link so let's just see how that works okay the share template page should load displaying the full template text and input fields for each variable well that didn't work but my app is not live so let's try it again and a variable save templat I'll copy this link and I'll do this right away yeah that actually works it just says page not found okay so that's a mistake I'll say there is an issue as PR usual I describe it in a simple sentence and in human language then I paste an error if I have one and say log colon and copy the logs now it'll go in and figure this out and this is how you work with this thing as you can see this pattern just repeats over and over again but we're moving forward and adding feature after feature making things work better and every single one of these correction Cycles is a step in the right direction so there we go it finished up the debugging let me try this again and this still seems to be not working it's just loading so as you can see now we have a bit of a different debugging interface it didn't just get it right away now we have to do another round of fixing this bug and the way we'll do this is by listening exactly to what it says down here please test the app again and share the relevant backend logs how do we do this we say copy backend logs send it ask for the backend logs so we'll give it those please share the relevant front end logs copy front end logs send please add any additional feedback that could help pythagora solve this bug well it says the site can't be reached so I'll say all right it's done fixing let's start this up again seems like it's still not fixed so I'll do the same thing again and let it work see how this goes this time there was an error serving your request aha this is a bit different than what we had before so I'll copy this error message and again I'll copy backand logs send copy the front end blocks as it asks for here now it shows there was an error serving your request I'll send this yet again and hopefully it fixes it sometimes it can take a few runs but the good news is once you fix this correct the functional code that it writes is yours and the application has been extended with this functionality forever okay one more attempt testing add variable a keep this default save template copy this go to a new tab paste this voila it worked here's the variable here's the model this is the first time we have our template details up and running so yeah the issue is fixed it worked out took a few attempts but there we go so Step n when I copied this the page displays the full template and input fields for each variable verify that the template text and variable input fields are displayed correctly okay so I use different text than this so this doesn't show it but it shows the template text and there should be an input field for test variable with the description this is a test variable okay because I use different values it shows something else the only thing that worries me that this input field is actually not editable this is fixed right so I'll go ahead and say that there is an issue the input field is not editable and then I'll say log and copy the server logs and send it and hopefully it'll figure out how to make that field editable by itself I certainly wouldn't know how to do it but that's okay because we have Bug Hunter agent working for us as we take a sip of water okay Code Monkey agent implement this for me please all right let's start the application up again testing add a variable V1 L V1 is the description save this template copy okay new tab this works ah still not editable so we go for the same process again I copy the backend logs here it wants the front end logs I copy send it the variables field is still not editable for me maybe I'll say input field cuz that's the language it used earlier right it was talking about the input field so I'll just send that fingers crossed and look I'm sure over time some of this bug hunting will be even more automated than it is but you have to considered that this is one of the first consumer products where something like this is even possible you can build apps together with agents and again didn't touch the code a single time I didn't even have to copy paste code from cat GPT a single time I just talked to it in natural language and okay let says it figured it out let's try again and it's editable haha Perfecto so yeah later on I will be able to fill out the variable here and then it will run the open AI API call with GPT 3. 5 turbo but all that is not completed yet because we need to move forward so yes this issue is fixed that worked like a charm and therefore this last step worked too everything works ready to move to the next task I guess this would be a good point to review my app progress as you can see the first tasks are all completed we're almost done with the first epic here all right and now I want to implement a function to generate a unique sharable hash ID for each save template to add it to the template model all right let's say yes by the way if we're wondering what I'm looking at on my desk it's the laptop that I'm running all of this on so I could literally travel the world and build apps like this look it up to authentication payment methods all I need is a good idea now the technical barriers to entry are having a laptop and being able to follow a tutorial I suppose okay so again first few steps are just starting it up and logging in we want to go to create a template creates a link we open that link in a new tab oh and then step eight is new so let's do the first seven steps this should be pretty Speedy we have some practice here testing a save template copy this new tab and wait a minute that's weird it gives me a Google result what's going on here so it copied Local Host 3000 undefined so this definitely doesn't work it doesn't open the new thing so I'll say when I paste the link it opens Google search and maybe I'll share the link too when I post the link like this it opens a new Google search and then again I'll say log colum copy server logs and send this and as you can see this process repeats itself this is how you debug things okay start the app retest this okay and as you can see now we have a proper link let's copy paste this amazing this is editable it fixed it so yeah issue is fixed okay so step eight wants us to check the mongodb database to ensure a unique sharable hash ID okay this is something new so if you followed my advice and you have mongodb Compass installed and the database is connected here all you need to do is right click and say refresh databases and as you'll see you have everything in here these are the various users we have these are the different prompt templates we added and we got to make sure if there's a unique sharable hash ID so yeah sharable ID you see yep it's Unique so this is the extension and this seems to work so step eight is fine and verify that it's Unique by creating another template and checking it sharable in the database okay so let's do that I'll just start up the app again like so and then so let's see if this hash is present here all I need to do is go to the templates refresh this and see if this one is present so this was 758 in the end 758 yep there you go it's present in our database and that's why this viewer is so nice because you can really just refresh and be done in a heartbeat you don't have to do something like going into the terminal and using the right commands to find the database entries all right so everything here works and we can progress to the next task and I believe this completes the first epic so we're actually done with the first chapter of our development project here so let's have a look at the app progress here as you can see epic one has been completed so let's just proceed with the next step here and I think we'll just fast forward over the second epic because this is pretty straightforward we're just going to repeat what we've done so far and as you can see some of these things might have actually been implemented already so we don't need it but you can always follow this app progress again is not always perfect and if you have some experience and you know that it's actually doing something that already has been implemented you can also skip over certain steps and save yourself some time but let's just stick to the plan let pythagora do the work here and I'll proceed as I have before Implement all of these steps and I will see you at the end of Epic number two all right so halfway through this epic everything actually worked fine except that I noticed that one of the tasks did something we already had in place it wanted this share link button that we already created so in case you notice something like that you can also just skip it but sticking to the plan doesn't do any harm it's just going to take a little more time and maybe you'll have to do a few more of those debugging Cycles just like I did but at this point we're 53% throughout the creation of this app and it decided at this point to actually create a documentation file a readme so there you go now we have a readme file where you can read about this app and how it's set up if you want to or you can just ignore that and move on with the next task which is implementing access control for the shared template page and let's just fast forward unless anything unexpected comes up all right so now we're at an interesting point again where actually there is some issue with starting app so it starts it up but it doesn't automatically copy paste the URL so I'll have to do this does happen sometimes so just be aware you can just copy paste local L 3,000 to fix that here I have to log in again I have a new testing user right here log in like so create a template save the template copy the shared link open in a new page and ah here's our new shared template page oops that's weird our application seems to crash when we type something into the field so let's say there's an issue I type into the variable field on the sharable template page the browser window closes then I'll say log and paste the logs here and run it as per usual so let's see if we can fix this but I can already tell you that there is an issue with the llm because as you can see here it's already expecting a llm response and we haven't even linked API key so we'll probably have to do this right around here and I happen to know that this will happen inside of the EnV file but let's stay away from that and solve this together with the agents here okay backend logs copy backend logs oh there is none so we continue without the logs front end logs copy front end logs there's also no front end logs for now so we just go without them and I'll just say the browser window closed and send this okay let's try again copy paste this manually now login submit okay and that worked it didn't crash but it didn't give me the llm results so let me copy this error message let me see the bug is fixed and there is an issue so when I submit it shows me an error and then you can add your fault here I know at this point we haven't linked our API keys yet and it's supposed to do something with an llm so let me just tell it that I think the API keys for anthropic and open AI are missing okay and then I just say log copy the server logs and here we go meanwhile as this generates I'll prepare my API key here so I'll create a new secret key which I'll call pythagora 2 create a secret key no worries I'll delete this right after the tutorial and then I'll do the same for the mopic key test workspace here are the two keys okay let's see aha as you can see I was correct it's already updating the EnV file and this is the one thing where I'll actually have to go into the code and copy paste something it's my very own API key that I'll have to insert here so as this is done updating you can already see it opened the EnV file by itself I didn't have to do anything so I'll just wait for it to finish everything now it does the llm Javascript file and there you go it even tells me input required on EnV please open EnV and modify line 9 according to the instructions so let me make this a little smaller for a second as you can see line n here is the open API key so I'll just put it right here I'll delete all of this and I'll copy paste my two API Keys into here and Fric copied pasted open a I copied paste it now this is hooked up to my account I'll just make sure to save over this just to make extra sure this all is correct and I'll say continue now it's also telling me to modify line 10 which I already did nice done all right and let me start the app and see if I can make this work so this time I'll fill it up properly because this should work with the llm API call open up a new tab write me an essay about topic ooh and it crashed again but that looked really good so I'll copy the back end logs as it once here send those copy the frontend logs okay don't have them right here and then I'll say the site crashed as soon as I opened the sharable template send let's see if we can make this AI implementation work here oh well that's weird something is missing there so I'll tell it the front end looks super weird like it's missing the formatting it's probably missing the CSS file somehow so again I'll just tell it and it will debug all right so after going through this debugging three times and it's still not working I actually decided to do something else I closed out the app entirely reopened vs code and now you can do something like opening up pythagora again and here you can actually load the app and you can return to previous steps so whatever you develop you can always go back there's a history so no matter what you try in case something really breaks you can just do this so I'll just go back to the step where it was updating the files and fixing the last task there you go maybe let's go to the task before that just to make sure and we can pick up the process where we stopped right let's see and there is our website again cool I'm really glad that worked although there is this little issue with these buttons not being clickable sometimes I can always just open this up in a normal browser log in here and there you go we're back ated we can create templates add variables copy link paste link and submit these with no llm response but this works now and it didn't crash so that is absolutely wonderful now we can continue where we left off let me see if all of this works so yeah it doesn't show the loading indicator for the llm matter of fact I get this response so then I say logs copy server logs and I'll send this and again it should navigate me back to changing the environment variable and actually inserting our API Keys as these are missing here you can see that we returned to a step before we even pasted though so we'll have to do it again but that's a small price to pay considering we have the functional application now that we can keep developing and you can take this Peace of Mind into the development process whatever you do you can be confident in the fact that all the history is saved and that you can always return in case something goes wrong and you can't fix it with the debugging cycle okay so I'll just manually do what it's asking me for I need to go into the EnV file when in the rot which is here that's this one and I need to add the following lines this time it didn't add them I'm sure I could prompt it so it does but I'll just copy this over like so and change the API Keys here in the end just like we did before luckily they're still open done continue the bug is fixed and now let's try our little application again start app let's log in create a template okay we created a prompt template we'll open this up in a new tab okay what's the topic channel classic let's say penguins and let's see if the llm response works here and if we're actually going to be using what did we pick GPT 3. 5 turbo to get this llm response I want to see the essay about penguins rights here okay doesn't work let's give it one more shot maybe change over to mopic Sonet 3. 5 add a variable topic insert topic here save this template amazing we can open up the brand new link let's try this again and this time using Sonet 3. 5 let's see if this one works all right doesn't seem to work so you know the drill we go back in there's an issue when I submit the variable prompt template the llm response keeps loading but doesn't generate an answer and then again I'll say logs copy server logs and run this hopefully it'll fix it worked yes finally okay fantastic so we made it work so the API Keys obviously connected this and now we're ready to move on to the next phase of the application yes the issue is fixed and the next phase is going to be the next epic which is all about creating the template usage page enabling users to input variable values and submit the completed templates to the selected llm provider so this is another one this already works right we're able to submit this to the llm providers already so this task we already have so now that I say that all of this works as soon as it proposes this next task I can actually skip over it because we just successfully ran an llm prompt in here no point in doing that again as mentioned before these are just the limitations of AI right now not always is this plan going to be perfect if you want to save time a little bit of thinking and skipping unnecessary steps helps okay it wants input validation so basically forcing the user to actually write something inside of the variable this is good this I actually wanted to implement so I'll say yes okay so the next task is all about creating a homepage and actually linking all the templates on there we definitely want this step so I'll say yes and let it work wow look at that that's a lot of Cotes that it wrote you can actually click these arrows here to see all of the things it did so look this is the homepage it added all of these div classes Etc again this is just for your information you could view this if you want or you just ignore it and start the application and let's see how the default page is looking now and there you go we have all of the testing templates that we stored in our day database on the homepage now and we could use any one of these I suppose let's see what we need to test here so first of all open it up welcome message is there that's good scroll down to the section titled available templates if no template has been created yet you should see the message no templates available yeah it shows everything so as you can see there's no step where the template should actually work when I press this but let's see it actually does wow okay that's impressive I didn't expect that we could use any one of them but yeah all of this works so let's move on to the next step and that actually concludes epic number three so let's see the last step is enhancing the homepage to display a welcome message and a list of all created templates again this is something we already did so we can skip something in here let's see implement the functionality to display the list of all created templates on the homepage well don't I already have all the templates on the homepage I think I do so I'll just skip this task in case I need to add something or something doesn't work you can always add new features and fix things but I think that's sort of it and there you go your app is done you can start using it right now so let's do just that let's start the app up one last time there you go we have all the different templates this is fantastic all right so now that we built app there's really two things left first of all I want to show you how to add an extra feature because once you understand that you can really extend this app indefinitely and then as the last step I want to deploy this to the web and you're going to be surprised by how simple it is with this extension I really love that because it allows you to host this on the web share this with your team friends family customers whatever it might be and we're going to do just that right now so if I go into the stream it asks me do you have a new feature to add to the project just write it here and I'm going to describe this feature similarly as I would in chat GPT or as I would describe a bug that occurred so one I'm going to use language that it already has two I'm going to try to be as precise as possible so the feature I want here is a second button that allows me to delete this templates cuz I have a lot of useless testing templates right here on the homepage add a delete button to the right of the use template button that allows me to remove a template I think that should be good enough I'll submit this and the spec writer agent is going to figure out a way to implement this into my app right I'm going to accept the changes and here's the new task add a delete button yeah sounds good to me I'm going to confirm this it's going to go to work Implement that new feature and you can only imagine you could dream up any changes to the website this way and then let the agent implement it you review the results and then either accept or decline them all right let's start up the app and give it one final Spin and see if this is going to work new tab go over here huh so I don't see the delete buttons I'm going to tell it as per usual include the logs in here to make this faster ah and there you go after two bu fixing Cycles it worked and we have a delete button right here so let's see if it works too delete perfect now I can delete all of these extra templates and there you go fully functional websites could add the variable here or write new prompts like so with sharable links as you can see it's fully functional with the prom template being saved on the homepage so there we are last step I just confirm that all of this worked and my application is done and now we can move on to the very last step which is deploying this to the Internet so other people can use it too this couldn't be any simpler I'll just head on over to deployments here click one button that says deploy and it's going to go ahead and host it on the web for me and there you go successfully deployed I can open up the URL just say okay and here we are our web app is live log in home as you can see this is a URL I could open this from any machine send this to anyone and that is the entire work flow this is how you build an app with the help of various AI agents without touching a single line of code you can check out

the first link in the description to sign up for Early Access they just started releasing this to the public every single day new people are being let in with instructions on how to install and get going with this I mean what can I say here the future is here creating applications for beginners has never been this simple given you do need a little bit of understanding of what's going on to make this work but my hope is that this video helped you along your way and if you build something please leave a comment below I would love to hear what you made and that's all I got for today thank you for joining me on this journey and I'll see you very soon on the Channel with other practical AI use cases that actually work