I’m working on a Next.js application and using OpenAI’s API to handle chat completions. However, I encountered an issue where ChatCompletionRequestMessage
seems to be deprecated, and it’s giving me errors. Below is my code:
Client-side Component:
<code>
import { ChatCompletionRequestMessage } from "openai"; // Deprecated?
const CPage = () => {
const router = useRouter();
const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([]);
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
prompt: ""
}
});
const isLoading = form.formState.isSubmitting;
const onSubmit = async (values: z.infer<typeof formSchema>) => {
try {
const userMessage: ChatCompletionRequestMessage = {
role: "user",
content: values.prompt,
};
const newMessages = [...messages, userMessage];
const response = await axios.post("/api/conversation", {
messages: newMessages,
});
setMessages((current) => [...current, userMessage, response.data]);
form.reset();
} catch (error: any) {
console.log(error);
} finally {
router.refresh();
}
};
code ------
<div className="space-y-4 mt-4">
<div className="flex flex-col-reverse gap-y-4">
{messages.map((message) => (
<div key={message.content}>
{message.content}
</div>
))}
more code -----
</code>
<code>
import { ChatCompletionRequestMessage } from "openai"; // Deprecated?
const CPage = () => {
const router = useRouter();
const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([]);
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
prompt: ""
}
});
const isLoading = form.formState.isSubmitting;
const onSubmit = async (values: z.infer<typeof formSchema>) => {
try {
const userMessage: ChatCompletionRequestMessage = {
role: "user",
content: values.prompt,
};
const newMessages = [...messages, userMessage];
const response = await axios.post("/api/conversation", {
messages: newMessages,
});
setMessages((current) => [...current, userMessage, response.data]);
form.reset();
} catch (error: any) {
console.log(error);
} finally {
router.refresh();
}
};
code ------
<div className="space-y-4 mt-4">
<div className="flex flex-col-reverse gap-y-4">
{messages.map((message) => (
<div key={message.content}>
{message.content}
</div>
))}
more code -----
</code>
import { ChatCompletionRequestMessage } from "openai"; // Deprecated?
const CPage = () => {
const router = useRouter();
const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([]);
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
prompt: ""
}
});
const isLoading = form.formState.isSubmitting;
const onSubmit = async (values: z.infer<typeof formSchema>) => {
try {
const userMessage: ChatCompletionRequestMessage = {
role: "user",
content: values.prompt,
};
const newMessages = [...messages, userMessage];
const response = await axios.post("/api/conversation", {
messages: newMessages,
});
setMessages((current) => [...current, userMessage, response.data]);
form.reset();
} catch (error: any) {
console.log(error);
} finally {
router.refresh();
}
};
code ------
<div className="space-y-4 mt-4">
<div className="flex flex-col-reverse gap-y-4">
{messages.map((message) => (
<div key={message.content}>
{message.content}
</div>
))}
more code -----
API Route:
<code>import { auth } from '@clerk/nextjs/server';
import { NextResponse } from 'next/server';
import OpenAI from 'openai';
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
export async function POST(req: Request) {
try {
const { userId } = auth();
const body = await req.json();
const { messages } = body;
if (!userId) {
return new NextResponse("Unauthorized", { status: 401 });
}
if (!openai.apiKey) {
return new NextResponse("Open AI API Key not configured", { status: 500 });
}
if (!messages) {
return new NextResponse("Messages are required", { status: 400 });
}
const response = await openai.chat.completions.create({
model: "gpt-3.5-turbo",
messages,
});
return NextResponse.json(response.choices[0].message);
} catch (error) {
console.log("[CONVERSATION_ERROR]", error);
return new NextResponse("Internal error", { status: 500 });
}
}
</code>
<code>import { auth } from '@clerk/nextjs/server';
import { NextResponse } from 'next/server';
import OpenAI from 'openai';
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
export async function POST(req: Request) {
try {
const { userId } = auth();
const body = await req.json();
const { messages } = body;
if (!userId) {
return new NextResponse("Unauthorized", { status: 401 });
}
if (!openai.apiKey) {
return new NextResponse("Open AI API Key not configured", { status: 500 });
}
if (!messages) {
return new NextResponse("Messages are required", { status: 400 });
}
const response = await openai.chat.completions.create({
model: "gpt-3.5-turbo",
messages,
});
return NextResponse.json(response.choices[0].message);
} catch (error) {
console.log("[CONVERSATION_ERROR]", error);
return new NextResponse("Internal error", { status: 500 });
}
}
</code>
import { auth } from '@clerk/nextjs/server';
import { NextResponse } from 'next/server';
import OpenAI from 'openai';
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
export async function POST(req: Request) {
try {
const { userId } = auth();
const body = await req.json();
const { messages } = body;
if (!userId) {
return new NextResponse("Unauthorized", { status: 401 });
}
if (!openai.apiKey) {
return new NextResponse("Open AI API Key not configured", { status: 500 });
}
if (!messages) {
return new NextResponse("Messages are required", { status: 400 });
}
const response = await openai.chat.completions.create({
model: "gpt-3.5-turbo",
messages,
});
return NextResponse.json(response.choices[0].message);
} catch (error) {
console.log("[CONVERSATION_ERROR]", error);
return new NextResponse("Internal error", { status: 500 });
}
}
I want to use the OpenAI Node.js SDK version 4, but I am encountering issues with ChatCompletionRequestMessage
being deprecated. How should I update my code to use the correct types and methods in version 4?
Any help would be greatly appreciated. Thank you in advance!