Don’t Ship Another AI App Until You Try This Streaming Trick

Build Your OWN AI Podcast GeneratorFresh📅 2025-09-19

Watch on YouTube ↗

Tutorial Overview

┌─────────────────────────────────────────────────────────────────────┐
│                         LEARNING PATH                               │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   LEARN                                                             │
│   ─────                                                             │
│   ┌─────────────┐    ┌─────────────┐    ┌─────────────┐            │
│   │   Watch     │───►│ Understand  │───►│   Follow    │            │
│   │  Tutorial   │    │  Concepts   │    │   Along     │            │
│   └─────────────┘    └─────────────┘    └─────────────┘            │
│                                               │                     │
│                                               ▼                     │
│   PRACTICE                                                          │
│   ────────                                                          │
│   ┌─────────────┐    ┌─────────────┐                               │
│   │  Try It     │───►│ Experiment  │                               │
│   │  Yourself   │    │   & Adapt   │                               │
│   └─────────────┘    └─────────────┘                               │
│                            │                                        │
│                            ▼                                        │
│   MASTER                                                            │
│   ──────                                                            │
│   ┌─────────────┐    ┌─────────────┐                               │
│   │   Build     │───►│   Share &   │                               │
│   │  Your Own   │    │   Iterate   │                               │
│   └─────────────┘    └─────────────┘                               │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Key Takeaways

• Core concepts explained
• Step-by-step implementation
• Practical examples

Transcript

[00:00] In a previous video, we had a look at using fire crawl to extract content from any article. So, we could grab a news article from OpenAI, pass it into our app, and press fetch. And this will return a summary of that article along with all the main content. The next step is to take this content and then generate a natural sounding conversation between two hosts. And for any LLM functionality, we will be using the AI SDK. This solution will make it very

[00:30] easy to hot swap models. So if we ever decided that we don't want to use OpenAI and want to use Anthropic instead, that becomes very easy. But one of the more important features that we're going to use is the AI SDK's ability to stream structured output. Let me show you what I mean. So this is the initial demo that I showed you at the start of the series. Watch what happens after we scrape this content. you will see the conversation streaming in as it's being generated.

[01:01] This is nothing more than structured output. It's an array that gets generated with each of the conversation messages. But what the AI SDK allows us to do is to stream in that structured output, giving the user immediate feedback. All right, so for our project, what we're going to do is replace all of this dummy data with a realtime stream of that conversation object as it's being generated. So, what we need to do is go over to the AI SDK website. Then we can grab this installation command

[01:32] and back in our project. I'm going to open up a terminal window and install that dependency. Cool. Now that we have the AI SDK installed, we can actually go to docs. And here we can find all the documentation related to using the AI SDK like examples for using OpenAI, Anthropic, Google, XAI or even custom models. Now in our application, we don't want to receive the text. That really doesn't help. We want to receive the

[02:03] list of messages in this conversation. So we would have a message for the first host, then a second message for the second host, etc. Now in order to receive that array of structured values, we want to use the structured data functionality offered by the AI SDK. So in the documentation under AI core, we can see things like generate text. This is where we pass in a model and we also pass in a prompt. This will simply

[02:33] return a text response from the model. But this is not what we need. We want to use structured data. It looks very similar to generating text where we can pass in the model that we'd like to use, but we can also pass in this schema object. This is where we can tell the SDK in what format we need that response to be returned in, like an array of messages. And of course, we can still pass in our prompt and a system message. What's also cool is if we go down, we

[03:04] can also stream in an object and that is what we'll use in our application. So this page gives us exactly what we need. So I'm going to copy this page as markdown. And in our project in the technical folder, I'm going to create a new file called structure data. And I'll pass in everything that I just copied. So why are we doing this? Well, when we chat to the agent, we want to give it as much context as possible. So, we can

[03:34] simply drag this file into the conversation window and the agent will then know exactly how to implement this code. You might be wondering, but why don't we just use something like Context 7? Well, Context 7 is a fantastic solution, but I also try to encourage people to really understand the libraries and functionality that they're adding to their system. Also, Context 7 actually uses a lot of tokens, so you could reach your usage limits very quickly when you really didn't have to.

[04:05] So, I encourage you take a little bit of time to understand the documentation, add what you need to your project, and simply pass this to your agent. Right? So, with that said, let's start building this implementation. I will be using GPT5 codeex for this solution, but feel free to use cla code or any other coding agent you want. The process is exactly the same. So I'll start codeex by running codeex. And I'm going to rename the terminal to codeex as well. And just

[04:36] to be clear on what we want to do, we want to replace everything in the center section with actual data. This means we will grab the content from the fire crawl step, pass it to our LLM, and we'll then give very specific system instructions to the LLM in order for it to generate a conversation between two hosts. And we'll also put a limit on it like 10 rounds. Well, let's give this a go. Let's say currently the center section, the conversation of the page

[05:07] contains dummy data. Let's use the structured data feature of the AI SDK to generate a conversation using an LLM. Now, of course, we can give this agent additional context by grabbing structured data and adding it to the conversation. Let's continue. For the model, use GPT5 Mini from Open AI. Then for the system prompt, we need the agent to generate a back and forth podcast style conversation between two hosts

[05:37] limited to 10 turns or rounds. Each host should have a unique personality. The first should be bubbly and excited. The second should be skeptical and sarcastic. Now, while I'm busy with this, I do want to show you something. We mentioned that we'll be using 11 labs to generate the actual audio and we can really influence what these voices sound like by adding things like chuckles, laughing, giggles, etc. during the conversation. So, what I'm going to do is actually just grab this example and

[06:10] back in our prompt, let's also say we can add things like laughs, giggles, etc. using words in square brackets. example and I'll paste in that example. And cool, let's send this. While this is running, let's go ahead and generate our OpenAI API keys. So, go to platform.openai.com. Then go to dashboard API keys. Click on create new secret key. Let's call this one podcast generator. Create secret

[06:43] key. And let's copy this key. And back in our project, let's go to the env file. And just below our firecroll API key, let's create a new variable called open AAI API key. And then we can paste in the key that we just copied. Right, our agent is done. And we get the summary. And in here, it says we have to set up our open AI API key, which we've already done. Let's try to fetch our URL. And now it's generating the dialogue. and it

[07:15] seems like it actually failed. We get this invalid schema message. I'm going to copy all of this. I get the following error in the UI when generating the conversation. Let's paste in all of that. What I also like to do is to go to the dev server, see if there's any error messages over here. So, I think this should be good enough. I'm also going to remind it to use our documentation. So let's say please ensure that you're using the correct implementation

[07:48] as per the AI SDK docs. Let's paste this in again and let's send this. All right, let's see if it was able to fix this issue. Let's rerun this. And the dialogue is being generated and we get all of this back. So it actually details the personality of the hosts. And when we scroll down, we can indeed see the conversation between these two hosts up to 10 messages. This is really cool. The

[08:18] only issue is I want this conversations to stream in as they're being generated. So let's continue with the agent. This conversation is starting to get huge. So what we can do is type front slash and we can run the compact command. This will create a summary of this conversation, freeing up a lot of tokens. Right now, we can say the solution is working and we're generating the conversation. However, I want the conversation messages to stream in on

[08:49] the front end instead of receiving everything at once. Use the streaming structure data feature in the AI SDK. Again, let's simply grab this documentation and add it to the chat. Hopefully, you're starting to see how useful it is to have this documentation on hand. Right, let's send this. At this point, I've had a back and forth conversation with the agent to clean up the UI a bit. I simply removed everything we didn't need from the UI. So, when we now scrape this website, the

[09:19] conversation is being generated and within a few seconds, we should see the conversation streaming in, which we do. So what I did is I removed that section at the top that showed the two hosts personality and the summary of the conversation. Then I also told the agent that we only need an array of messages. Initially it was returning back way more stuff than we really needed. So this might be jumping ahead slightly, but what we want to do is grab this conversation and pass it to 11 Labs in

[09:49] order to generate the audio. So I thought it would be a good idea to simply tell the agent what type of input 11 labs will expect to generate the audio. So I went to 11 labs. I went to the docs. Then I went to text to dialogue. And here they have this link to go to the text to dialogue API documentation. And here we get this example code snippet showing what this array should look like. It should contain the text for the speaker as well as a unique voice ID for the speaker's

[10:20] voice. So I simply copied this example and told the agent that this is what the structured output should look like. And if you look at the response schema, we can see it's an array containing objects and each object contains a host ID and the message. So now that we have this array of messages, the next step is to pass this list of messages to 11 Labs to generate our podcast audio. We'll have a look at that in the next video. See you there.