📄 ai-sdk/cookbook/next/generate-text-with-chat-prompt

Previously, you were able to generate text and objects using either a single message prompt, a system prompt, or a combination of both of them. However, there may be times when you want to generate text based on a series of messages.

A chat completion allows you to generate text based on a series of messages. This series of messages can be any series of interactions between any number of systems, but the most popular and relatable use case has been a series of messages that represent a conversation between a user and a model.

http://localhost:3000

User: How is it going?

Assistant: All good, how may I help you?

Why is the sky blue?

Send Message

Client

Let's start by creating a simple chat interface with an input field that sends the user's message and displays the conversation history. You will call the /api/chat endpoint to generate the assistant's response.

app/page.tsx

'use client';
import type { ModelMessage } from 'ai';import { useState } from 'react';
export default function Page() {  const [input, setInput] = useState('');  const [messages, setMessages] = useState<ModelMessage[]>([]);
  return (    <div>      <input        value={input}        onChange={event => {          setInput(event.target.value);        }}        onKeyDown={async event => {          if (event.key === 'Enter') {            setMessages(currentMessages => [              ...currentMessages,              { role: 'user', content: input },            ]);
            const response = await fetch('/api/chat', {              method: 'POST',              body: JSON.stringify({                messages: [...messages, { role: 'user', content: input }],              }),            });
            const { messages: newMessages } = await response.json();
            setMessages(currentMessages => [              ...currentMessages,              ...newMessages,            ]);          }        }}      />
      {messages.map((message, index) => (        <div key={`${message.role}-${index}`}>          {typeof message.content === 'string'            ? message.content            : message.content                .filter(part => part.type === 'text')                .map((part, partIndex) => (                  <div key={partIndex}>{part.text}</div>                ))}        </div>      ))}    </div>  );}

Server

Next, let's create the /api/chat endpoint that generates the assistant's response based on the conversation history.

app/api/chat/route.ts

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

View Example on GitHub

On this page

Generate Text with Chat Prompt

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