Generate Text with Chat Prompt
Learn how to generate text with chat prompt using the AI TOOLKIT and React Server Components.
Previously, we 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 aiClient
Let's create a simple conversation between a user and a model, and place a button that will call continueConversation.
'use client';
import { useState } from 'react';
import { Message, continueConversation } from './actions';
// Allow streaming responses up to 30 seconds
export const maxDuration = 30;
export default function Home() {
const [conversation, setConversation] = useState<Message[]>([]);
const [input, setInput] = useState<string>('');
return (
<div>
<div>
{conversation.map((message, index) => (
<div key={index}>
{message.role}: {message.content}
</div>
))}
</div>
<div>
<input
type="text"
value={input}
onChange={event => {
setInput(event.target.value);
}}
/>
<button
onClick={async () => {
const { messages } = await continueConversation([
...conversation,
{ role: 'user', content: input },
]);
setConversation(messages);
}}
>
Send Message
</button>
</div>
</div>
);
}
- 1'use client';
- 2import { useState } from 'react';
- 3import { Message, continueConversation } from './actions';
- 4// Allow streaming responses up to 30 seconds
- 5export const maxDuration = 30;
- 6export default function Home() {
- 7 const [conversation, setConversation] = useState<Message[]>([]);
- 8 const [input, setInput] = useState<string>('');
- 9 return (
- 10 <div>
- 11 <div>
- 12 {conversation.map((message, index) => (
- 13 <div key={index}>
- 14 {message.role}: {message.content}
- 15 </div>
- 16 ))}
- 17 </div>
- 18 <div>
- 19 <input
- 20 type="text"
- 21 value={input}
- 22 onChange={event => {
- 23 setInput(event.target.value);
- 24 }}
- 25 />
- 26 <button
- 27 onClick={async () => {
- 28 const { messages } = await continueConversation([
- 29 ...conversation,
- 30 { role: 'user', content: input },
- 31 ]);
- 32 setConversation(messages);
- 33 }}
- 34 >
- 35 Send Message
- 36 </button>
- 37 </div>
- 38 </div>
- 39 );
- 40}
Server
Now, let's implement the continueConversation function that will insert the user's message into the conversation and generate a response.
'use server';
import { generateText } from 'ai-toolkit';
import { openai } from '@ai-toolkit/openai';
export interface Message {
role: 'user' | 'assistant';
content: string;
}
export async function continueConversation(history: Message[]) {
'use server';
const { text } = await generateText({
model: openai('gpt-3.5-turbo'),
system: 'You are a friendly assistant!',
messages: history,
});
return {
messages: [
...history,
{
role: 'assistant' as const,
content: text,
},
],
};
}
- 1'use server';
- 2import { generateText } from 'ai-toolkit';
- 3import { openai } from '@ai-toolkit/openai';
- 4export interface Message {
- 5 role: 'user' | 'assistant';
- 6 content: string;
- 7}
- 8export async function continueConversation(history: Message[]) {
- 9 'use server';
- 10 const { text } = await generateText({
- 11 model: openai('gpt-3.5-turbo'),
- 12 system: 'You are a friendly assistant!',
- 13 messages: history,
- 14 });
- 15 return {
- 16 messages: [
- 17 ...history,
- 18 {
- 19 role: 'assistant' as const,
- 20 content: text,
- 21 },
- 22 ],
- 23 };
- 24}