Stream Your Components From NextJS Server Actions

you ever see something so cool you're like hey I got to try that out for myself well that's what I thought when I first saw components streaming from server actions check this out so here we have an AI input and we've all seen this before it's the basic interface for chat gbt well well let's look at the code that's building the AI response section so over here in the action file if we scroll down to the end we see return new experimental streaming react response and we see in here div class name py2 pams content so we're actually right here in our server action formatting the streaming HTML that is going back to the client for rendering and it gets better I'm going to bring in a standard counter like we've all seen before I'm going to put that inside of the div hit save now let's try it again and in addition to our text response which is inside that div we now have a counter and you can click on that and it's Dynamic we've actually streamed back a component from our server action into our application how cool is that well if you find that intriguing which I can't imagine that you don't I'm going to show you some really cool stuff as we integrate this with Spotify and dig deeper into what you can do with the components that we return from these server actions here's the application that we're going to build we can give it some inspiration like we want albums that feel like love and then what do we get back well we get some AI responses that these albums I guess Dark Side of the Moon are albums that are evocative of love and we can then hit that add to saved albums and actually save them in our list of Saved albums it's a cool application that will not only teach you AI but also teach you the app router and streaming server actions and all of the source code is available to you for free on GitHub let's get right into [Music] it all right now putting a counter in there is cool but connecting it to Spotify is even cooler so let's go into our application figure out its structure and then figure out how to connect it to Spotify so this is just a standard nextjs app router application it's based on an example from the versal library in their example section the homepage which is the only one we're going to look at is under page now they make it pretty clear in the documentation that you have to put this runtime Edge in there so that when you deploy to versal it knows that it's going to be Edge deployed but outside of that we're just using Tailwind to put a nice two column layout for our application now one really important thing that we're doing in our page is we are bringing in the Handler that is the server action that's going to be doing the streaming and we're giving that to the chat component so let's go take a look at that chat component so our chat component brings in use chat that's a custom hook that comes from the versal AI library in its react section and you give it that Handler which you get as a prop that's the server action and you give it that as the API now you can give the cook either a API route if you want to or you can do a server action like we're doing here and then you get back as outputs the messages that's the response from the server action or the API you get the input so you can handle the input text and then some ability to handle the input change and then handle submit so let's go take a look at how we're going to use that so we start off with our form tag let's go and bring in the label I've imported a number of Shad CN components here including label and input and button just to make it look nice and our input connects to the input that we get from used chat so we give it that value and then we give it the onchange with the handle input change and then finally we have our submit button that goes to onsubmit and that onsubmit calls handle submit and that handle submit then calls our server action and gets back our data and what we get back is this array of messages now the messages have a role that can be either the user or the AI and then in the case of user content we're just going to say user and then we're going to give the content in the case of the AI we're going to get back the rendered UI and we're going to put the rendered UI in there instead so I don't really think we need this let's just get rid of that line and now see what we have all right so it's starting to look like the application we built now let's go over and take a look at the action so this is the server action that I showed before we're currently bringing in that counter let's get rid of that now let's take a look at how we connect to open AI with open AI we call the completions create we had to get the model so in this case we're going to call the 3.5 turbo but you get to Define whatever you want with that you could use gbd4 if you wanted might be more expensive I don't know we want to say that it's streaming so we're going to get back the response in stream streaming form we're not going to get it back all in one big chunk right at the end and then we tell it what our prompts are and we need to give it a list of not only the messages that we want but the messages that we have said previously so we're having a conversation with the AI now those messages are maintained by that use chat so we really don't have to do much it's just a question what we want to send to the AI so what we're going to do here is we're going to hack on content a little bit and instead of just saying content we're going to say that if it's user content that's the actual prompt that we type in that we're going to actually wrap that in our own custom prompt and that says a bulleted list in the format of album and artist of three music albums from this genre 1970 to 2000 with beautiful album covers in the theme of and then their content at the end of that so we're kind of wrapping that little part of a prompt in a bigger prompt so let's actually see what happens but to make it a little easier to follow let's change this into a pre all right let's go cool all right so that's the AI now the AI is responding with that prompt where he said give us some album covers that feel like fire and it gave us Fire and Water by free Fireball by Deep Purple and preservation Act One by The Kinks awesome so now we need to parse through that returned string and parse out the name of the album and the name of the band so let's go back into our action and then up above the Handler I'm going to bring in a handy utility function so this git albums function takes that AI string with all their dashes and their quotes and uses a bunch of regex's on it to turn it into an array of objects where you've got artist and album let's go try it out so down here we'll simply Json stringify the output of get albums let's give it a go all right okay apparently Fleetwood Max rumors feels like wind as does YouTube's AK baby okay now let's go and connect that to Spotify so we're going to go and make request to Spotify to get these albums to do that I'm going to bring in get album info from my local Spotify file now Spotify and of course all this code is aable to you on GitHub for free has a couple of functions the first it has is get token that's going to get your token with Spotify now to get your token you're going to need to specify the Spotify client ID as well as the Spotify client secret so you get both of those from getting a web API key from Spotify and then it's also got get album info you give it an artist you give it an album and it goes and makes the request to the Spotify API using that token that it automatically goes and gets to get you back a big Json blob that has all the information about that album so let's go back into action and then down inside of our UI what we're going to do is asynchronously run all of those albums through our get album info to do that we call get albums we get back an array from that so we use map and we turn each one of those items which has the album and the artist into a promise and that promise comes from get album info it's asynchronous and it's got to go call Spotify that then returns some album info that we turn into a URL and image a name a release date and an artist and then we use promise.all to just wait for all of it so let's go take a look at the data coming out of that and try again all right not bad so now I've got some cool stuff coming out of Spotify I actually don't know what album that is since it doesn't show so let's go and connect this with our cool album component so we can show visually what those albums are so let's go bring in our album component all right so our album component it takes all the information that we just gathered including the URL image artist name and so on and so forth and it turns it into a Shad CN card just to make it format nicely all right now that we got a nice looking way to show our albums let's go back into our action. TSX and we'll change this pre into a set of invocations of that album All right so here we're creating a two column layout using grid and then we're just going through and invoking album with all the data that we got back we're saying that we have allowed it to add so we'll get to that in just a second that's it's going to interact with the context but let's go and give it a try and see how it goes not bad I don't know what's up with that one I oh Marvin Gay cool all right so rumors this looks great awesome so now that we have this really cool ability we're returning client components that are Interactive to our client so can they actually interact with the other components on the page well yes they can so what we're going to do is we're going to use context and we're going to wrap the page in a context where we can save albums so let's go take a look at that context so here we got album provider now what album provider does is it creates a custom hook called use albums so that's going to be a list of album info just like we had before and it's going to have the standard output from used date so it's going to have the albums and then set albums and the album context is just going to return that to whatever wants it and then we got a handy helper hook called use albums context that's going to go and return the output of that use state to whoever wants to use it and then we have our albums provider component that we can use to provide that state down to wherever we want it so let's go into our page and bring in that album provider and then we'll just wrap our app in it now over here in our album right at the top we're going to want to bring in use album context so we can actually access that context and then down the component we call use album context to get the state with the albums and the set albums and then finally in that on ad we're going to just append the current album that you're looking at to the array of albums when you click on that add button all right let's hit save go back in Arc try again hit add to saved albums and now we don't really know so we need a saved albums viewer so we need to actually show the content of that context to do that we'll go back over into our page we'll bring in the saved albums component and then drop that in the second column and let's try it one more time fire breathing dragons Okay Deep Purple add to saved albums awesome so cool all right now I know some of you might look at this and go wow this is a fantastic way to do micro front ends you can simply just send code to the client and have it run well that's not quite the way that this works so what's actually happening here is that the album that we're sending back is just a invocation of the album code that's already in the bundle so you can't actually send code what you're doing is instead saying invoke album with these properties it's the same mechanism that react and nextjs use when you change routes in nextjs it sends back an RSC stream that's then rendered by the client there's no super magic here we're not actually sending Dynamic code across the wire what we are doing is just telling the client to invoke the components that it already has still that is super exciting and I can't wait to see what we end up doing with this of course I'd love to hear from you in the comments about what you might think about doing with it in the mean time of course if you like this video hit that like button and if you really like the video hit the Subscribe button and click on that Bell and be notified the next time a new blue color coder comes out

Channel: Jack Herrington

Views: 13,682

Keywords: react, reactjs, react native, react app, react component, react use, ai generator, react components, open ai, ai chat, google ai, react js, react.js, reactJS, typescript, learn react js, reasons to use reactjs, react 18, next js, nextjs react, node js react app, react github, blue collar coder, jack herrington, nextjs, vite, react typescript, react hook, react state, next js server actions, server actions streaming, react component streaming, nextjs component streaming

Id: KtTR8Seld98

Length: 13min 9sec (789 seconds)

Published: Mon Dec 04 2023