Little help with a simple streamText div in a client component

Hi,

To leverage the power of the community I was wondering if anyone could help me out with setting up a simple streamText component to show some generated text on a page with the Vercel AI SDK.

Right now I have created a NextJS app and installed the Google AI SDK and AI package. And I'm trying to show some streamed text on the homepage. Diving in the docs I see an example that uses a separate API Route file to make this happen but I wonder if you can just stream text without it as well?

I created a simple generated text div that works and shows some result of the prompt without the need for this API route file. I wonder now, just for the sake of learning, if I can show a streaming text as well. Here's the generatedText component code. How would one replace the generateText function with the streamFunction?

import { generateText } from "ai";

import { google } from "@ai-sdk/google";

async function Home() {

const result = await generateText({

model: google("models/gemini-2.0-flash-exp"),

system: "you like to keep answers short",

prompt: "What is love?",

});

return (

<div className="text-center">{result.text}</div>

</main>

);