How-To Build Web Apps with AI for Beginners (Free)

In today's video we'll be looking how to build a fully custom and local AI application. We'll be doing this through a combination of multiple tools. But the most important part is that I designed this tutorial to be also accessible to non coders. Meaning if you have no technical knowledge, that is completely fine. And also every single component of this, with one small exception, is completely free. The exception is that you'll be accessing the Anthropic API, which requires you to have a few cents instead inside of your Anthropic account. But except of that, the entire application stack, everything we use except of the Anthropic LLM, is completely free. So everybody can do this independent of your technical knowledge, independent of your budget. You too can build a custom AI application today. That's why so many of them popped up. And today I'll unveil how it exactly works and how you can get this going from the ground up. But that is going to take a little bit of preparation. That's why in the first part of the video I prepared a little checklist that we'll have to go through the to set everything up so we can smoothly sail for this task and get this custom app running on your machine in no time. Before we get to the checklist, I want to thank the sponsor of this video which is going to be a part of our process. It's a coding assistant that is completely free forever to individuals named Codium. It's essentially an alternative to GitHub Copilot that is completely free and we'll be using it as a part of our process because our journey might start in anthropics. Cloud 3.5 Sonnet, which you probably heard of, it's really good at generating code and applications. But then we'll continue inside of an IDE and we'll be using Codeium to assist us to understand and work through this. Because Sonnet has some real limitations, it's really good at generating the code, but once you go beyond one page, the artifacts feature cannot really host it anymore. That's why we go into ide. And also there's severe rate limits. Even if you have the paid version, you can't just copy every single line in there, ask what it does, or add new code to your application. You will quickly run out of files. This is where Codeium is super helpful. It's free and it's a little assistant that lives on the side of your code and helps you understand and navigate through through this process. So without further ado, let's Jump right in and let's talk about the checklist that you need to complete that you need to prepare for us to build this app together. So here's the checklist. You need a few things. First of all, you need Visual Studio code installed on your machine. Also inside of VS code, you need Python installed on your machine. Secondly, you need an Anthropic account. A subscription does help, as you'll be able to generate more, but I'll give you one prompt that will generate everything you need in one shot, and therefore you can also do this on the free tier. Thirdly, you need an Anthropic API key, which you can easily get by having an Anthropic account. And by the way, I'll show you the step by step to getting all the items on this checklist in a second here. Next up, you need the prompt that I prepared for this video. And last but certainly not least, you need the codeum extension installed of your ide. So let's get to these one by one. So you're set up to complete this task. Starting with VS code, you will need to download this. You can get this from the link in the description. I would download the Mac version here, but I already have this installed on my system. The app looks like this. And again, this entire checklist and workflow is completely free. Free. So once you have VS code, we can move on to the next thing, which would be installing Python on our machine. Simply go to Extensions and then here you want to look for Python. Yep, that's it. And here you simply click Install and it will install it on your local machine. Next up, as we're here, we're going to install the Codeium plugin that we'll be using later on already. So simply look for Codium here and here. Codium can also be installed just like Python, completely for free on your local machine inside of VS code. By the way, if you happen to use another ide, which might be the case, codeium is compatible with almost all of them, so that shouldn't be a problem. And that is kind of the hardest part of the checklist, because the following steps are quite simple. So one would be heading over to Claude AI, creating a free account, and then you have access to Claude 3.5 Sonnet. It's limited in messages, but it will work for this tutorial. With the premium plan, you get higher rate limits and some extra features here. Once you have Claude ready, you can head on over to the Anthropic console. Anthropic is the maker of Claude and in this console you can access things like the API key. So here I'll go to get API keys. I'll create a brand new one for this tutorial copy. And then this is also ready to go. Bringing me to the very last point, which is the prompt that I prepared here. I copied it in the description below, so you can simply copy it from there. But this is basically the entirely fleshed out prompt that we'll build to this application. All right, and that's it, that's the entire checklist. So with all of this ready, we can get into the step by step of building this AI powered custom applications that we will run locally on our computer here. So let's begin by opening up Visual Studio code here. And I'll head on over to this first Explorer tab where I will be opening a brand new folder on my Mac. I prepared this brand new folder called YouTube AI App Summarizer. You can have this essentially, whatever. It's just important for you to just navigate to it, wherever it is, you can drag it in on a Mac and then open it up. And there we go. Now VS code is open with our project folder and we're ready to get started. All right, so we'll start our journey by copying the prompt that I provided you in the description of this video over to Claude 3.5 sonnet that we also opened earlier. So paste this in here and simply hit run. You could work with other prompts, but this is really a fantastic starting point for an AI application. You can modify this as you desire, but as you can see, it's already writing the code. And meanwhile we can already get to work with creating the folder. So in whatever folder you are, you'll just create a new folder. I'll call this AI App Summarizer Tutorial. Great. And inside of this folder we will need to create a few files. As you can see over here, this wrote multiple files. One of them is called App, one of them is called Summarizer, one of them is called Style CSS and another one called Index HTML. So we'll go ahead and create all of these files that this requires of us. But we'll do that inside of VS code to get accustomed to the environment already. So I'll just open VS code here again over here in the Explorer I can open a folder and. And then one thing that I love doing on Mac is simply going ahead and dragging, dropping this icon from the finder. I'm instantly inside of the folder that I just created. And now we can open this. Perfect. This is a brand new project and we can start creating files. What I'll do is reduce the size here. And now we can go ahead and create these four files for us. So first of all, we need App py. This is a python file. We need another one called summarizer py. Excellent. And as you can see, these two are actually inside of a folder. So we need a static folder and a templates folder. So I'll create a folder called static and I'll make another one called templates. Just make sure these are not inside of each other, but separate folders like so. Nice. And now inside of templates I can create index HTML and inside of static I'll create one called style css. Excellent. And this is the base framework for our app. Now our next step will be copying over all the code from Claude into this application. So I'll make this as small as possible so we can kind of navigate both of these processes at the same time. But this is quite simple. I click App py and here at the bottom copy contents. Then I head on over to Vs code and inside of App py I simply paste this very brain dead activity. Just make sure that everything goes into the right folder. So copy content of the summarizer file into the summarizer file. Over here. Paste. Beautiful. CSS styles. Same thing. Copy contents styles css paste content. We have one more to go. The index file. This is going to be the web page index HTML. We paste it in here and voila. We kind of did most of the work. There's also a tutorial down here that you can follow, but we'll just do this ourselves as we already created the directory structure. But there is one thing left to do. We do need to run this command pip install flask anthropic. Okay, so I can copy this from here and I can manually write this. And where you will type this into is the following place. You go to terminal up here, new terminal. And here you can just paste or copy. Pip Install flask anthropic. This will install two packages. One of them is the flask package which allows us to really easily create a website. And the second one is the anthropic package which allows us to interface with anthropic large language models. If you're not familiar with packages, they're basically a lot of fancy code and complicated functions packaged into something that's really simple because this is quite complicated under the hood. But here always says import anthropic and all of a sudden our computer knows how to talk To Anthropic's APIs beautiful thing, just go ahead and type pip Install Flask Anthropic in here, hit Enter and it will install the packages for you. In my case I already have them, so it will tell me that hey, requirement already satisfied. But in your case, it will install the packages. In case that doesn't work, here's plan B. Pip 4 free install anthropic flask. I will also have these. And in case none of those work, you will have to follow the troubleshooting guides that I will include at the end of this video. But for now, let's assume everything works. In case you run into troubles, look at the little part at the end of the video that will show you how to deal with bugs. But for now, we installed the packages and we're almost ready to go. And I'm saying almost because we miss one more thing, and that is your API key. Instead of the summarizer file, you can see that Claude API key says your API key here and you have to replace this. I made you prepare your API key in advance. So now we go ahead and we copy this code. Just make sure to keep this private. Anybody that has this will be able to access the API on your account and drain your credits. I will copy paste the API key in here, like so. Just make sure the quotation marks around it are intact, like so. If you have that, we're ready to go, we can save over all of these files. Okay, this is also important. Command S or up here, file and save over this one, over this one, over this one, over this one. Make sure everything has been saved. And now if I go to App Py, I can hit play here on the top right and voila, it's running already. Look, it started a development server here. And I can copy this URL like so and head on over to my browser and see what happens if I open up a new tab and share this URL. Hit enter. This is exciting. Voila. This is our text summarizer. So let's give this a shot and let's just head on over to Wikipedia. Copy this text about penguins and summarize the paragraph and see if that actually works. Paste it in here. I hit summarize. It's summarizing takes a while, just like every LLM. Let's see if this works. Come on, come on. Text summarizer. Yes. There you go. It worked. It used the Anthropic API to summarize this for me. As you can see, it got cut off down here and this is not very pretty looking, so there's definitely some improvements we can do here, but we got really far already. One thing I do want to point out is that for this to work you do need some dollars inside of your impropic account here in the console under plans and billings. I have a few cents left, so this should be good to go for this tutorial. But I think you get $5 for free and then beyond that you can add funds via credit card as you pay for every single request inside of VS code when you're using the API you do need some money there for this to work for it to work with the anthropic LLM. Alright, so that's a great start. And now we have a few options here. Okay, at this point I just want to pause, lean back and talk about what we did because we created this application that consists of a summarizer page, there's an app, and there's also a webpage which it's hosted. This is the most simplistic way you can do this. Certainly a lot of room for improvement. And now you can do these improvements with a combination of tools. Cosanet is super powerful, but it has its downsides, right? If you go in here, the rate limits are quite low, especially in the free version you'll only have I think five or six messages that you can run. So in this conversation already I ran one. Maybe you have an error message, you run into another one, maybe you regenerate once and you're almost done. So what you do in that case is one, you can wait, two you can head on over to VS code. And this is where codeium can come in really handy because codeium has a custom model and it's completely free to use. So here it is, this is Codium and you have three tabs, Chat context and settings. And what you'll mostly be using is the Chat tab. But what I want to point out right away is this context area because this is where Codium takes in the context of your project. And this is wonderful because you don't need to copy paste anything into an external application. It's all in here, just like it would be with GitHub Copilot. But it's free for individuals. So by default it pulls in the current Active document. As you can see, it's aware of everything inside of this app py. But what you can do beyond that is you can add the rest of. For example, if I add my templates folder, all of my pages, the different AI apps that I have And I will build out over the course of this project. It will be aware of all of them and then I can talk to all of that in one. Doing this inside of Sonnet would be quite annoying. You would have to copy, copy, paste multiple files. And if you change something, you would have to do it again. Here you pin the context like so. And then you can go back to this chat function and ask where's the API key for the summarizer? And it will go ahead and answer with llama 3170B. That's the model that it uses in the background, if you care to know that. As you can see down here, this is the base model for the individual flan that yet again is free. And yeah, actually using the context of your entire project and, and this Llama model, it managed to figure this out that yeah, in the summarizer PY file it's actually the Claude API key variable that stores the API key. So whenever you're stuck, you always have this assistant here that is aware of your entire project and can help you out along the way, explain things, etc. But it doesn't end there. I want to show you two more things that this can do for you that will greatly help you, especially if you're getting started on this journey. But honestly, at any level, this is fantastic because even if I close this tab, you can access some amazing features in here simply by selecting all of this text. I could right click and here you have two new options. Okay, Refactor or Explain. Explain is so intuitive, it just goes ahead and takes in all of this and explains the code in chat. Now, you would probably be better off just asking about a specific thing rather than all of the code in here, but it can give you an overview of everything. But if you're curious to, let's say just see what this is about, just go ahead and say explain. And all of a sudden Codium will use the Llama model to explain to you what this does. What is this line about? And you could go through and learn one thing at a time. As you can see, this line imports necessary modules from the Flask web framework. And then it tells you that. And then if you wonder, okay, what is the Flask web framework? Lightweight, flexible and modular web framework written Python allows developers to build web applications quickly and easily with a focus on simplicity and ease of use. There you go, more context down below. No need to use up some of your Sonnet Messages or other LLMs. No need to pay for a subscription. You have it all in here. So that's one thing and another thing that I wanted to show you is this, if I select this, you could actually go ahead and say refactor selected code block. And basically what this means is, you know, add or change something about this code. And there's many options in here, intermediate to advanced developers will know how to use many of the more advanced ones, like various strategies to eliminate bugs or unit testing. Or you could simply tell it to make it faster and more efficient and it will come up with edits on the go. But what I want to show you here is this ability to add comments and verbosely comment this code. I think particularly this one is super good if you're just getting starting out. So let's start with the comments and let's just say, hey, add comments to these lines and as you see it will go ahead. And first it might look daunting, but what did it do here? It added this comment area. And if you're not familiar, comments don't do anything in code. They're just there to add context for you, to orient yourself better. They're essentially explainers, little tool tips. And as you can see here, now you have a custom AI generated explanation as to what this course does in the context of your entire application, because Codeum pulled that in already. So this is great. Look at that. So what does this do? This is the main application for the AI writing assistant. The AI Writing assistant is a web application that provides two tools for users to assist with writing. First tool is a text summarizer. Takes in a block of text and shortens it to make it more digestible. First one is a text summarizer that takes in a block of text, et cetera. You see the point? This is human language as opposed to this being computer language. And Codeium really bridges these two very simply. And as I told you, this refactoring and verbosely commenting is very, very good for beginners because it will go ahead and explain every single line in here and what it does. So for example, what does this do? Right, valid question. Well, it imports the flask module, which is web framework for Python. What does this do? Well, it imports a summarizer function from the summarizer module. It takes a text string and returns a summary of the text. Okay, what the heck is a text string? Some beginners might ask, right, so what is a. I just copied in here a combination of the chat and the commenting. You can figure everything out on your own with a little bit of willpower. And the guidance is in here. So in programming, a text string is a sequence of characters, such as letters, numbers and symbols. And then you even get an example at the bottom. This is a text string. This is another text string. The power of AI combines so well with code, and everybody can start using this. That's my point. Okay, but now let's move on. And the best way to get more is actually using Sonnet and using the conversation you have going. Also, this about Codeium. It's really good at generating explainers and test examples and code snippets, but it's not great at generating entire apps. That's what Sonnet 3.5 is State of the art for right now. That's what we'll be using. So I just did a quick double check, gave it a screenshot of the app and asked it, is this right? And it tells you, yeah, that's right. Then it also gives you some suggestions on what it could do. But I'm actually going to follow up here and I'm going to give it a screenshot of this entire application and we're going to continue our conversation here. We could do this indefinitely, right? But I want to show you one more step so you know how to improve things. And then you can go and use a combination of Codium and Sonnet and VS code to actually build applications without much coding knowledge at all. Right. So with this screenshot, I'll just do a simple intuitive prompt like, let's improve the design to be more modern. Also add a navigation bar and a second app called Essaywriter. And now we'll expand our app to have two different tabs. Fantastic. It's already working. And as we have the base set up right, we have the packages and the apps installed, we have the API key linked, all of this is set, your machine is ready to go, and you can build applications like this and host them locally. Hosting them elsewhere is a different conversation, and there's many tutorials online for that if you want your friends or coworkers to access that. But while I was talking here, it already created all the results here, so let's have a look. It modernized the application. Here's the plan. All right, here's the basic outline on how to improve HTML structure. And now I'll write the simple but powerful prompt. Now rewrite all necessary files and give me a step by step. I could have included this in the last prompt already, but you'll probably, probably want to interact with it intuitively like this. Asking for the step by step is important because it will tell you exactly what to do. You see right here it says let's start with the updated files. So I'm going to have to update some of this. I'll make this smaller again and app py same old deal. I'll copy the code and I'll head on over to app py. Delete all this, paste in the new stuff, save over it. Fantastic. Then updated summarizer module. I'll copy over and go to the summarizer and replace this. Now this will also cause for the API key to be replaced. So I'll just quickly go in and fix that again. Now this will also mess up the API key. So I'll just leave this here at the top. Post all of the code in here and I'll just carry over the API key like so. I think this will be the simplest way. Excellent. Delete save. Okay, what else does it want? Oh, it wants a new file necessary for essay generation. Essaywriter py. I'll copy the contents here, here and in my explorer I will create a brand new file. Essaywriter py. I feel like I didn't write this correctly. So let's double check that. Let me paste the content essay, underscore writer. Make sure this is correct. Otherwise it will not link correctly inside of the app. Essaywriter py. Excellent. And then what else? Index update HTML template. Perfect. Open up this copy, index HTML, delete everything, paste the adjusted version. See, this is how simple this can be. The styles css. Okay, copy that, style css, delete everything and paste the new stuff. Fantastic. And what else does it want? One more thing. It wants a new JavaScript file. Updated one. But we didn't have a JavaScript file. That's weird. So let's just tell it. I apologize for the confusion. You're absolutely right. Okay. Yeah. Just keep the original files and it's generating the code over again. So I think from reading this, it seems like the only thing we need to recopy is the index HTML. So we'll do that. So let's have a look at the code it wrote here. This is the updated HTML template for index HTML. Perfect. Copy index HTML, delete everything and paste. And I believe that should be it. Right. The CSS provided earlier. Update all of these files, ensure everything is in directories. Make sure these things are installed. We did that already. You only have to do that once. Make sure the click Claude API keys both inside of Summarizer and essaywriter. Ha. This is a good tip. I only had it inside of the Summarizer. So copy the API key here. And make sure the essay writer also has it. Yep, right there. Okay, I'll go over and save over all of these. Command s, command s, command s, command s and final check. Yep, those are all the steps. So if I go to app py and I hit play, it should be able to run this. And there you go. We have a brand new local URL. I'll head on over to my browser, open the brand new text summarizer. Let's see what it came up with. And oh, there you go. Text summarizer, essay writer. We actually have two different tabs. It just hops between them. It's not separate pages. Now if I wanted that, I could just prompt it, right? Turn them into separate pages. But I think you see the point here, right? We have the summarizer, we have this essay writer where there's essay topic key points and we can even define a length with this little functionality here on the side. And now you could just flesh this out as much as you want. Look, in the next iteration it tells me to do these things and without even knowing the code, I can do all of it. And for example, if I go into the essay writer, I could modify things like the system prompt, Right? Right here you can see role user content. And here write an essay on the topic and then it takes the topic that we fed it. Include these key points. The essay should be approximately length words long. So I could modify this and use the variables the user gave us in these various points points inside of my prompt. So if I say write an essay full of spelling mistakes and save over this, you will see that if I refresh my site and I say essay topic is penguins, the key topics are fish and icebergs. And I'll make the super short at maybe 100 words. I can click generate and it will do this for me. This is how you customize it. I showed you where to change the system prompt. I showed you how to update the whole thing. And there we go. We have our essay full of spelling mistakes. Penguins are fascinating birds that live in the Antarctic. They are known for their black. You can see the spelling mistakes are here. This works. If I wanted to go further with this, I could implement all of these new changes yet again in here. So we have all of these updates here. But here's my tip. Don't skip ahead. Follow the entire conversation. So what I want to go do here is go to the last message here where it created these new pages and want to implement all of this first. And even though it might be a bit More copy pasting. It's worth it. App py. Head on over here. Delete Paste Templates HTML. Create home HTML. So this is a new thing we have to create in here, inside of templates. So I'll just create a new one, Home HTML, paste it like so. Another one. Create summarizer HTML. So I'll copy the code and I'll create a summarizer. And these are the different web pages. This is going to be great because I'll be navigating between them. And here, the essaywriter HTML, also a new one that I will have to create in here. Essay Writer. Writer HTML. And as you can see, our application is getting a bit more complex here. That's why we do this step by step. CSS file remains the same, and that's excellent. And then I ran this prompt in between saying, make it look modern and minimalistic. So I'll make all these changes too. Let's update the css. Copy that. Going to the css. I think you're starting to understand the process here, right? Home HTML we update. And here it wants to give us the prompts that because it ran out of output tokens, but I'll simply say and say, hey, give me the new files for summarizer and Essay Writer. I don't want to figure out which parts to replace. It can do it. You just need to be aware that the output limit is limited sometimes. And it's already doing it. Okay, there goes the first one. We can already copy summarizer HTML. There you go. Copy paste and then essaywriter HTML. Same deal. Just wait until this finishes copying. Okay. Copy contents Essay writer. And now I'm going to save over every single page yet again, like so. Excellent. Here's all the improvements it made. All right. And then to implement these changes, I need to replace the content. Done, done, done. And then restart the Flask app to see the changes. Okay. And as we did before, we just head on over to App Py. We restarted by hitting play here in the top right. Excellent. And now we can head on over to the browser, update it, and this should be our completed app. There you go. This is the homepage. Welcome to AI Writing Assistant. What do we want to use? The Summarizer over here or the Essay Writer over here? As you can see, this is a fully functional website hosted on our local machine. Now, you can take this full app and host it on the Internet. There's a ton of tutorials across the web on how to do that that goes beyond the scope of this. But let me Round this out with a few more tips and tricks, because the whole building part we just completed, it's done. Look at that. We have a website with multiple AI apps. I think you understand the point that you could extend this indefinitely, add other components, you could add a dashboard, you could add pages to the footer, you could add various interactive elements. Heck, if you even go beyond, you can add authentication and payment processing and create your own SaaS just like this. But this is really where it all begins. And we managed to do all of this without writing a single line of code. And voila, you can see the whole thing working. In case it doesn't, it might just have happened that you replace the code with something that doesn't include the API keys. So just double check your API keys. Always linked in here. Okay, so now we're set. Actually done with that, but we could still improve it. Now, there's many ways to improve this code. I could talk to Sonnet, I could talk to the chat about improving my code. But one great example of what you could do right away to improve this code base and to make it more shareable is save the API key in the environment variable. I want to go into explaining how that works because I have codeium to do it for me. So if I'm in here, for example, and remember I added the context of all the templates on my different sites in here, I can ask how do I save my API key in an environment variable? I have a typo, but it doesn't matter. It works just like every LLM, right? So there you go. It will give you a little tutorial. You could copy the code that it writes for you and then you follow the step by step guide that it gives you to do exactly that. You could do this with anything. So I want to show you another thing and I'm going to actually include a mistake in here on purpose for code to fix it. Okay, so I'm just going to go in here and for example, remove a letter here and all of a sudden you know, there's this yellow underline. But this wouldn't work anymore. So I could either select this and then go to Refactor like so, or I could just click this button above here, coding refactor. And right away I will be refactoring this one code block here. So I can just go and say check for bugs and see what this comes up with. It will look at everything. And there you go. Look at that. It actually corrected the summary and added the second M back in. Now I get the option to accept up here or reject or I can follow up with other commands to continue working. But yeah, this looks good to me. It also made a fix up here. Okay, I'll accept save over this and there you go. This is how you fix errors. You could also do this over the entire document. And whenever something's not working, you can just do this and look at all your code and try to figure out what's wrong. By itself, you accept the suggestions and move on. This is a great alternative to Sonnet as you don't need to use up some of the valuable messages in there and you don't need to switch applications. It's all in here. So there you have it. A custom AI application that runs locally on your device using LLMs from Anthropic. You could easily change that out for LLMs from OpenAI. With the support of Codium, you can understand and modify all the code you have for free as long as you use it as an individual. Just this combo of Sonnet Codeium really started a new era of building applications where you can have no idea what you're actually doing. But it works and that's what matters. And I actually want to show you one more thing, and this is probably most relevant to more intermediate or advanced people that know what they're doing and want something specific. But there's also this amazing function in here where you just go ahead and say command I and it will pull up this code command interface where you can just tell it exactly what you want. So if you wanted to write your print statement at the end of the app, okay, whatever, I just picked something random here, it will go ahead and write the code for for you and you essentially get the power of a LLM right here, which is obviously a fantastic way to write in code as opposed to going over to the browser and copy pasting things from ChatGPT that you generate in there. And as before, we can either accept or reject this. We'll just say accept and the print statement has been added. And if you're writing code, another feature you should know about is the autocomplete here because it can be a great time saver if you're for example, adding another app route as you commonly do within Flask, then you will see that it just goes ahead and suggests the rest of the code here for me, I simply hit tab and there you go. I could just move on with my day with my code and this really makes it quick and easy. So I hope this video was helpful to you. Thank you again to Codeium for sponsoring this video. And I'll see you very soon.