Generate Text | AI SDK Español

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.

This part of the page is interactive; see it on the original page.

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.

'use client';

import { useState } from 'react';

export default function Page() {
  const [generation, setGeneration] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  return (
    <div>
      <button
        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
      </button>

      {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.

import { generateText } from 'ai';

export async function POST(req: Request) {
  const { prompt }: { prompt: string } = await req.json();

  const { text } = await generateText({
    model: 'openai/gpt-6-astra',
    instructions: 'You are a helpful assistant.',
    prompt,
  });

  return Response.json({ text });
}

View on GitHub