Update nuxt and nuxt examples (#2186)

Co-authored-by: Lars Grammel <lars.grammel@gmail.com>
vercel · Jul 8, 2024 · 7e83d75 · 7e83d75
1 parent 5c1f0bd
commit 7e83d75
Show file tree

Hide file tree

Showing 7 changed files with 2,283 additions and 3,108 deletions.
diff --git a/examples/nuxt-openai/nuxt.config.ts b/examples/nuxt-openai/nuxt.config.ts
@@ -2,10 +2,14 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: ['@nuxtjs/tailwindcss'],
+
   nitro: {
     preset: 'vercel-edge', // you can use 'vercel' or other providers here
   },
+
   runtimeConfig: {
     openaiApiKey: '',
   },
+
+  compatibilityDate: '2024-07-05',
 });
diff --git a/examples/nuxt-openai/package.json b/examples/nuxt-openai/package.json
@@ -10,22 +10,23 @@
   },
   "devDependencies": {
     "@ai-sdk/vue": "latest",
-    "@nuxt/devtools": "0.8.0",
-    "@nuxt/ui-templates": "^1.3.1",
-    "@nuxtjs/tailwindcss": "^6.8.0",
+    "@ai-sdk/openai": "latest",
+    "@nuxt/devtools": "1.3.9",
+    "@nuxt/ui-templates": "^1.3.4",
+    "@nuxtjs/tailwindcss": "^6.12.0",
     "@types/node": "^18",
-    "@vue/reactivity": "^3.3.4",
-    "@vue/runtime-core": "^3.3.4",
-    "@vue/runtime-dom": "^3.3.4",
-    "@vue/shared": "^3.4.27",
+    "@vue/reactivity": "^3.4.31",
+    "@vue/runtime-core": "^3.4.31",
+    "@vue/runtime-dom": "^3.4.31",
+    "@vue/shared": "^3.4.31",
     "ai": "latest",
-    "nuxt": "^3.6.5",
-    "openai": "4.47.1",
-    "tailwindcss": "^3.3.3",
-    "ufo": "^1.2.0",
+    "nuxt": "^3.12.3",
+    "openai": "4.52.3",
+    "tailwindcss": "^3.4.4",
+    "ufo": "^1.5.3",
     "unctx": "^2.3.1",
-    "vue": "^3.3.4",
-    "vue-router": "4.2.5"
+    "vue": "^3.4.31",
+    "vue-router": "4.4.0"
   },
   "version": "0.0.0"
 }
diff --git a/examples/nuxt-openai/server/api/chat-with-functions.ts b/examples/nuxt-openai/server/api/chat-with-functions.ts
@@ -47,7 +47,7 @@ export default defineLazyEventHandler(async () => {
     const { messages } = await readBody(event);
 
     const response = await openai.chat.completions.create({
-      model: 'gpt-3.5-turbo-0613',
+      model: 'gpt-3.5-turbo',
       stream: true,
       messages,
       functions,
@@ -74,7 +74,7 @@ export default defineLazyEventHandler(async () => {
           return openai.chat.completions.create({
             messages: [...messages, ...newMessages],
             stream: true,
-            model: 'gpt-3.5-turbo-0613',
+            model: 'gpt-3.5-turbo',
           });
         }
       },

diff --git a/examples/nuxt-openai/server/api/chat-with-vision.ts b/examples/nuxt-openai/server/api/chat-with-vision.ts
@@ -1,10 +1,10 @@
-import { OpenAIStream, StreamingTextResponse } from 'ai';
-import OpenAI from 'openai';
+import { convertToCoreMessages, streamText } from 'ai';
+import { createOpenAI } from '@ai-sdk/openai';
 
 export default defineLazyEventHandler(async () => {
   const apiKey = useRuntimeConfig().openaiApiKey;
   if (!apiKey) throw new Error('Missing OpenAI API key');
-  const openai = new OpenAI({
+  const openai = createOpenAI({
     apiKey: apiKey,
   });
 
@@ -16,31 +16,22 @@ export default defineLazyEventHandler(async () => {
     const currentMessage = messages[messages.length - 1];
 
     // Ask OpenAI for a streaming chat completion given the prompt
-    const response = await openai.chat.completions.create({
-      model: 'gpt-4-vision-preview',
-      stream: true,
-      max_tokens: 150,
+    const response = await streamText({
+      model: openai('gpt-4o'),
+      maxTokens: 150,
       messages: [
-        ...initialMessages,
+        ...convertToCoreMessages(initialMessages),
         {
-          ...currentMessage,
+          role: 'user',
           content: [
             { type: 'text', text: currentMessage.content },
-
-            // forward the image information to OpenAI:
-            {
-              type: 'image_url',
-              image_url: data.imageUrl,
-            },
+            { type: 'image', image: new URL(data.imageUrl) },
           ],
         },
       ],
     });
 
-    // Convert the response into a friendly text-stream
-    const stream = OpenAIStream(response);
-
     // Respond with the stream
-    return new StreamingTextResponse(stream);
+    return response.toAIStreamResponse();
   });
 });
diff --git a/examples/nuxt-openai/server/api/chat.ts b/examples/nuxt-openai/server/api/chat.ts
@@ -1,31 +1,25 @@
-import { OpenAIStream, StreamingTextResponse } from 'ai';
-import OpenAI from 'openai';
-import { ChatCompletionMessageParam } from 'openai/resources/chat';
+import { streamText } from 'ai';
+import { createOpenAI } from '@ai-sdk/openai';
 
 export default defineLazyEventHandler(async () => {
   const apiKey = useRuntimeConfig().openaiApiKey;
   if (!apiKey) throw new Error('Missing OpenAI API key');
-  const openai = new OpenAI({
+
+  const openai = createOpenAI({
     apiKey: apiKey,
   });
 
   return defineEventHandler(async (event: any) => {
     // Extract the `prompt` from the body of the request
-    const { messages } = (await readBody(event)) as {
-      messages: ChatCompletionMessageParam[];
-    };
+    const { messages } = await readBody(event);
 
     // 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 streamText({
+      model: openai('gpt-3.5-turbo'),
       messages,
     });
 
-    // Convert the response into a friendly text-stream
-    const stream = OpenAIStream(response);
-
     // Respond with the stream
-    return new StreamingTextResponse(stream);
+    return result.toAIStreamResponse();
   });
 });
diff --git a/examples/nuxt-openai/server/api/completion.ts b/examples/nuxt-openai/server/api/completion.ts
@@ -1,10 +1,10 @@
-import { OpenAIStream, StreamingTextResponse, StreamData } from 'ai';
-import OpenAI from 'openai';
+import { streamText, StreamingTextResponse, StreamData } from 'ai';
+import { createOpenAI } from '@ai-sdk/openai';
 
 export default defineLazyEventHandler(async () => {
   const apiKey = useRuntimeConfig().openaiApiKey;
   if (!apiKey) throw new Error('Missing OpenAI API key');
-  const openai = new OpenAI({
+  const openai = createOpenAI({
     apiKey: apiKey,
   });
 
@@ -13,9 +13,8 @@ export default defineLazyEventHandler(async () => {
     const { prompt } = await readBody(event);
 
     // 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 streamText({
+      model: openai('gpt-3.5-turbo'),
       messages: [{ role: 'user', content: prompt }],
     });
 
@@ -25,8 +24,8 @@ export default defineLazyEventHandler(async () => {
     data.append({ test: 'value' });
 
     // Convert the response into a friendly text-stream
-    const stream = OpenAIStream(response, {
-      onFinal(completion) {
+    const stream = result.toAIStream({
+      onFinal(_) {
         data.close();
       },
     });