feat(components)!: upgrade ai-sdk to v5 (#4698)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

Author: HugoRCD

docs/.env.example

@@ -2,3 +2,5 @@
 NUXT_PUBLIC_SITE_URL=
 # Used to fetch `nuxt/ui-pro` docs content
 NUXT_GITHUB_TOKEN=
+# Vercel AI gateway key
+AI_GATEWAY_API_KEY=

docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { useChat } from '@ai-sdk/vue'
+import { Chat } from '@ai-sdk/vue'
+import type { UIMessage } from 'ai'
+import { getTextFromMessage } from '@nuxt/ui/utils/ai'
+
+const messages: UIMessage[] = []
+const input = ref('')
 
 const groups = computed(() => [{
   id: 'ai',
@@ -13,13 +18,13 @@ const groups = computed(() => [{
       ai.value = true
 
       if (searchTerm.value) {
-        setMessages([{
+        messages.push({
           id: '1',
           role: 'user',
-          content: searchTerm.value
-        }])
+          parts: [{ type: 'text', text: searchTerm.value }]
+        })
 
-        reload()
+        chat.regenerate()
       }
     }
   }]
@@ -28,7 +33,15 @@ const groups = computed(() => [{
 const ai = ref(false)
 const searchTerm = ref('')
 
-const { messages, input, handleSubmit, status, error, reload, setMessages } = useChat()
+const chat = new Chat({
+  messages
+})
+
+function handleSubmit(e: Event) {
+  e.preventDefault()
+  chat.sendMessage({ text: input.value })
+  input.value = ''
+}
 
 function onClose(e: Event) {
   e.preventDefault()
@@ -43,13 +56,13 @@ function onClose(e: Event) {
       <template v-if="ai" #content>
         <UChatPalette>
           <UChatMessages
-            :messages="messages"
-            :status="status"
+            :messages="chat.messages"
+            :status="chat.status"
             :user="{ side: 'left', variant: 'naked', avatar: { src: 'https://github.com/benjamincanac.png' } }"
             :assistant="{ icon: 'i-lucide-bot' }"
           >
             <template #content="{ message }">
-              <MDC :value="message.content" :cache-key="message.id" unwrap="p" />
+              <MDC :value="getTextFromMessage(message)" :cache-key="message.id" unwrap="p" />
             </template>
           </UChatMessages>
 
@@ -58,7 +71,7 @@ function onClose(e: Event) {
               v-model="input"
               icon="i-lucide-search"
               variant="naked"
-              :error="error"
+              :error="chat.error"
               @submit="handleSubmit"
               @close="onClose"
             />

docs/app/components/content/examples/chat/ChatPaletteModalExample.vue

@@ -1,21 +1,34 @@
 <script setup lang="ts">
-import { useChat } from '@ai-sdk/vue'
+import { Chat } from '@ai-sdk/vue'
+import type { UIMessage } from 'ai'
+import { getTextFromMessage } from '@nuxt/ui/utils/ai'
 
-const { messages, input, handleSubmit, status, error } = useChat()
+const messages: UIMessage[] = []
+const input = ref('')
+
+const chat = new Chat({
+  messages
+})
+
+function handleSubmit(e: Event) {
+  e.preventDefault()
+  chat.sendMessage({ text: input.value })
+  input.value = ''
+}
 </script>
 
 <template>
   <UModal open :ui="{ content: 'sm:h-[28rem]' }">
     <template #content>
       <UChatPalette>
         <UChatMessages
-          :messages="messages"
-          :status="status"
+          :messages="chat.messages"
+          :status="chat.status"
           :user="{ side: 'left', variant: 'naked', avatar: { src: 'https://github.com/benjamincanac.png' } }"
           :assistant="{ icon: 'i-lucide-bot' }"
         >
           <template #content="{ message }">
-            <MDC :value="message.content" :cache-key="message.id" unwrap="p" />
+            <MDC :value="getTextFromMessage(message)" :cache-key="message.id" unwrap="p" />
           </template>
         </UChatMessages>
 
@@ -24,7 +37,7 @@ const { messages, input, handleSubmit, status, error } = useChat()
             v-model="input"
             icon="i-lucide-search"
             variant="naked"
-            :error="error"
+            :error="chat.error"
             @submit="handleSubmit"
           />
         </template>

docs/content/docs/2.components/chat-message.md

@@ -16,7 +16,9 @@ The ChatMessage component renders an `<article>` element for a `user` or `assist
 
 ::u-chat-message
 ---
-content: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
+parts:
+  - type: 'text'
+    text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
 side: 'right'
 variant: 'soft'
 avatar:
@@ -30,18 +32,26 @@ avatar:
 Use the [`ChatMessages`](/docs/components/chat-messages) component to display a list of chat messages.
 ::
 
-### Content
+### Parts
 
-Use the `content` prop to display the message content.
+Use the `parts` prop to display the message content using the AI SDK v5 format.
 
 ::component-code
 ---
 prettier: true
+ignore:
+  - parts
 props:
-  content: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
+  parts:
+    - type: 'text'
+      text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
 ---
 ::
 
+::note
+The `parts` prop is the recommended format for AI SDK v5. Each part has a `type` (e.g., 'text') and corresponding content. The ChatMessage component also supports the deprecated `content` prop for backward compatibility.
+::
+
 ### Side
 
 Use the `side` prop to display the message on the left or right.
@@ -50,10 +60,12 @@ Use the `side` prop to display the message on the left or right.
 ---
 prettier: true
 ignore:
-  - content
+  - parts
 props:
   side: 'right'
-  content: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
+  parts:
+    - type: 'text'
+      text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
 ---
 ::
 
@@ -69,10 +81,12 @@ Use the `variant` prop to change style of the message.
 ---
 prettier: true
 ignore:
-  - content
+  - parts
 props:
   variant: 'soft'
-  content: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
+  parts:
+    - type: 'text'
+      text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
 ---
 ::
 
@@ -88,14 +102,16 @@ Use the `icon` prop to display an [Icon](/docs/components/icon) component next t
 ---
 prettier: true
 ignore:
-  - content
+  - parts
   - side
   - variant
 props:
   icon: i-lucide-user
   variant: 'soft'
   side: 'right'
-  content: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
+  parts:
+    - type: 'text'
+      text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
 ---
 ::
 
@@ -107,15 +123,17 @@ Use the `avatar` prop to display an [Avatar](/docs/components/avatar) component
 ---
 prettier: true
 ignore:
-  - content
+  - parts
   - side
   - variant
 props:
   avatar:
     src: 'https://github.com/benjamincanac.png'
   variant: 'soft'
   side: 'right'
-  content: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
+  parts:
+    - type: 'text'
+      text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
 ---
 ::
 
@@ -125,11 +143,13 @@ You can also use the `avatar.icon` prop to display an icon as the avatar.
 ---
 prettier: true
 ignore:
-  - content
+  - parts
 props:
   avatar:
     icon: i-lucide-bot
-  content: 'Nuxt UI offers several features for building AI chatbots including the ChatMessage, ChatMessages, and ChatPrompt components. Best practices include using the useChat composable from Vercel AI SDK, implementing proper message styling with variants, and utilizing the built-in actions for message interactions. The components are fully customizable with theming support and responsive design.'
+  parts:
+    - type: 'text'
+      text: 'Nuxt UI offers several features for building AI chatbots including the ChatMessage, ChatMessages, and ChatPrompt components. Best practices include using the Chat class from AI SDK v5, implementing proper message styling with variants, and utilizing the built-in actions for message interactions. The components are fully customizable with theming support and responsive design.'
 ---
 ::
 
@@ -143,13 +163,15 @@ prettier: true
 external:
   - actions
 ignore:
-  - content
+  - parts
   - actions
 props:
   actions:
     - label: 'Copy to clipboard'
       icon: i-lucide-copy
-  content: 'Nuxt UI offers several features for building AI chatbots including the ChatMessage, ChatMessages, and ChatPrompt components. Best practices include using the useChat composable from Vercel AI SDK, implementing proper message styling with variants, and utilizing the built-in actions for message interactions. The components are fully customizable with theming support and responsive design.'
+  parts:
+    - type: 'text'
+      text: 'Nuxt UI offers several features for building AI chatbots including the ChatMessage, ChatMessages, and ChatPrompt components. Best practices include using the Chat class from AI SDK v5, implementing proper message styling with variants, and utilizing the built-in actions for message interactions. The components are fully customizable with theming support and responsive design.'
 ---
 ::