Vercel AI SDK 3.0 | Generative UI | Stream React Components from LLMs To Chatbots

all right y'all in this video we're going to be going over the AIS SDK 3.0 from versal which has the generative UI support now so you can generate UI on the Fly um essentially it's just pre-built UI components and then you ask the LL and it passes the props in to go down to the component so it's pretty simple to do uh we've been doing this at Allison before this came out um when you ask it to draft an email for you you see the card pop up it has the the two line filled out the subject line filled out the body filled out um and it's all connect connect it already to your Gmail account so you can send it off so we've been already doing this before this came out this just streamlines it and makes it a little bit easier to use with the llm so we're going to jump into it and I'm going to show you guys how to get this set up and how to use it today v0 is a generative UI platform where you can ask it a question and it will generate a component for you and I'll show you guys what that looks like real quick so this is VZ you just got to go to v.d um over here you can pick your generation mode if you're you're on the Premium plan you can get higher quality Generations um so and I guess you can upload an image as well so we'll just click e-commerce dashboard see what it does and we'll start seeing it generate okay so over here got the side looks like this is the active tab okay products customers analytics okay okay the hovers nice table oh okay nice okay wow not bad and you can see it's creating three different versions over here so you can see there was no search bar up here there's a search bar on this one this toggle moves down nice and these are done C is still generating all right so it does look good not too bad uh for for an AI generated UI in a matter of look like 30 seconds or 40 seconds or so so not too bad um you can also like edit this and you guys can make changes to it um like see make the text larger change the colors so let's just say dark mode and we'll see what it does um with the AIS SDK since they are pre-built components in the future I think it would be pretty cool to see v0 uh integrated into it where it can create these same components but like on the fly so that way you don't even have to build out your components anymore it just generates like the components for the user as they're asking for something which I mean that would would be a lot harder to do um because like you don't know if the data is always going to be accurate coming out from the llm um or it's going to be like in the right format of the right structure to put it into like the card that you would want it to be in um or being able to have the information spit out to the user accurately consistently over time I think there be there may be an issue with that this dark mode doesn't look very good I thought it would have made it like black and everything but it's all good so we're going to jump into the asdk right now um and start using it and show you guys how we can generate a component inside of the chat bot okay first we're going to use is the demo so let's just ask it what are the trending stocks and then we get apple Google Tesla oh okay I guess it doesn't let me click on it okay let's get to know let's just run that again okay and then let's say can I buy Apple okay and you can adjust your shares right here and let's just say I only have $2,000 how much can I buy okay so let's think I have to I have to complete the purchase of it okay so then just simulates you purchasing it so if you have this card connect to the back end to like your broker if you has a building on application this will be able to actually successfully purchase uh the shares as you're asking for it because you'll be able to create these components to where it connects back into the API so it actually works and all these would actually be successful you can actually purchase it obviously you'd have to add in like other air handling and things like that if they don't have the balance to be purchasing those shares and stuff like that but it's not too bad um we're going to actually get this up and running and use it ourselves locally so let's get into that all right so you just need to clone the GitHub repo it's the versal AI repo so once it's cloned you're just going to open it up it's in the ex examples and it's this next AI RSC so what you're going to do is you're going to open your terminal up and we're just going to CD into that all right so once you're in here you're going to want to run npm install so that way we can install all the node modules all right so now you're going to run mpm run Dev very simple let's get this server loaded up and now it's running on your Local Host I have something running on Port 3000 right now so it's going to be on Port 3000 And1 if you don't have anything running it'll be on Port 3000 so you're going to visit that with your Local Host so let's just jump right into that so now we have it loaded up it's the same thing that we saw on the website um very simple so what we're going to do is we're going to go into the code and now we're going to dive into it a little bit see how the components are working look at the structure of everything and then we're going to use it ourselves locally as well all right so over here we have the page so you can see the chat list empty screen um it's just the form and the text area so like this is the chatbot area essentially so what we're going to do is we're going to go over to action and in here we can see everything so in the EMV file you need to add in your open AI API key so that way you can use open AI to make the API calls um almost positive you can set up the local server as well to run this um if you have a function calling llm as well so what we're going to see here is a stock trading conversation um they're using GPT 3.5 turbo um and then they show what functions it has and just gives a little information that it says if the user don't wants to sell a stock or can't complete a task then let them know you're a demo and you can't do that um so as we scroll down we're going to see the functions show stock price the description then the parameters and looks like we're using Zod for this and as we go down we can see everything all the formatting for all the functions as well and as we come down here we can see we get the bot card and it shows a stock skeleton and then the stocks right here so this is if it's getting called for the list stocks and and then if we go down we have the get events and then show stock price on the function call same with this one can see has like a lot of air handling if there's an invalid amount and things like that so that way it's it's good to go so yeah I mean it it isn't like a UI that's going to be at on the Fly for you it's going to be pre-built UI you're going to have to build these out um we're going to go and look at the cards right now like we'll go over here to the llm stocks and we'll just look at the stock card we'll scroll the way up so we can see it passing the name the price the Delta and then price the time so then it has the history as well that it gets and then it shows this right here this isn't the actual closing time this looks like it's hardcoded in but you do get the price and you get the name and as we scroll down there some svgs in here so yeah I mean personally like it's nothing really new that they came out with it's more of just easier to use use this like it's not like a new technology or anything like that it's just easier to integrate your UI components with the llm as long as it has like the function calling capabilities but they also said that you can parse over your data so like if it's not formatted with function calling or like you get you can still get structured output from your llm you can format it and put it in there and make it work still so after looking at this a little bit harder you go and notice this that PR is the price and the Delta end so this is not actually actually accurate it's asking the model to come up with the price and come up with the Delta so you only thing that you would want for the stock price is you would want to remove these and then you want to go into the card for stock and over here where we're getting the price in this we we need to make a call to an API so we can get the real time stock price not have the llm just give a hallucinated price for us so that's not what you want to do so it's very simple to do you can fed straight from Yahoo finance if you want um or you can use a different API that allows for financial data um but it's pretty simple to do you would just pass in the symbol only and then you would get the information back out and You' pass that price on and then that would be the information that goes on the card not this so because this is just fake information right now for the demo okay so we added in the fetch stock price but I had to change it so we made an API route in the back end CU I forgot um you can't fetch directly from the front end because you get cor errors um so I just made a quick API route um you're just going to add in the this right here and then the symbol is going to go in as one of the query parameters and when we come in we'll be able to console loog the data as well so you can see it um and then we have the price so over here in the route it's just fetching from Yahoo same same link passing the symbol and then down here we get the data out and we're going to pass back the price so pretty simple and I'm going to show you guys how it works right now okay so let's ask you what the price of Amazon is now should be 17822 yep that's correct we can just double okay so we can see it's 17822 so it is correct all right y I hope this video helped you guys out and gave you guys more insight on how the aisk works to generate UI components I'm looking forward to seeing this in your guys applications we're already using this at Allison so you guys will be able to see this in live and working in our application so if you guys are interested in that please feel free to visit allison. and join the wait list really want to be first in line to get in the beta access then just shoot us an email at info. allison. and we'll help you guys out there and we'll move you to the top of the list if you enjoy the video drop a like comment and subscribe and I'll see you guys in the next one

Channel: Isaiah Bjorklund

Views: 3,667

Keywords: AI sdk, vercel ai sdk, how to use vercel ai sdk tutorial, vercel sdk ai, vercel, nextjs, openai, generative ui, generative ai, vercel ai sdk chatbot, vercel ai, vercel ai chatbot, ai sdk 3, chatbot, llm, vercel generative ui, stream react components, react server components, gpt3, gpt4, vercel ai sdk demo, artificial intelligence, nextjs 14, next js 14, allyson ai

Id: 52YxF0s8eE8

Length: 12min 26sec (746 seconds)

Published: Sun Mar 03 2024