Update next-pages example to AI Core. (#1361)

examples/next-openai-pages/package.json

@@ -9,9 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@ai-sdk/openai": "latest",
     "ai": "latest",
     "next": "14.1.1",
-    "openai": "4.16.1",
     "react": "18.2.0",
     "react-dom": "^18.2.0"
   },

examples/next-openai-pages/pages/api/chat-node.ts

@@ -1,10 +1,10 @@
-import { OpenAIStream, StreamingTextResponse, streamToResponse } from 'ai';
+import { OpenAI } from '@ai-sdk/openai';
+import { experimental_streamText, streamToResponse } from 'ai';
 import { NextApiRequest, NextApiResponse } from 'next';
-import OpenAI from 'openai';
 
-// Create an OpenAI API client (that's edge friendly!)
+// Create an OpenAI Provider instance
 const openai = new OpenAI({
-  apiKey: process.env.OPENAI_API_KEY || '',
+  apiKey: process.env.OPENAI_API_KEY ?? '',
 });
 
 export default async function handler(
@@ -14,14 +14,13 @@ export default async function handler(
   const { messages } = await req.body;
 
   // Ask OpenAI for a streaming chat completion given the prompt
-  const response = await openai.chat.completions.create({
-    model: 'gpt-3.5-turbo',
-    stream: true,
+  const result = await experimental_streamText({
+    model: openai.chat('gpt-4-turbo-preview'),
     messages,
   });
 
   // Convert the response into a friendly text-stream
-  const stream = OpenAIStream(response);
+  const stream = result.toAIStream();
 
   /**
    * Converts the stream to a Node.js Response-like object.

examples/next-openai-pages/pages/api/chat.ts

@@ -1,26 +1,21 @@
-import { OpenAIStream, StreamingTextResponse } from 'ai';
-import OpenAI from 'openai';
+import { OpenAI } from '@ai-sdk/openai';
+import { StreamingTextResponse, experimental_streamText } from 'ai';
 
-// Create an OpenAI API client (that's edge friendly!)
 const openai = new OpenAI({
-  apiKey: process.env.OPENAI_API_KEY || '',
+  apiKey: process.env.OPENAI_API_KEY ?? '',
 });
 
-// IMPORTANT! Set the runtime to edge
 export const runtime = 'edge';
 
+// IMPORTANT: The Next.js Pages Router's API Routes do not support streaming responses.
+// see https://sdk.vercel.ai/docs/guides/frameworks/nextjs-pages
 export default async function handler(req: Request, res: Response) {
   const { messages } = await req.json();
 
-  // Ask OpenAI for a streaming chat completion given the prompt
-  const response = await openai.chat.completions.create({
-    model: 'gpt-3.5-turbo',
-    stream: true,
+  const result = await experimental_streamText({
+    model: openai.chat('gpt-4-turbo-preview'),
     messages,
   });
 
-  // Convert the response into a friendly text-stream
-  const stream = OpenAIStream(response);
-  // Respond with the stream
-  return new StreamingTextResponse(stream);
+  return new StreamingTextResponse(result.toAIStream());
 }