Ship AI with Laravel: Real-Time Streaming Chat UI with Livewire
Last updated on by Harris Raftopoulos
▶️ Watch the video tutorial (10 minutes)
So far we've been testing the agent through JSON routes. It returns the full reply once the AI is done. Works for development, terrible for customers. Nobody wants to stare at a spinner for five seconds wondering if anything is happening.
In this episode we build a real-time chat widget where the response streams in word by word, like ChatGPT. The user types a question, hits send, and the agent's reply starts appearing immediately as it generates.
The SDK makes this a one-line change. Instead of calling prompt() we call stream(), and the SDK forwards token deltas to the browser via server-sent events. I add a stream method to the ChatController that handles SSE with proper headers, then reuse a private resolveAgent method to start or continue conversations for the authenticated user.
The frontend is a Livewire component for state, a Blade template for the UI, and Alpine.js for the streaming logic. The Alpine code opens a fetch readable stream, parses each chunk as it arrives, and appends the text to the message bubble live. No external dependencies. Just Livewire, Alpine, and the SDK doing the heavy lifting.
I also cover a small gotcha around capturing the conversation ID on the first message. The fix is a completion callback that fires once the stream finishes, so we can store the ID for follow-up messages.
By the end the chat feels like a real product. Same agent, same tools, same knowledge base, just streamed.
Next episode we give the agent access to the live web with the WebSearch tool, so it can answer questions about things that change in real time like shipping carrier delays.
