BasicsStream Text Generation

Stream Text Generation

This example client side rendering and hooks. If you want to use React Server Components (RSC) instead, check out the "streaming text" example with RSCs.

Text generation can sometimes take a long time to complete, especially when you're generating a couple of paragraphs. In such cases, it is useful to stream the text generation process to the client in real-time. This allows the client to display the generated text as it is being generated, rather than have users wait for it to complete before displaying the result.

http://localhost:3000
Answer

Client

Let's create a simple React component that imports the useCompletion hook from the ai/react module. The useCompletion hook will call the /api/completion endpoint when a button is clicked. The endpoint will generate text based on the input prompt and stream it to the client.

pages/index.tsx
import { useCompletion } from 'ai/react';
export default function Page() {
const { completion, complete } = useCompletion({
api: '/api/completion',
});
return (
<div>
<div
onClick={async () => {
await complete('Why is the sky blue?');
}}
>
Generate
</div>
{completion}
</div>
);
}

Server

Let's create a route handler for /api/completion that will generate text based on the input prompt. The route will call the streamText function from the ai module, which will then generate text based on the input prompt and stream it to the client.

app/api/completion/route.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
export async function POST(req: Request) {
const { prompt }: { prompt: string } = await req.json();
const result = await streamText({
model: openai('gpt-4'),
system: 'You are a helpful assistant.',
prompt,
});
return result.toAIStreamResponse();
}

View Example on GitHub