update to shiny new ai sdk syntax

Signed-off-by: Vu Van Dung <[email protected]>

package.json

@@ -18,6 +18,7 @@
   },
   "packageManager": "[email protected]",
   "dependencies": {
+    "@ai-sdk/openai": "0.0.36",
     "@auth/core": "0.34.1",
     "@aws-sdk/client-s3": "3.609.0",
     "@aws-sdk/s3-request-presigner": "3.609.0",
@@ -70,7 +71,6 @@
     "nprogress": "0.2.0",
     "nuqs": "1.17.4",
     "octokit": "4.0.2",
-    "openai": "4.52.3",
     "postcss": "8.4.39",
     "react": "18.3.1",
     "react-dom": "18.3.1",

src/app/admin/chat/api/route.ts

@@ -1,12 +1,9 @@
-import { OpenAIStream, StreamingTextResponse } from "ai";
-import { OpenAI } from "openai";
+import { openai } from "@ai-sdk/openai";
+import { streamText } from "ai";
 import * as v from "valibot";
 
-import { env } from "~/env.mjs";
 import { getSession } from "~/lib/auth/helpers";
 
-const openai = new OpenAI({ apiKey: env.OPENAI_API_KEY });
-
 const bodySchema = v.object({
   messages: v.array(
     v.object({
@@ -42,13 +39,12 @@ export async function POST(req: Request) {
   const { messages } = result.output;
 
   try {
-    const response = await openai.chat.completions.create({
-      model: "gpt-4-1106-preview",
+    const result = await streamText({
+      model: openai("gpt-4o"),
       messages: [{ role: "system", content: initialPrompt }, ...messages],
       temperature: 0.2,
-      stream: true,
     });
-    return new StreamingTextResponse(OpenAIStream(response));
+    return result.toAIStreamResponse();
   } catch (e) {
     console.error(e);
     return Response.json({}, { status: 500 });

src/app/admin/chat/page.tsx

@@ -49,7 +49,7 @@ export default function Page() {
     <main className="container max-w-screen-lg">
       <Card className="flex flex-col p-0 md:flex-row">
         <div className="border-b border-separator bg-bg-darker p-6 md:w-64 md:shrink-0 md:border-r">
-          <Title title="chat" subtitle="Current model: GPT&#8209;4&nbsp;Turbo" />
+          <Title title="chat" subtitle="Current model: GPT&#8209;4o" />
         </div>
         <div className="flex max-w-full flex-grow flex-col divide-y divide-separator overflow-x-auto">
           {messages.map((m, index) => (