ChatGeneration Chat Completion

Generate Chat Completion

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

User: How is it going?
Assistant: All good, how may I help you?
Why is the sky blue?
Send Message


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.

import { CoreMessage } from 'ai';
import { useState } from 'react';
export default function Page() {
const [input, setInput] = useState('');
const [messages, setMessages] = useState<CoreMessage[]>([]);
return (
onChange={event => {
onKeyDown={async event => {
if (event.key === 'Enter') {
setMessages(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 => [
{, 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>


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

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

View Example on GitHub