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 inside of your anthropic account but except of that the entire application stack everything we use except of theic llm is completely free so everybody can do this independent of your technical knowledge independent of your budget you two can build a custom AI application today that's why so many of them popped up and today I'll reveal 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 and that's why in the first part of the video I prepared a little checklist that we'll have to go through 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 co-pilot 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 codium to assist us to understand and work through this because Sonet 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 codium is super helpful it's free and it's a little assistance that lives on the side of your code and helps you understand and navigate through this process so without further Ado let's Jump Right In and let's talk about checklist that you need to complete 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 andropc API key which you can easily get by having an andropc account and by the way I'll show you the step byep 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 codium 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 will download the Mac version here but I already have this installed in my system the app looks like this and again this entire checklist and workflow is completely free so once we have vs code we can move on to the next thing which would be installing python or our machine we simply go to extensions and then here you want to look for python yep that's it and here you simply click install anded it will install it on your local machine next up as we're here we're going to install the codium 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 codium is compatible with almost all of them so that should 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 claw. creating a free account and then you have access to clae 3. 5 Sonet 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 CLA ready you can head on over to the anthropic console anthropic is the maker of CLA 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 will build you 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 the 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 Sonet 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 summarizer one of them is called style. css and another one called index. htm 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 accustom to an environment already so I'll just open vs code here again over here in the Explorer I can open a folder 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 so 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 dopy 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 instead 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 CLA 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 deed 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 all recreated the directory structure but there is one thing left to do we do need to run this command pip install flask and Fric 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 mopic package which allows us to interface with the mopic large language models if you're not familiar with packages they're basically a lot of fancy Cod 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 mopic apis beautiful thing just go ahead and type pip install flask mopic 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 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 CLA 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 make sure everything has been saved and now if I go to app. by 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 it 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 text summarizer yes there you go it worked it used the Fric 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 improp 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 VI 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 all right 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 web page which it's hosted this is the most simplistic way you can do this there's certainly a lot of room for improvement and now you can do these improvements with a combination of tools CU Sonet 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 codium can come in really handy because codium has a custom model and it's completely free to use so here it is this is codium and you have free 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 co-pilot 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 so for example if I add my templates folder all of my pages the different AI apps that I have and I will buil 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 son would be quite annoying you would have to 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 3. 1 70b 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 FL that yet again is free and yeah actually using the context of your entire project and this llama model it managed to figure this out that yeah in the summarizer dopy file it's actually the claw 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 rightclick and here you have two new options okay refactor or 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 then it tells you that and then if you wonder okay what is the flask web framework lightweight FL fible 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 Sonet 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 advance 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 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 Cod does in the context of your entire application because codium 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 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 Etc you see the point this is human language as opposed this being computer language and codium really Bridges these two very simply and as I told you this refactoring and verbosely commenting is 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 a 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 copy it 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 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 Sonet and using the conversation you have going I'll said this about codium 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 Sonet 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 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 Sonet and vs codes 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 SE app called essay writer 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 co-workers to access that but while I was talking here it already created all the results here so let's have a look it modernize the application here's the plan all right here's the basic outline on how to improve HTML structure and now write a 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 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 dopy I'll copy the contents here and in my Explorer I will create a brand new file essay writer dopy I feel like I didn't write this correctly so let's double check that let me paste the content essay uncore writer make sure this is correct otherwise it will not link correctly inside of the app essay writer. 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 Ure everything is in directories make sure these things are installed we did that already you only have to do that once make sure the claw API Keys is both inside of summarizer and essay writer 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 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 flashh 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 wrer I could modify things like the system prompt right here you can see roll user content and here write an essay on the topic and then it takes the topic that we FedEd 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 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 this 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'm going to go do here is go to the last message here where it created these new pages I 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 su Mizer and these are the different web pages this is going to be great because I'll be navigating between them and here the essay writer. HTML also a new one that I will have to create in here essay writer. HTML and as you can see our application is getting a bit more complex here that's why we do the 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 and it's 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 it summarizer HTML there you go copy paste and then essay writer. 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 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 updated 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 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 SAS just like this but this is really where it all begins and we manag 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 it doesn't include the API key so just double check your API Keys always linked in here okay so now

we're essentially done with that but we could still improve it now there's many ways to improve this code I could talk to Sonet 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 sharable is save the API key in environment variable I won to go into explaining how that works because I have codium 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 V 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 codes that it writes for you and then you follow the stepbystep guid 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 codium 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 codium 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 it will 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 Sonet 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 mopic you could easily change that out for llms from open AI 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 Sonet plus codium 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 codium command interface where you can just tell it exactly what you want so if you wanted to write me a 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 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 chat GPT 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 write in code another feature you should know about is the autocomplete here because it can be a great timesaver if you for example adding another app route as you common and 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 codium for sponsoring this video and I'll see you very soon