Insane AI Power 🤯, Local AI Apps with React and Gemini!

Google's adding AI everywhere including inside of the Chrome browser you can now actually create a local instance of an AI that runs without being connected to the network inside of your Chrome so you can make AI requests inside of chrome without having to go to any external API it is really cool I'll show you how to sign up for Early Access and how to use it in some real world situations let's get right into it [Music] there's two different ways to get started using this in browser AI one is to do what I did was is to fill in this form from Google that sets you up as an early developer preview of the AI another way is just to follow versals instructions that tell you exactly how to enable it in a chrome Dev build both of these things get you to exactly the same endpoint I should warn you that it's a 22 GB model download so you should keep that in mind depending on your connection speed of course that might take a while let's go take a look at the first application that we're going to build using this in browser AI all right in the description for this video right down below where you'll find all the information on my themes and my fonts and everything else you'll also find a link to this code there are a couple of different projects in there there is the recipe AI which is what we're looking at right now and there's also a code AI which we'll look at in just a bit to show you even more of what this AI can do so I'm in the recipe AI project right now it's a vit project running react 18 I'm going to use node 22 for it and let's just bring it up and see what it looks like all right what we've got here is a Content site and on that content site we've got a oatmeal raisin cookie recipe and we want people to be able to ask the AI questions about this recipe so let's go take a look at what we got so far so over in the recipe. JS file inside of the project we've got our recipe for our oatmeal raisin cookie and then over an app we bring in that recipe and we render it as markdown okay so the first thing we want to do is try and connect to the AI so I'm going to bring in a use effect for that and I want our use effect to run when this component loads so next we want to know is the AI available so to do that I'm going to call window. a and then inside of that can create text session and I'll just console log that out and let's have a look so we bring up our console then we can see that we get back up promise so let's await that promise and of course we can't use await since we're not in an asiz function so let's create one of those all right what's it say all right now that promise from can create text session has resolved to give us readily meaning that our AI is readily available to take prompts now there are a couple other things that can come out of there including no and after loading but readily is what we're looking for although in this case we will take anything of the no so we're going to want to look to see what the value coming back is and if we can create a session let's go and create a session and do a prompt so we'll take this available and we'll see if we're not no then first we'll create a session to do that we'll a wait AI create text session and then we will prompt it and see what we get back so we'll prompt it to say hello and we get back hello there as an AI language model I'm here to assist you now we do in this process get some spous generic failures this is really early days for this AI I would not put it into production today it's just something that we can play around with to see the potential of what AI is going to look like locally right here but there you go we're calling out the AI so now that we know this works let's make it practical let's connect it to this recipe and start being able to ask this AI questions about this recipe to do that the first thing we need to do is create a reference to that session and hold it so we'll use us ref for that so create a session ref and then we'll set its current to this session now I also want to make sure that we don't do this twice so I'm going to go check to make sure that we aren't already set okay the next thing we need to do is create an input field where folk can actually like type in their question so to track that we need a UST State we'll call that question let's go create an input control so this will just be a controlled input of type text let's take a look at it in the browser and yeah there you go looks good looks a good start so now when we type in a query if we hit return then we'll want to go and send that to the AI so let's set up an Onkey up call it run query it's going to take an event and we're going to be looking for the enter key and then if we have a current session we'll then engineer ourselves a prompt that will then send to the AI and that prompt has everything it needs to know to answer this question so what we want in terms of a response the recipe for context and then the question next we'll call The Prompt method on that session and we'll get back to response of course we need to await that but we're not an async function so let's fix that all right looks good and let's take a look at what we get back and let's try it out so bring up the console again are these is good for me all right and we get back that oatmeal raisin cookies contain 10 gram of total fat and it was just that fast pretty cool right now let's go take a look at that API for a second now a couple things to note here first we're not sending an array of objects like we do with say the open AI API where we go and have a set of objects that contain a role and a message we're just giving it a straight string prompt like this and in fact even though we say we have a session none of the session data is stored between each prompt so we really don't have a fully running session here if you have a history of questions you actually have to just keep combining them into the prompt and there is a token limit on the prompt so I would say this is a little bit Limited in terms of its use case in comparison to other apis but it's also really easy to use so if you want to start getting into AI I think this is a really good starting point the other thing to notice is we're not getting back a stream of responses like we do with other AIS but we can can actually get that to get that instead of prompt we use prompt streaming and we give back a stream and with that stream we can use the awesome 408 to get chunks from that stream let's go take a look at what we get back from that so let's try this again and now we can see that we get a stream of building responses now in the documentation they do say that this format is going to change this is what we currently have so to put this actually into the page we need some state to store that so at the top I'm going to create a new piece of State called query result let's go and set our query result to that chunk and then down below our input we'll use markdown again because the the values do come back as markdown so let's say save and see how we go so I'm ask a more complex question here can I use whole wheat flour instead of allpurpose flour apparently you can according to this AI but the cookies won't turn out as chewy let's go fix our formatting a little bit now I do want to have a full conversation with this including history so let's go and Implement on that so I'll create a new piece of State called history and then down my run query we want to hold the complete response so let's set that to response and then when I'm done I'm going to reset that career result and then set the history now that we got our history let's bring it back into the prompt by just adding it into the prompt here's the previous questions and your responses but of course we also want to render what the history was so that I know what my conversation looks like let's bring that into our div we'll just map through our history and then put that out and let's get it a try are these good for me okay they're healthy no I mean really healthy oh okay you bet all right well Gemini seems very adamant that these oatmeal raisin cookies are very healthy for me I'm not sure what it's on but okay anyway one more thing to do before we are finished with this I'm going to just go and set the current question to an empty string once you ask it and I think that actually completes this very nicely let's try it out one more time I'll ask about flower and yeah there you go looks good all right well it looks like Gemini is really good at understanding human things like oatmeal raisin cookies is it as good with looking at code can we upgrade our code documentation to have ai functionality inside of it that's local let's find out so in that same project there's also codee AI let's go take a look at that this is essentially exactly the same project but we use code instead of an oatmeal raising cookie let's bring it up and see what it looks like so now we've got a SQL create table function in our documentation it creates a table for recipes let's see if we can rewrite this code so that it stores chat messages instead of recipes and yes we can it does a really good job with that I haven't tested the limits of the Gemini AI I don't know which languages support or any of that but I think actually this is really cool and it's would be a really interesting thing to see integrated into documentation all right well I hope you've enjoyed this quick look at this Gemini AI That's built into Google Chrome now if you have any questions or comments be sure to put that in the comment section right down below and if you're into advanced topics like this be sure to check out my upcoming Course pro nextjs dodev we are in the final stages of getting all of that content ready right now but there are two free tutorials available for you if you just sign up for the newsletters the tutorials are on State Management and forms Management in nextjs app Rider to nothing like it out there dig in and enjoy it's free of course in the meantime if you like this video hit that like button if you really like the video click on the Subscribe button and hit that Bell and be notified the next time a new blue collar coder comes out

Channel: Jack Herrington

Views: 14,709

Keywords: gemini, hugging face, gemini ai, gemini google ai, google ai, ai, ai app free, ai app generator, react, react native, react js, nextjs, react next js, node js, gemini nano, react 19, nextjs 15, react server components, react conf, next 15, react 19 compiler, react use, react 18, suspense in react, react lazy, suspense nextjs, react router, react router suspense, jack herrington, ai app tutorial, ai application development, ai application tutorial

Id: EspenFj1EaE

Length: 10min 26sec (626 seconds)

Published: Mon Jul 01 2024