BasicsGenerating Text

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 call the getAnswer function when a button is clicked. The getAnswer function will call the generateText function from the ai module, which will then generate text based on the input prompt.

app/page.tsx
'use client';
import { useState } from 'react';
import { getAnswer } from './actions';
// Force the page to be dynamic and allow streaming responses up to 30 seconds
export const dynamic = 'force-dynamic';
export const maxDuration = 30;
export default function Home() {
const [generation, setGeneration] = useState<string>('');
return (
<div>
<button
onClick={async () => {
const { text } = await getAnswer('Why is the sky blue?');
setGeneration(text);
}}
>
Answer
</button>
<div>{generation}</div>
</div>
);
}

Server

On the server side, we need to implement the getAnswer function, which will call the generateText function from the ai module. The generateText function will generate text based on the input prompt.

app/actions.ts
'use server';
import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';
export async function getAnswer(question: string) {
const { text, finishReason, usage } = await generateText({
model: openai('gpt-3.5-turbo'),
prompt: question,
});
return { text, finishReason, usage };
}