Most AI apps today actually don't have access to the realtime data. So if you ask something like latest Bitcoin price,

the answer is usually outdated. In this video, I'm going to show you how to fix that. We are going to build a realtime search app and upgrade it into the fully

functional AI agent. We are using the Nex app router and the AI SDK for seamless integration and open router. So

we can use the minimax AI model for free. So you can just follow along this tutorial. So let's just take a look the final project. As you can see, basically

we are going to build two project. First is simple search and then AI search,

right? So let's go back to simple search and I'm going to paste something like latest Bitcoin price. If I hit search,

as you can see, it's make a search on the Google or anything basically. So the result should be the latest Bitcoin price as you can see in here. All right.

And of course, I can just click that. It basically will open the coin market cap and etc. Right? So you can see the link

down here and also let's go to AI search and in here I can do like uh let us uh

let us bitcoin price right or whatever you can see and you can just hit send right here and the AI is thinking right

now. All right as you can see the AI is answer the question. I have multiple source showing different bitcoin price.

Let me analyze this. Right. This is the coin market cap value, the coinex and etc. So that's really cool, right? So

yep, we are going to build this one. So let's just get started. So I'm going to run npx create next app atus and the application name. I'm going to say AI agent ser API. So let's just hit enter.

On the app/page.tsx, I just paste this really simple UI. As you can see, we have this query state, right? This

basically will get the input value. So the question now is how do we get the realtime data from Google, Yahoo, Bing

and Nexodor. This is a good time to talk about the sponsor of this video which is SER API. If you are building AI apps that need real-time data from the web,

there's always one annoying problem which is scrapping. If you ever try scrapping Google result, you know it's not fun. you have to deal with capas and

proxy red limits and things can break at any time. That's actually why I'm using SER API in this project. SER API is

real-time search API that let you fetch data from Google, Yahoo, Bing, and more in a clean structure JSON format. So

instead of worrying about scrapping infrastructure, you can just make a simple API call and get exactly what you need. In this video, I'm using it to

power an AI agent with real-time search data so it can give more accurate and up-to-date answer. This is really useful if you're building AI apps, agent,

keyword tools or a dashboard that need live data. For example, you can use it for fetch search result for AI agent,

get structure image data for training models or even pull research data using their Google Scholar API. You can get

started with 250 free credit by clicking the link in the description or scanning the QR code on screen. This video is

sponsored by SER API. Thanks again and now let's continue.

So basically you need to have the SER API key. So you can log in and go to dashboard and this is your API key,

right? Just copy and then go back to your project and in here you can create the env.env.local.

local and then just paste that um value right here ser API key and paste that your value and you're done. So inside

the handle search function I'm going to run try and catch and as you can see in this try basically I'm going to call API

route API/ search. As you can see it make a fetch to the API/ search and send this key as a query and then set equals to the end code URL component query.

Query is basically whatever you're typing on this input field basically right great. So now we have to create

the API/ search route. So I'm going to copy that. Go to app in here and create road.ts file. Here we go. I'm going to

paste this uh function get basically get handler because we are going to make a get request in here right and then we

grab the query value by using search param.get key as you can see this basically the way we send the value

right API/ search um key set equals to hello and then we can grab the query value in here. So first we need to

validate that if the query is empty we just return this query is required and now it just return this success to true

right just try to see what happen so now I'm going to console log the data so we should see like a success to true right

if I click search as you can see now we have this success to true it works great so now how we can get the data from the

SER API it's pretty simple here inside the try I'm going going to fetch the SER API in here. As you can see, I create variable called search respond. So,

equals to wait for fetch http/serapi.com search.json. And then this the query value. And you have to paste your API

key as well right here. And then now you have the data. Right? Now we have to send this data into the page right here as a respond. But before that, I'm going to make sure if something wrong happen.

So I'm going to add this condition. If the data do error is have a value I just want to return this next respond error

with the data error value and the status is 400. So now basically we can just do like result right set equals to data dot

organic result the data should become from this search respond.json JSON,

right? So, let's just try here. I just want to say like uh latest bitcoin price and I'm going to say search. And now we

should see the data on the console hopefully. As you can see, we have this 10 result in here, right? It's pretty nice. But I like to format the result.

So that's why in here I'm going to create another variable. So let's do extract format organic result top 10. In

here I create the result um variable and basically slice this and then create the title and link and then snippet. So now I can just put the result right here.

Right? So now we just have this title,

link and snippet value. So let's just try that again. I'm going to click search. And here we go. We have this result 10. As you can see, we have this title uh snippet and the title, right?

That's what I want because now we get the data. Of course, we can just store that data on the state. I'm going to create another state called result and

error. So let's try to create this type of search result in here. We know the search result. It should be have like a link and t link and title and snippet.

Right? Great. So in here what we have to do first I'm going to check if something error happened. As you can see I just check if the data error have a value.

Set the error to data. That's it. And down here, I'm going to set the data the result into the result um state. Here we

go. So, we can just set result to data dot result. Here we go. Great. So, if something wrong happen, yep, we can just

uh set the error to that uh value just like this. And finally, we can set the

loading back to false. Right? So now we have the result value and then we need to render that result on the UI of

course. So first under the form I'm going to put this condition if the error have a value just render that error um on the UI. So anyway I just want to

paste this right here. As you can see it's basically have this space y4 and the result do map. As you can see we have this div. Really simple. So let's

try to see what we have in here. I'm going to say like uh Bitcoin price

lettuce or whatever. So I'm going to click search. And now we should see the data right here. Right? It just rendered. It's pretty cool. This is live

data basically. So now we are going to create the AI agent SER API. As you can see in here, I create uh app/ AI/page.x.

This is the AI search page. This this is just really simple. uh you can just generate this using any AI basically and

the result is should be look like this right and now for example I'm going I'm going to put the dummy messages value

like this as you can see we have two object right now uh ro user and ro assistant right this is the parts uh

this is what uh user asking and this is the assistant or the AI response so as you can see this is the result right the

UI is just really simple So now how we can use uh AI in here. So basically we're going to use AI SDK

right you can go to get started and use this Nexjs app router and then now as you can see we have to install the uh AI and also AI SDK/ React. So I'm going to copy this right here. Right. Just copy that. Paste that to the terminal. So

basically we are going to use a hooks called use chat. Use chat is basically react hook from AI SDK. So I just want

to copy and paste that like so. As you can see the use chat is basically come from the AI SDK/react and what we get from use chat is

messages. messages is array of chat messages and send messages is function to send message to the AI and then the

status is have idle submitted and streaming right and if something error happen I just running the on error and

send the set error state in here to the error message and that's it so let's just take a look at this code look like as you can see if the message is empty

show this AI agent title and this description as well if we have the message it should be render this chat at

messages area and as you can see down here if the status is submitting show this thinking if the error have a value

show the error and if empty state show this ask me anything and this is the form basically in here basically we need

to run the send message send the text into the input input is whatever I typing on this input field right so I

just want to give some comment in here it's basically will send message to the AI via use chat hooks but of course it's not yet works As you can see in here, if I uh for example say hello. Of course,

this is not yet working. As you can see,

we have this all of this error because now we have to create the uh API route.

So here on the API, I'm going to create a folder called chat/road.ts.

So in here we have to create like a post function. So first we need to get the open router API key. Go to open

router.ai AI and I'm going to click the explore models and on the prom pricing I just want to see the free pricing in

here and as you can see there's a couple option in here that you can choice but I like to using the mini max. Uh so let's

just take a look the minax where is that this one right here. So I'm going to click that. This is the model name that we can use right we can just copy and

paste that. So you can see the pricing is free and you can go to quick started in here and generate the API key. But before that, let's go back to the AI

agent and search for the open router because we are going to use open router. So we have to install this open router/

AISDK provider. So I'm going to copy that. Go back to the terminal and I just want to paste that in here. Right? So let's take a look how we can use that.

As you can see this is the way we initialize the create open router. So let's go back in here. I already create this post handler. Right? And I already

initialize this open router on the top right here. And also uh this is the way we grab the messages from the front end.

And then in here I create the result uh variable and then paste the stream text right stream text basically come from the AI. And then for the model I using

open router and paste the name right here right the minimax name. So you can just copy this one and paste that right

here. And for the system you can just give any name of your AI like you are chan AI a smart modern etc. So this

messages is basically chat history. So we give AI context. So the next thing what we miss is basically the open

router API key. You can just go back in here and click generate API key. After you create your API key, just copy the value and then go to the env variables.

And then in here, you can just create the open router API key and paste the value. Just that's it. And now we done.

So let's go back in here and let's try to say hello. Hit enter and let's see.

As you can see, the AI is thinking right now. So let's see uh what the respond. Hello, how can I help you today? Right,

it works. So I can say like okay what is your name right? So the name it should be Chan Chan AI because we send uh into

the system you are Chan AI. So let's just take a look. As you can see my name is John AI. I'm a smart modern and etc.

It just works. So how if I asking like a latest bitcoin price I'm going to click send. The AI is thinking right now. And

as you can see the result is look like this. I'm not sure what the hell is this but anyway the AI give you like a bad respond. I'm not sure what happened. So,

let's just try to go back to the result variable in here and I'm going to paste this uh right here. First, I'm going to

paste the stop when right stop when set equals to step count is five. So, this basically will allow the multistep tool

calls and then in here I'm going to paste the tools objects and then send the search. Right? The search should be

have a description, right? description is uh search the web for current event fact or realtime information and then in

here uh we have to put input schema basically so that's why we need to install the zot npm install zot we have

to import the z from the zot and as you can see this is the execute this is run when the AI decided to call these tools

the result is returned to AI not directly to the UI so we give the AI context right we give the AI this

information basically as you can see it's Mecca fetch to this URL which is on the SER API and then we grab the search

data this is the data and we send that data into the AI so format and return result to AI AI will use this to

generate its final answer so we can just save that and let's go back right now and I'm going to refresh just make sure everything is up to date so now I'm

going to say latest uh Bitcoin and price. So let's try to click send and see what happened. Hopefully now we have

the result. So as you can see the AI is give this result based on the search result. I can see multiple source showing slightly different bitcoin

pricing and anyway uh at least we get this respond right this is the life live life live data from the uh Google and

etc right we have this data pretty pretty cool. All right so that's it for this video. Thank you so much for watching and see you guys on another

Sync to video time

Build an AI Agent with Real Time Data Next js + SerpApi