How I Built a Full-Stack AI App in 5 Hours (Agents, Streamlit, Python & More)

in this video you'll watch me attempt to build a coding AI tutor SL assistant this will be something that helps you keep track of your progress generate a road map generate quizzes and check your understanding and generally is something you could use while you're learning how to code now I haven't yet built this project and I want to make this video to show you what my process looks like when I go from idea to a finished application the steps that I walk through and exactly how I solve the different challenges and kind of pick the text stack languages Etc this will be more of a story than kind of a tutorial like I've done in the past so stick around I think this will be pretty cool so first things first before I write any code I always make some kind of basic plan doesn't need to be super complicated I spent about 10 minutes and I wrote this out I just want to get some of the features down understand the languages just have some idea what I'm going to build so I'm not lost when I go on the computer so I just wrote this little document here's a description an AI assistant that can help you track your progress generate quizzes and Sample questions for you and keep track of resources that you've used I wrote down some of the key features like I want to have a road map and the ability to track your progress it can generate the road map for you and you can also track whether you've completed it it's in progress or it's not completed we want to have some kind of resource Hub to keep track of different links YouTube videos maybe PDFs or guides that you're using something like question generation so I really want to be able to generate a question based on some kind of topic and make some kind of quizzes so that you can actually practice based on the stuff that you're learning so my idea is the AI will be able to look at your road map and the different resources that you have and then use that information to generate some context specific quiz questions to make sure you're understanding the concepts that you're going through in terms of the front end I just wrote kind of a basic outline of what I wanted this to look like and I also mocked up the front end with some basic drawings which I'm going to show you in one second and then I also defined the text stack that I'm going to use so for the AI I'm going to use this new tool called parland which we'll talk about in a second for the back back end I'm going to use Python for the front end I want to use streamlit because it's a really easy UI library and then I need some kind of database to store all this information so I'll just go with mongod DB and make sure it's a vector enabled collection so that's my super basic plan and a lot of this stuff could change when I start coding but at least it gives me some kind of Direction on the features that I want to build now what I also did is I mocked up my front end it's really basic and my hand writing is horrible but I'll show it to you here so you can see what it looks like so you can see here we're on the homepage what I've done for the homepage I've just said I want to have like some kind of sidebar here and on the sidebar I want to have like a chat road map Hub and quiz page just to separate everything out on the homepage I'm going to have some kind of like AI coding tutor window where you can just ask any general question and get a quick response then I want to have another page so this is my road map page on this page I want to display the road map I want to have like some topics some subtopics the ability to check off if a topic is completed I want to make it so that if you press on one of these these topics there's like some details that show up on the screen so you can add some notes or something and then obviously I want the ability to add subtopics and add topics and obviously edit these and delete these I haven't added everything I just want to have like a basic idea of what the UI should look like then I have a little chat window down here and my idea is that you'll have some kind of toggle for read and write mode so if you put it in write mode the AI can actually modify the road map and remove something or add something for you and if you do it in read mode then you can just query the road map and ask it questions about it so it has that as context that's my idea we'll see if that works or not but that's what I have so far next I have a page for the resource Hub so my idea here is that you have some kind of resources right so it just displays resources that have a title some kind of asset like a link or maybe a PDF or something and then maybe a short description of what the resource is and then I'm going to have a chat window with kind of that same functionality where you can either have it in ask mode or add mode and if you have it in ad mode you can just tell it what reason resource you want to add and it will automatically do that for you or you can ask it a question about resources that you have and it will use retrieval augmented generation to kind of grab that and give you some contextually relevant replies last thing I have here is this quiz page so I want to have a page where you can just type to the AI say hey make a quiz about the first three lessons in my road map or something like that and then it will generate a quiz for you and you can test it out and see if you get the questions correct or incorrect to be honest with you I have no idea how this is going to go or if this is going to work but this is what I start with some kind of basic plan some idea of what I want the front end to look like and now let's start coding so I'm back on the computer now and it's time to start writing some code now at this stage a lot of people get really confused they don't know where to start so I'm just going to explain to you my thought process on what I want to do first now for me I always like to make sure all of my data is set up properly I have something like a backend API finished and I know the core operations that are kind of vital to the functionality of my application in this case it's kind of the AI components like creating a new road mapap querying about the road map generating quiz questions like there's a lot of AI related features that need to work otherwise the app just doesn't make sense so for me that's what I'm going to start with kind of my data creating the road maps all of that kind of stuff and then integrating that with AI and for this video I'm going to be using parlent now parent did reach out to sponsor this specific video and what they've mentioned is that this is a framework for guided llm agents a common issue I run into a lot when I'm working with a lot of the AI Frameworks I use is it's very unpredictable what the llm is going to do we can write a really good prompt we can refine it a bunch of times but still we can get some really weird responses and it's difficult to handle every single situation that could come up now Parlin told me that this framework really helps with a lot of those issues and that what you're able to do is add guidelines and these guidelines can kind of guide the agent to give you a more predictable better response now unlike a lot of other companies that want to sponsor my videos they just said said hey build something cool with this let us know what you think so I'm going to build with this in this video hopefully it will fix some of those problems and you guys can kind of see how it works anyways that's what I'm going to use for the AI and then I'm going to use mongodb for my database so I'm going to get all of this stuff set up I'm going to start writing some code and I'll keep you up to date on my progress all right so it's been about 20 minutes now I'll give you a quick update now what I did is I just set up the project in order to work with the database so kind of having all of that code in order to add entries remove entries update entries Etc so I started by creating this models.py file which has some pantic models to kind of Define some more strict typing for what I want to insert in the database so I have the different fields for my subtopics my topics my road maps all of that kind of stuff and then I wrote this database class that allows me to create a road map update road map you can see if we go down here get a resource create a resource all of that fun stuff now honestly most of this is actually AI generated what I did is I wrote a sample schema with some of the different fields that I wanted for my quizzes resources road maps and then I just told the um AI here go ahead and generate the code based on these sample schemas it was able to create the models for me based on my suggestions and then this database file I then also had to generate this kind of driver code in order to test all of this where we test creating the road maps creating the quizzes generating U user progress all of that kind of stuff so that's why I was able to do this so quickly because I'm just using AI to generate a lot of this code and obviously supervising it along the way and just making sure that it works so with that in mind all of my data is pretty much working even if I go back here you can see in mongod DB I have some entries that I've added and what I'm going to do now is start working with the AI and seeing if I can set this up as kind of a tooling service that my AI model can use in order to create these entries for me so I just got parland installed and I quickly want to show you its main feature which really differs from a lot of the other AI Frameworks so in a bunch of the other AI Frameworks you use you have to write these massive prompts right where you have to handle every single situation maybe you're parsing the output but you're writing these like really long complicated prompts and you have to keep tweaking them you don't really know if they're going to work properly whereas with parent what I'm learning here is that you can create something called a guideline so what I've done is I've made one here where I just said if the user greets you we want to encourage the user to use this tool for Learning and to be positive so rather than making a bunch of massive prompts you can actually make a ton of smaller more kind of granular guidelines that describe exactly what to do based on a particular condition and then what it will do is evaluate the impact of this guideline and also tell you if it conflicts with any other guidelines that you've added so you know you don't have any um what do you call it contradictions so you can see it's added this guideline now and then I can go test it out so parl provides this like local chat interface just to test out your agent and you can see that I said hey how are you and it said hey there I'm doing great thank you uh I hope you're doing well too I'm here to help you learn and explore feel free to ask me anything you'd like to know so positive like exactly what I said then I could continue adding all of these different guidelines and really fine-tune and kind of guide the agent to give me the exact type of responses I'm looking for and obviously over time we can add more and more guidelines which is what I'm going to do now so I've just been messing around with parland a little bit here and I ended up making a new agent because you can actually separate the functionality into different agents and adding some guidelines for my kind of General chat window that I'm building so if I open this up here you can see this is kind of what I've got so far I just built a basic front end just called it AI chat assistant and what I did is I made some guidelines where if I paste in some code it's going to first ask me what I want to do with that code so sometimes uh you'll see the agents will just like go ahead and try to solve something or they'll generate some new code or they'll summarize it for you I don't want mind to do that I want it to prompt the user and ask like do you want a summary are you having difficulty with this I want it to act more like a tutor rather than just go and try to solve a problem so I added a guideline for that and you can see that it kind of responded based on what I described there and then I told it that if I ask it a specific question obviously answer that question about the code rather than continually asking me what do you want to do so I've just made a few basic guidelines kind of through this on a streamlit front end seems to be working so far so I'm going to leave that as is for my basic AI chat assistant and what I need to do now is I need to start integrating this with different tools and giving the AI the ability to read my database so I'm going to start uh building out some of those other Pages for things like generating the road map and then once I have the road map and the resource Hub then what I can do is start kind of grabbing that information and pulling that into the AI assistant so it can use that for some contextually relevant replies we're really just getting started here but I just wanted to get some of the AI logic done so that's what we'll build now it's been a bit of time now and I'm back with another update this time related to the road maps and adding some agent and Tool functionality so what I've done here is I've added a few different pages in the sidebar so we have home road map quizzes resources and then I've just worked on road map to start because that kind of makes sense we should have the road map before we start generating quizzes or adding the resources and I've actually made it so you can have multiple road maps because I figured that probably makes sense so you can see up here it lists the different road maps you have and then you can view them and you can kind of check off different topics you can add different subtopics here if you want to do that you can add another main topic and then you can of course save the progress but the interesting thing that I did here is I made it so that now our AI agent can generate these road maps for you so if I ask it something like generate a JavaScript frontend developer road map what it can do is generate a new one for me and actually figure out what the schema needs to look like and add it to this page all right so that finished and you can see now we have the JavaScript front end developer road map gives us a description and then we have a bunch of different topics here which are actually collapsible Version Control build tools Etc and we can continue to add to this if we want now basically what I did here is I created a new AI agent which is specifically responsible for generating the road map and I added a guideline to it that just says if the user asked to generate a road map then go ahead and generate a road map however the way that this is able to actually create this and add it to our database is because I've connected a tool to it so I also created this new kind of service which is my database which acts like a tool and then I've connected that to this guideline so we can only trigger that tool if this particular guideline is active now that's really interesting because a lot of times you just give the agent access to tools and it can just use them whenever it wants to and you don't know if it's going to use the tool or not and if it's going to use it in the correct situation so in this case if the guideline applies then it will use the tool and we can specify exactly what parts of the tool we want it to use which is what I've done I can't really show you the command here cuz I already typed it in but what I did is I wrote this kind of service file here which connects to the database class I was working on previously I have this tool right here which creates a road map let me close this you can see we take a title a description and then a Json string defining all of the different topics in the road map I give a bit of an example of what this needs to look like and then I go ahead and create this and use my database class to add this to the database then I just put this tool in a list of tools I provide that to parland to the AI agent and now it knows hey I can go ahead and use this function when this guideline applies and then it adds that to the database so a very cool way to do this and obviously we have other tools here that I'm going to be using later like creating a quiz getting the quizzes creating resources Etc so let's move on and code the rest of this cuz now I've got to work on quizzes and adding the resources all right so it has been a few hours I had some lunch got back to it and I just built out the resources page now for this page I kind of made the ability to have different categories like videos books documentation and then you can just click into a resource you can see a little description some link and then this was added now eventually I would like to have some kind of file upload or something but I think that's going to be a little bit too complex to build out today cuz I do want to try to finish this by tonight uh but that'll kind of be added later all right so we have these and what I've done is I've added a little chat box here where you can use the AI agent to add a new resource and also to query the resources that you have for example if you add like a 100 different resources maybe you don't want to search through all of them and you can just ask the agent and it will tell you about them so let me show you an example of ADD a new resource I can say something like hey can you add a new resource and what I've done is I've added a guideline here in parland so that it requires that I specify the fields that we need for the resource before it allows me to add it so you'll see here in a second it's going to tell me hey you need to provide all of this information and if you look at the left side it says if user wants to create a new resource then check if this is the case if they've uh provided things like the name some kind of asset and the category so as I said it's asking me to provide this the name the type and the assets so I'll go with name data structures and algorithms type let's just go with book and asset we'll just say I'll just put the name okay this is kind of a fake resource but I'm just putting one here I just kind of show you how it gets added so you'll see here on the left of my screen I added another guideline that says when the user provides all of the needed details to create a resource then go ahead and create a resource and I've linked a tool to this the tool that I wrote spefic specifically is here in my service file where if we scroll down it kind of specifies how to create the resource so we need the name the description some ass asset sorry and the resource type and then it goes to my database creates the resource for me and then returns that result so we've linked that tool up and we've also linked a vector Search tool if we want to ask questions about a resource which we'll look at in a second so you can see here this resource has been added now I just had to refresh so you can see it and we've got data structures and algorithms the link data structures and algorithms and the name here obviously not very informative but you can see in the other ones we have links to like a video a description all of that kind of stuff now another thing that I can do here is I can query so I can say can you tell me which resources I have related to Python and this uses the um kind of Atlas search or mongodb search feature which requires some embeddings which I set up where it will go and perform a vector search find the relevant information and then the agent will kind of parse through that and give me a respon response that makes sense so you can see here it actually grabbed all of the resources for me gave me a little description about them and then kind of gave me a link in case I wanted to click into or view them now the reason it's giving me all of these is I have it set up to just by default search for five resources which is how many I have here so if I had more then it wouldn't give me more it would just find the most relevant ones but anyways you get the idea it is indeed working and the vector search um worked properly so that's that on this resources page I know that looks pretty simple but it is a little bit complex to set up because I had to make a new agent had to set up all the guidelines for the agent in terms of prompting the user to give the correct information set up the vector search and now we're going to move on to the quizzes where my idea is to kind of have them linked to a road map and then again you can write some kind of prompt it will then look at the road map and generate some quiz questions based on those topics so with the magic of editing I have returned and I'm going to show you this finished quiz feature now basically what I've done is I've set it up so we have available quizzes you can select different quizzes that have been generated here you can see I had one before if I do something like submit it will tell me which is wrong and which is correct in this case these were both correct if I change it to something that's incorrect you will see just give this one second here that it will tell me which one is wrong and then it will give me an explanation on why that's wrong then I added the ability to generate a quiz my idea here is that you can pick one of the road maps that you have so that we can add additional context to the AI model when we generate a quiz for you and it can see which topics you you've completed which ones you're working on so it knows what to quiz you on and then you can also give it some more details now I've added some guidelines to Parlin here to say hey you've got to ask the user to give some more details on what it wants to be quizzed on like the number of questions the difficulty so if I say something like quiz me then we'll see this will pop up in one second and it's going to ask us to provide some more details so you can see it did exactly that sure could you let me the topic you'd like to be quizzed about also do you have a preference for the difficulty so this is because I gave a guideline to do exactly that now I'm going to say I want this to be on python advanced concepts and a hard quiz okay so let's ask it that and then let's see what it gives us so you can see here it generated a short quiz for us now obviously it's just giving us the text but it also created one using the tool so if I go back to available quizzes I just need to refresh the page cuz I don't have it live updating at least as of now and there we go it's refreshed I have the advanced python Concepts quiz I also have some other quizzes that I generated when I was testing this you can see that it gives us a description and then it has those questions so what is the purpose of the call method in Python which of the following is a valid use case for a python decorator and then we can submit this and let's see what's correct or incorrect and I guess both of them are right to make an object callable to modify the behavior let's make one of them wrong and see what it gives us and you see that we get the explanation for why it is incorrect okay so there you go go that is pretty much the finished project now obviously there's a lot more stuff that I could add to this but I wanted to show you guys what it looks like to go from idea to finish code in just one day this took me probably about 5 hours to code out also because I haven't used Parlin before so I was reading through the documentation and obviously this is quite a bit of code like there's a lot of files that I have written like all of the different streamlit pages right so like a lot of code that we're going through here we have the database we have stuff related to our pantic models we have the service for all of the tool related components we have some code that was testing the database but a lot of this was AI generated if I were to go back even like two years ago this project would have taken me probably a week to build out or at least multiple days and many hours but now because we have the power of AI and we have great AI coding editors like the one I'm using here wind surf it really just makes this significantly faster and most of the code here I didn't need to write myself I just need to tweak it modify it a bit ask the AI to make some corrections and because of an experienced developer I know how to prompt it to give me what I want so I think that's another interesting takeaway from this video like I generated a lot of code here in just a few hours most of which I didn't have to write myself I kind of just had to have a bit of a plan on what I wanted and then I could use the AI really efficiently so that said guys that is going to wrap up this video overall this was a cool project kind of fun to work on using Parlin was definitely really interesting it's a new way of kind of working with AI models and agents that I haven't used before and obviously they have a lot of other features that I didn't show in this video and if you want to check it out you can do that for free from the link in the description you don't need to pay for anything you can just install it using pip and it's actually quite simple you don't even need any login or anything on the site which I guess I didn't mention anyways if you guys want more projects like this definitely let me know and I will see you in the next one [Music]

2025-01-09 13:39

Other news