Generate Text with Chat Prompt

Learn how to generate text with chat prompt using the AI TOOLKIT and Next.js

2 min readnextstreamingchatView source

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. history={[ { role: 'User', content: 'How is it going?' }, { role: 'Assistant', content: 'All good, how may I help you?' }, ]} inputMessage={{ role: 'User', content: 'Why is the sky blue?' }} outputMessage={{ role: 'Assistant', content: 'The sky is blue because of rayleigh scattering.', }} />

Run it locally

$ npm install ai

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.

'use client';

import type { ModelMessage } from 'ai-toolkit';

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) => (

{typeof message.content === 'string'

? message.content

: message.content

.filter(part => part.type === 'text')

.map((part, partIndex) => (

))}

</div>

))}

</div>

);

}

app/page.tsx

tsx

1'use client';
2import type { ModelMessage } from 'ai-toolkit';
3import { useState } from 'react';
4export default function Page() {
5 const [input, setInput] = useState('');
6 const [messages, setMessages] = useState<ModelMessage[]>([]);
7 return (
8 <div>
9 <input
10 value={input}
11 onChange={event => {
12 setInput(event.target.value);
13 }}
14 onKeyDown={async event => {
15 if (event.key === 'Enter') {
16 setMessages(currentMessages => [
17 ...currentMessages,
18 { role: 'user', content: input },
19 ]);
20 const response = await fetch('/api/chat', {
21 method: 'POST',
22 body: JSON.stringify({
23 messages: [...messages, { role: 'user', content: input }],
24 }),
25 });
26 const { messages: newMessages } = await response.json();
27 setMessages(currentMessages => [
28 ...currentMessages,
29 ...newMessages,
30 ]);
31 }
32 }}
33 />
34 {messages.map((message, index) => (
35 <div key={`${message.role}-${index}`}>
36 {typeof message.content === 'string'
37 ? message.content
38 : message.content
39 .filter(part => part.type === 'text')
40 .map((part, partIndex) => (
41 <div key={partIndex}>{part.text}</div>
42 ))}
43 </div>
44 ))}
45 </div>
46 );
47}

Server

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

import { generateText, type ModelMessage } from 'ai-toolkit';

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 });

}

---

app/api/chat/route.ts

typescript

1import { generateText, type ModelMessage } from 'ai-toolkit';
2export async function POST(req: Request) {
3 const { messages }: { messages: ModelMessage[] } = await req.json();
4 const { response } = await generateText({
5 model: 'openai/gpt-4o',
6 system: 'You are a helpful assistant.',
7 messages,
8 });
9 return Response.json({ messages: response.messages });
10}

Browse all recipes