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

A situation may arise when you need to generate text based on a prompt. For example, you may want to generate a response to a question or summarize a body of text. The generateText function can be used to generate text based on the input prompt.

http://localhost:3000

Answer

Client

Let's create a simple React component that will make a POST request to the /api/completion endpoint when a button is clicked. The endpoint will generate text based on the input prompt.

app/page.tsx

'use client';
import { useState } from 'react';
export default function Page() {  const [generation, setGeneration] = useState('');  const [isLoading, setIsLoading] = useState(false);
  return (    <div>      <div        onClick={async () => {          setIsLoading(true);
          await fetch('/api/completion', {            method: 'POST',            body: JSON.stringify({              prompt: 'Why is the sky blue?',            }),          }).then(response => {            response.json().then(json => {              setGeneration(json.text);              setIsLoading(false);            });          });        }}      >        Generate      </div>
      {isLoading ? 'Loading...' : generation}    </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 generateText function from the ai module, which will then generate text based on the input prompt and return it.

app/api/completion/route.ts

import { openai } from '@ai-sdk/openai';import { generateText } from 'ai';
export async function POST(req: Request) {  const { prompt }: { prompt: string } = await req.json();
  const { text } = await generateText({    model: openai('gpt-4o'),    system: 'You are a helpful assistant.',    prompt,  });
  return Response.json({ text });}

View Example on GitHub

On this page

Generate 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