📄 ai-sdk/cookbook/next/stream-text

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-sdk/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.

app/page.tsx

'use client';
import { useCompletion } from '@ai-sdk/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 { openai } from '@ai-sdk/openai';import { streamText } from 'ai';
export async function POST(req: Request) {  const { prompt }: { prompt: string } = await req.json();
  const result = streamText({    model: openai('gpt-4'),    system: 'You are a helpful assistant.',    prompt,  });
  return result.toUIMessageStreamResponse();}

View Example on GitHub

On this page

Stream Text

Client

Server

Deploy and Scale AI Apps with Vercel.

Vercel delivers the infrastructure and developer experience you need to ship reliable AI-powered applications at scale.

Trusted by industry leaders:

OpenAI
Photoroom

Talk to an expert