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 Claude 3.5 Sonnet to use this simple poem writing prompt. So for the subject I'll do A Lonely Bard and for the feature I'll say artificial superintelligence. And as you can see, my web app will generate this poem with Claude 3.5 sonnet. 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 4o 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 three 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 ChatGPT to learn things and do basic things like install install new packages. Now you might be asking yourself, what's the advantage of a workflow like this versus just using ChatGPT or Sonnet 3.5? Well, if you're using Sonnet, 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, connects everything form 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, I did 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 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 Sonnet 3.5 all the way across 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 they're 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 Node JS installed. There's a million tutorials online on how to install that on your local machine. Plus you can ask ChatGPT 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 MongoDB. 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 MongoDB Compass application. It's free and allows you to view your your database in a way that is a bit more intuitive than using the terminal. As you can 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 OpenAI API key. You can get that under this URL by creating a brand new API key. Same thing goes for Anthropic. You can get it under this URL by logging in and creating your API key here. This will allow the app to use your OpenAI or anthropic account to 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 GPT4O and ask it to change the prompt to something that aligns with your vision for this application. And once you manage to set up all of this, we're ready to get into the step by step development of the 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 because 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 cogwheel here. I'm going to navigate to advanced 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 names. My little tip would be using underscores instead of spaces. That'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 ChatGPT 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 makes sure it really understands it. And the architect agents now lays out the plan. And this is exactly how application development would work in practice. One wouldn't just start building the app, 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 where 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 built the entire plan. So there you go. As you can see here, it checked if we have 1 node JS and 2 mongo database available to us. As I said, you need those for this to work. If you don't have them installed or an older version, it will tell you here. So again, with these installations I would recommend use something like ChatGPT or Claude to help you through the setup. As I mentioned, that's a one time thing you need to do and then Pythagora will just let you know if this is good to go. As you can see, in both cases node JS and MongoDB 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 and 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 we'll 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 models like GPT4O or Sonnet 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 find 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 bug 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 prompt template creation page. EJS view. Look, I myself am 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 ChatGPT right in the interface to the explorer. And as you can see right here, it's created the 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 the 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, 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 code. 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 Prompt Hub 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 localhost 3000. The result should be the homepage of the application should load displaying AI 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, log in with your credentials. If you don't have an account, click on the register link and create a new account, then log in. 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 and for the password I'll just pick Testing register. Excellent. So now I'm registered. Let's log in right away. Demo user 1. 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 Create template. Let's have a look. Create 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 to this new page, which I was. That worked. So this step is a success. Step number six, verify the elements on the template creation page. Aha. There are no elements on a template creation page. 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 because the agents figure it out all on their own. But at this point, it 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 an 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 this 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 colon 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 error. And third, also very simple, you're just going to say log colon 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 backend 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 codemonkey 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 Anthropic and OpenAI Claude 3.5 Sonnet 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 Claude 3.5 sonnet. 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 Save Template. Add Variable and Save 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 bug 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 works. I press that and now it moves on to the next tasks, 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. Logging 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 prompts 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, test 2. Testing. 2, 3. 3 looks good. I can remove this one. 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 because 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 MongoDB model for storing prompt templates and implement the backend 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 ChatGPT? 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 GPT4 Turbo Preview. And that's an older model that's not even GPT4. Oh, 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 ChatGPT. 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 pop up saying template saved successfully. Okay, so let's have a look. If this works. I'll start up the app. I'm stepping. 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. 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 could just copy paste this into ChatGPT 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 shareable link. Okay, let's have a look. Let's start up the app. Okay. Create templates. So I'll just enter whatever because it really doesn't matter right now as we're developing it. OpenAI add variable, save templates and. Yeah, there you go. It actually worked. Your template has been saved. Here's the shareable 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 shareable link copied to clipboard. Did that happen? Let me test again. Copy. Oh, there's no pop up showing that. So I'll say there's an issue. Click copy. It's does not show shareblink 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, variable description, save the template. We get the same thing. And I'm going to click copy Shareable 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 copied shareable link into the address bar, then press enter. Yeah, I have the copied link, so let's just see how that works. Okay, the shared 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 in a variable save template. 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 per usual. I describe it in a simple sentence 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. 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 asks 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 it says the site can't be reached. 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 backend logs. Send. Copy the front end logs as it asks for here. Now it shows there was an error serving a request. I'll send this yet again and hopefully 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. And variable a 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 you go. So step nine, 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, Codemonkey agents, implement this for me, please. All right, let's start the application up again. Testing. Add a variable. V1. V1 is the description. Save this template, Copy. Okay, new tab. This works. Ah, still not editable. So we go through the same process again. I copy the backend logs here. It wants the front end logs. I copy the front end logs, send it. The variables field is still not editable for me. Maybe I'll say input field because 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 consider 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, I didn't touch the code a single time. I didn't even have to copy paste code from ChatGPT a single time. I just talk to it in natural language and okay, it 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 OpenAI 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. 2 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 shareable hash ID for each saved 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 or could up to auto 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 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 localhost 3000 undefined. So this definitely doesn't work. It doesn't open the new things. 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 colon, 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 shareable 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 shareable hash id. So, yeah, shareable 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 shareable 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, see if this one is present. So this was 7, 5, 8 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, this 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, 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 aspect that comes up. All right, so now we're at an interesting point again where actually there is some issue with starting the app. So it starts it up, but it doesn't automatically copy paste the URL. So I'll have to do this. This does happen sometimes, so just be aware. You can just copy paste localhost3000 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 shareable 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 the 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 sent this. Okay, let's Try again. Copy, paste this manually. Now login submits. 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 say 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 OpenAI 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 the secret key. No worries. I'll delete this right after the tutorial and then I'll do the same for the anthropic 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 dot 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 9 here is the OpenAI API key. So I'll just put it right here. I'll delete all of this. I'll delete all of this and I'll copy paste my two API keys into here. Anthropic, copied, pasted, OpenAI, 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 backend logs as it wants here. Send those, copy the front end logs. Okay. Don't have them right here. And then I'll say the site crashed as soon as I opened the. The shareable template. Sent. I'll 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, and 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 versus 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's our website again. Cool. I'm really glad that it 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 at it. 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 those. So we'll have to do it again. But that's a small price to pay it 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 the root, which is here, that's this one. And I need to add the following lines. This time I 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 right here. Okay, doesn't work. Let's give it one more shot. Maybe change over to anthropic. Sonnet 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 Sonnet 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 is 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 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 accept 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 codes that it wrote. You can actually click these arrows here to see all of the things it did. So look, this is the home page. 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 store in our 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 messages. 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 it do do just that. Let's start the app up one last time. There you go. We have all the different templates. This is fantastic. Right, so now that we built the 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 ChatGPT, 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 these templates because 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. So I don't see the delete button. So 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 bug 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 this extra templates. And there you go, fully functional websites. You could add the variable here or write new prompts like so with shareable links. As you can see, it's fully functional with the prompt template being saved on the homepage. So there we are, last step. I just confirmed 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 Login 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 workflow. 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 built 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.