Build your first app using Grok 3 in 10 minutes (Beginner's guide)

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 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 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 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 going to do is install 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 the grock API to pull in realtime information to your applications which is going to be 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 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 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 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 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. AI this is where you get your API key for grock when you sign up gives you $25 free prepaid credit so you should be good to go to play around with this then we're going to click on create an API key you're going to enter a name for the app so you can call this news app you're going to hit save and it's going to give you an API key that you're going to then paste in so you're going to come back into cursor highlight this and then paste in your new API key let's go back into grock and see what the next steps are so let's update the API route so we're going to modify the route to call the real xai API instead of returning fake data so open the route and replace new contents all right let's copy this let's go back into our route paste that in you can read the explanation but basically what it's doing now is now going to communicate with grock through the API to pull in your news stories which is really cool so now let's update the front end to use this API we can just copy the code here again grock just walking a step by step to get this done we go back to our page paste in that code that has us paste in bada bing bada boom it gives us an explanation of how it works one important thing to note here make sure you go back into your API and change the model to say gr-2 this is the latest model in the API and this will ensure it works so now we got that pasted in we hit save let's go

into our app and test this out so I'm going to see let's see the latest sports news hit search boom okay so we got some sports news this is really cool let's do this it looks really ugly so let's go into grock let's say hey this app is really ugly make it look pretty let's see what grock has to say here grock pretty it up and this is exactly how you should be working with grock is you use it as like a pair programmer right can you fix this can you change this can you make this look prettier make this better whatever you want okay so let's make this look Sleek let's copy this we're putting this in app SL page so we go back over here paste this in hit save oh look at that

that's looking beautiful that's looking glorious wow way better I love this now wow and then if we wanted to do other things from here and make other tweaks we can do it so let's go back into Gro let's say have it give me 10 stories now right so we're changing it we're working with Gro we're tweaking some things now it's going and it's going to give us brand new code this is how you can customize your app you just make small requests it gives you the updated code it's okay so it has new code for our route we come in here we come into the route paste this in once that pasted in we go here America search boom 10 stories right we requested 10 stories now it's given us in this really nice format this is the

power of grock 3 right the ability to do and build anything you want right we have an incredible opportunity right now where we now have this amazing technology that allows anyone to build anything they want the issue is not many people are doing it so if you're one of the few people that take advantage of this new tech and start building really cool things you can win for example I built an AI app a few months ago called Creator buddy it's an AI content app I used Gro just as I'm showing you here I said hey I want to build this app and then it step by-step walked me through building an AI app right and now it's making $300,000 a year you can do the same thing you just need to take advant the opportunity you need to go in make sure you're taking advantage of the best technology having it build ideas just like I showed you here right you do brainstorming for ideas and then you ask it to write the code and then you take the code you put it in and you build it right the people taking advantage of this now are going to win so big you just need to be one of the 1% that takes this video and actually takes action right 99% of people are going to watch this and they're going to turn it off go okay that's cool and then never do anything be the 1% that now after this goes to grock starts building out code ships an app and starts making real money make sure to hit subscribe if you learned anything new make sure you hit like and then leave a comment letting me know what you want me to build next all I do is create educational videos about doing cool stuff with AI see you in the next video