Create an AI chat bot with Livewire and ChatGPT
Playing
06. Streaming the response

Episodes

0%
Your progress
  • Total: 29m
  • Played: 0m
  • Remaining: 29m
Join or sign in to track your progress

Transcript

00:00
Let's apply what we've learned about wire stream to our chat response. And then we'll try and stream this to these individual chat response components. Okay. So the first thing that we want to do is instead of use create,
00:12
we want to use create stream. That's going to give us a different result back. And of course this will be a stream that we can iterate through and then stream to our template.
00:21
So I'm going to get rid of this response here and let's just die dump on this response to see what we've got. Okay. I'm going to go ahead and say, Hey, and we'll just wait for that to come back.
00:31
And as you can see the response here, we have got a stream and then inside of here, we can start to read that data. So what do we want to do here? Well, let's go ahead and just rename this to stream.
00:43
We want to iterate over each of the pieces of this stream. So I'm just going to call that as response. Let's just go ahead and clear out our Laravel log and just log these two here, just to see what we've got out of interest.
00:59
So we're going to go ahead and log some content of this. Let's go ahead and pluck this out first of all. So let's use our array helper here to grab the response choices as we did before. So this is exactly the same.
01:15
And then we have Delta and content. Let's log this out and see what happens. So Laravel log is clear. Let's go over and let's write, Hey.
01:26
Okay. There we go. So we've got a response complete. Now, if we had over here, you can see that each of these pieces has come through.
01:35
In fact, each of these is just a single word. So now with each of these, much like the counter that we created, imagining these are numbers. We can just output each of these words as they come in and
01:49
stream them to the front end. So let's try this out. Let's say this stream. And again, we'll make use of named arguments to make this a little bit easier.
02:00
Where do we want to stream this to? Well, let's just stream it to something called stream for now. We will go ahead and set replace to false because we want this to append on. Although we can just ignore that because that is the default.
02:13
And of course, really importantly, the content is the content just here. Let's switch this over to wire stream. We know that stream is called stream and we want to output the response. Okay.
02:25
So let's head over and see if this now actually streams properly. Okay, great. So you could see that that did, and then sort of, uh, went away at the end. Now we can kind of get around this by going ahead and setting the response
02:39
that we already had floating around from earlier to a concatenated version of that content, and then once everything is done. After the for each happens, we will already have that response in there and we could just output that directly within our content.
02:56
So if we go over to our chat response here, this response is already being output, it's being streamed, but then we'll have the concatenated version at the end. So let's say, Hey, and wait for the response back and yeah, let's just make sure we set this to a null value.
03:13
And we should be good. So let's say, Hey, and there we go. So that stays. So it ends up with a fully constructed version that stays in there.
03:24
All right. Let's send another message and see if everything is good. So link me to the live wire docs, for example, and as you can see, we've got a little bit of an issue here.
03:35
So what's happening is because we're rendering multiple components, each with their own stream, each of them streams have their own name. So over in the chat response here, we've just called this stream. And that means that two of these exist within our overall page.
03:51
And as we write more content, they are just going to end up adding on to each of them, which is not great. So we can solve this very, very easily with a unique ID. So what do we do?
04:02
Well, let's go over to our chat response first of all, and we're going to Well, let's go over to our chat response first of all, and over here, let's say stream two, and what we could do is we could just use the ID of the component. So let's just say this get ID that will grab the ID of the component for us.
04:21
And we can do exactly the same thing over in our chat response here. And we can just add on this get ID and we're done. So that now makes that stream unique to that individual component or chat bubble.
04:34
Let's try again. I'm going to say, Hey, and yeah, we get that back, uh, link me to the Livewire docs and there we go. So it's now being streamed to its own individual component.

Episode summary

In this episode, we take what we've learned about streaming data with Wire Stream and put it into practice with our chat response system. Instead of using a simple create function for responses, we switch to using createStream, which returns a stream we can iterate over and display in real-time.

You'll see how we log the live pieces of the response as they come in—each message comes through word by word, so we can update the UI as new data arrives. We walk through tweaking our template to handle these streamed updates, ensuring the messages are appended correctly and displayed live as they come in.

A trick we use is to keep a fully concatenated version of the response, so when the stream completes, the full message stays in the chat. We also address an issue where multiple response streams could overwrite each other and show you how to assign unique stream names for each chat message using component IDs.

By the end, you'll see our chat system streaming responses live to each individual chat bubble without any overlap—making for a super interactive user experience!

Episode discussion

No comments, yet. Be the first!