Anyone can build GENERATIVE UI with AI SDK 3.0

hi I'm Raj if you haven't been to my channel it's great to see you here if you've been building AI apps for the last few months you might have heard about this Library called AI SDK it's built and maintained by versal and it's actually a super neat library that can help you build AI apps on typescripts with some nice Integrations to a lot of llms they've just announced a new update to this library and I think the update is actually quite big and also right before we understand why there's a dat is Big let's take a look at another AI tool that they built in the last few months this AI tool was able to convert text prompt into react components and not only that it was also able to stream react components straight from the llm output with that in mind what they've done is they've essentially open source the streaming algorithm that they've implemented for v.d into AIS SDK they've also added some additional apis and introduced some new Concepts for us to easily build Interactive AI apps if you take a look at that latest article about the AI sdk's update they've said that with AI SDK 3.0 we are simplifying how you integrate AI into your apps using react server components you can now stream UI components directly from llms without the need for heavy client side JavaScript this means your apps can be more interactive and responsive without compromising on performance if you look at the backstory of the react server components or rsc's as you call it and how it was launched with massive changes to the nextjs framework I would say it was quite messy and people were not really convinced of the tradeoffs between buildin components on the server and introducing additional complexity now with this new update to this AI SDK it seems like versal has found the perfect use case for react server components now let's talk about the actual update the update is just an introduction of a new paradigm called generative UI and this generative UI is composed of two concepts called AI State and UI State the AI state is a Json data that you typically pass into your llm as an input and it can be accessed on the client side and also the server side and UI state is a collection of all the text and the components returned by your llm backend and it's only accessible on the CL side or the server doesn't really know about it and it's similar to the UST State API and it can be any client side data with this new approach you can stream react components from the server to the client as part of an llm output and also interactively update the llm input from the client site now that you conceptually know what these updates are let's take a look at some real life examples built using aisk let's take a look at the first use case imagine you have an Alum agent that looks up the weather information for you and Returns the data instead of returning the text output now you can return an actual react server component specifically designed for the text output this means that based on the agent output you can have your own custom component streamed from the server imagine you have multiple agents doing work in multiple steps after each step you can stream an output to the client side and keep the client updated another Super interesting use case that this unlocks is the ability to interact with your UI and this interaction is not a normal interaction but rather this would update the AI State on the official demo of the AI STK you can see that there is a stock purchasing agent and once you check for the stocks you get a graph of stock price change over time and you can interact with this graph by highlighting a range that you want to know some information about and ask some questions of other range that you've just selected and it answers you back but how does it work this range highlighter here is a client component that updates the AI State and after it's updated in the next request to the back end this is send along with the message to the server site if you take a look at the networks tab you can just see the AI State update that just happened and also the range that we just highlighted added as part of the AI State input and this gives a feeling that your chat is more interactive and behaves like an app and all the for this demo is here and the most important file for you to look at will be the action file where you see all the apis in action I'll also add some useful links in the description you can go take a look at them if you would like to know more in summary this AR SDK is a great tool to build interactive AI apps on JavaScript thanks for watching if you like the video please leave a like And subscribe for more and I will talk to you soon

Channel: Raj talks tech

Views: 7,466

Keywords:

Id: qyVaFA0dCbI

Length: 4min 54sec (294 seconds)

Published: Fri Mar 08 2024