grock 3 just released and is the most powerful AI model ever created what I'm going to show you in this video is how to build your own app with grock 3 no programming experience required we're going to build a realtime news app that actually leverages the grock API so you can pull in realtime data from grock into your own custom app this is going to be sick we are going to build an awesome application no programming experience at all all with grock 3 step by step this is going to be incredible lock in pull up grock 3 next this video so you can build along with me by the end of this video you're going to have an incredible application that you can use for yourself you can have your own application built by yourself where you're getting top news from grock this is going to be awesome lock in here we go so I'm in grock 3 now you need a subscription X go into X get a subscription X premium hit grock over here on the left hand side then select the drop down and make sure you're clicking on grock 3 so the first thing I want to do with grock is actually brainstorm ideas for this app this is a really sick thing you can do with AI that not many people do right most people use AI just to build the app out what we're going to do is actually use the AI as a product manager as well to brainstorm ideas for our app so I come in here help me brainstorm ideas for an application I want to build I'm thinking about building a news app that uses the xai API to give me news we hit enter on that grock 3 is genius so it's going to help us come up with really good ideas for this application that's a great idea a news app powered by the xai API could offer a unique twist and how people consume and interact news we can get personalized news summaries o I kind of like that realtime fact checking news through the X's lens interactive ask the news feature so it's giving us a whole bunch of ideas for a News application we can build out I think what I'm going to want to do here is do a personalized news summary so give the user an ability to search for a topic and then the grock API returns back all the latest news on that subject so I reply back to grock here I'd like to build a news app where the user enters in a topic to a search bar then the grock API returns back the top news story is that topic we are using nextjs and typescript walk me through this step by step as if I'm a new programmer try to create as few new files as possible and keep this simple so it's important to word it like this especially if you're a new programmer that never wrote code before so that it makes it very easy for grock to walk you through building this application so I hit enter on that so one quick prerequisite you're going to need for this app you're going to need a way to compile code I'm using cursor for this cursor is free go to cursor. comom download it allows you to paste in code and run it so get that installed pause the video now go to cursor. comom download it it's free get a free plan come back in here and resume the video so let's set up the project so step one set up the project so we're going to open our terminal and run this command here so I copy this I go back in a cursor I hit control till day to open up the terminal down here I paste it in I hit enter and what this is is going to do is install nextjs nextjs is the technology that's going to back our application this is a very popular framework that powers most web apps today so I hit enter on that I'm going to hit enter on all the default options here so I just keep hitting enter down that's going to install nextjs and typescript for us again this is all really simple I'm letting grock handhold me through building this application and what's really cool that you're going to learn by the end of this video as this Tech installs is you're going to learn how to use apis as well right so you're going to learn how to use the grock API to pull in realtime information to your applications which is going to be really really cool too okay so now that that's done let's move on to the next step here we're going to want to go into our news app so let's copy this command go back into cursor paste that in we're now in our new app we can see the code over here on the left that was all built for us pretty incredible and then let's start our app we paste this in boom that runs let's see what happens here okay looks like it's running let's see what happens when we click that link Boom app running let's go okay so we have our app running we're going to go in here now and start editing the code so we have a really cool news app but if this is your first time running an app you literally just built your first web app congratulations now let's make this really cool as I'm building this also make sure to hit the like button if you learned anything new make sure to hit subscribe as well and then leave a comment Down Below on what you want me to build next okay so let's build out the app so we're going to modify the app to have our search bar and news results so we're going to go into app SL page and put in this new code here so let's copy this we're going to go into app SL page take everything paste it save boom let's go back see what we got news app enter topic to see the news Okay so let's keep building this out here let's add a search bar so let's add a search bar to so users can input a topic Okay so we're going to take this we're going to put in our new code hit save we go back okay we got a search bar doesn't look pretty but we're getting there we're getting there step by step this is what's great about grock 3 is it's handholding us it's treating us like a new programmer which we are and it's helping us build this out so we got a search bar we got a title let's keep it moving and grooving here save and check your browser we hit save all right as you do this too I'm doing this pretty quickly but what's really great here is grock 3 actually explains how everything works I highly encourage you pausing the video going in and reading the grock explanation so you see how all the code works so you actually learn along the way as well you learn how the code works so next time you build an app you can do it even easier all right so let's handle the form submission now when the user clicks search we'll make a call to the xai API simulated for now to store the results all right let's take that pause put it in here paste serve search so now it should be simulating a search okay so top story about USA okay so it's simulating it right I do a search and it shows me three example stories so we're getting there we're getting there all right let's keep it moving save and test it we just did looks good explanation feel free to pause here read the explanation okay so now we're going to start actually building out the API call so that we can communicate with the grock API to pull in real-time news stories so it has us creating a new file an app API news route so let's do that we're back in cursor app we're going to create a new folder API new folder in there news and then a new file in there route.
TS enter so we created that new file and then we take this code we hit save and this is where we're going to be communicating with the grock API which I'll show you how to set up in a second all right now we're going to update the page file again to handle the submission to the API so I'm copying this code I'm going back in I'm pasting this hitting save and as we go along I'm going to actually show you how to customize this to and add really cool things so stick around for that but we're continuing along here with the gr explanation and again feel free to pause at any time and read all the explanation of how the code works so you're learning a lot as you go along too so let's polish up let's add a loading State and clear the input after searching all right let's take this let's paste in the new code this is going to add a loading state so that when you search it actually says loading news which should be cool so let's do this we can do Sports search had loading news there for a second and then it has our demonstration news all right so it it walked us through building out the app now let's have it help us build out the X API so right now it's using a fake API let's have it now put in the real API so I said let's implement the real xai API I have my API key ready let's do this in a really simple way and again as you go along here you can have a conversation with grock so you can say wait let's pause here let's add this let's change this after this I'm going to make it look really pretty cuz it's kind of ugly right now but this is some really cool ways you can conversate with grock I'm going to hit enter and it's going to help us walk through implementing the xai API so we can get realtime news from grock into our app so to keep your API key secure let's store it in M. L so in your project route create a file called n. l okay so we're going to go in back into our project we're going to click new file on our app and we're going to call it n.
local and then we are going to paste in this code now that we got that pasted in let's get let's get our xai API key and put it in there so go to console. x.
