diff --git a/docs/.env.example b/docs/.env.example
index ca0b5d2d07..ed2c8d073a 100644
--- a/docs/.env.example
+++ b/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=
\ No newline at end of file
diff --git a/docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue b/docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue
index e1d4ba1ef2..f9997214ca 100644
--- a/docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue
+++ b/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"
             />
diff --git a/docs/app/components/content/examples/chat/ChatPaletteModalExample.vue b/docs/app/components/content/examples/chat/ChatPaletteModalExample.vue
index f3b0a7c534..6e1e5a7a94 100644
--- a/docs/app/components/content/examples/chat/ChatPaletteModalExample.vue
+++ b/docs/app/components/content/examples/chat/ChatPaletteModalExample.vue
@@ -1,7 +1,20 @@
 <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>
@@ -9,13 +22,13 @@ const { messages, input, handleSubmit, status, error } = useChat()
     <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>
diff --git a/docs/content/docs/2.components/chat-message.md b/docs/content/docs/2.components/chat-message.md
index 47b56a97f7..4732f4747a 100644
--- a/docs/content/docs/2.components/chat-message.md
+++ b/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,7 +123,7 @@ Use the `avatar` prop to display an [Avatar](/docs/components/avatar) component
 ---
 prettier: true
 ignore:
-  - content
+  - parts
   - side
   - variant
 props:
@@ -115,7 +131,9 @@ props:
     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.'
 ---
 ::
 
diff --git a/docs/content/docs/2.components/chat-messages.md b/docs/content/docs/2.components/chat-messages.md
index 06f1f09d89..b2e8067371 100644
--- a/docs/content/docs/2.components/chat-messages.md
+++ b/docs/content/docs/2.components/chat-messages.md
@@ -49,20 +49,29 @@ external:
   - messages
 ignore:
   - messages
+collapse: true
 props:
   messages:
     - id: '6045235a-a435-46b8-989d-2df38ca2eb47'
       role: user
-      content: 'Hello, how are you?'
+      parts:
+        - type: 'text'
+          text: 'Hello, how are you?'
     - id: '7a92b3c1-d5f8-4e76-b8a9-3c1e5fb2e0d8'
       role: assistant
-      content: 'I am doing well, thank you for asking! How can I assist you today?'
+      parts:
+        - type: 'text'
+          text: 'I am doing well, thank you for asking! How can I assist you today?'
     - id: '9c84d6a7-8b23-4f12-a1d5-e7f3b9c05e2a'
       role: user
-      content: 'What is the current weather in Tokyo?'
+      parts:
+        - type: 'text'
+          text: 'What is the current weather in Tokyo?'
     - id: 'b2e5f8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4'
       role: assistant
-      content: "Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies."
+      parts:
+        - type: 'text'
+          text: "Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies."
 ---
 ::
 
@@ -83,12 +92,14 @@ props:
   messages:
     - id: '6045235a-a435-46b8-989d-2df38ca2eb47'
       role: user
-      content: 'Hello, how are you?'
+      parts:
+        - type: 'text'
+          text: 'Hello, how are you?'
 ---
 ::
 
 ::note
-Here's the detail of the different statuses sent by the `useChat` composable:
+Here's the detail of the different statuses from the AI SDK v5 Chat class:
 
 - `submitted`: The message has been sent to the API and we're awaiting the start of the response stream.
 - `streaming`: The response is actively streaming in from the API, receiving chunks of data.
@@ -111,6 +122,7 @@ external:
 ignore:
   - messages
   - avatar.src
+collapse: true
 items:
   user.variant:
     - solid
@@ -130,16 +142,24 @@ props:
   messages:
     - id: '6045235a-a435-46b8-989d-2df38ca2eb47'
       role: user
-      content: 'Hello, how are you?'
+      parts:
+        - type: 'text'
+          text: 'Hello, how are you?'
     - id: '7a92b3c1-d5f8-4e76-b8a9-3c1e5fb2e0d8'
       role: assistant
-      content: 'I am doing well, thank you for asking! How can I assist you today?'
+      parts:
+        - type: 'text'
+          text: 'I am doing well, thank you for asking! How can I assist you today?'
     - id: '9c84d6a7-8b23-4f12-a1d5-e7f3b9c05e2a'
       role: user
-      content: 'What is the current weather in Tokyo?'
+      parts:
+        - type: 'text'
+          text: 'What is the current weather in Tokyo?'
     - id: 'b2e5f8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4'
       role: assistant
-      content: "Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies."
+      parts:
+        - type: 'text'
+          text: "Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies."
 ---
 ::
 
@@ -159,6 +179,7 @@ ignore:
   - messages
   - avatar.icon
   - assistant.actions
+collapse: true
 items:
   assistant.variant:
     - solid
@@ -181,16 +202,24 @@ props:
   messages:
     - id: '6045235a-a435-46b8-989d-2df38ca2eb47'
       role: user
-      content: 'Hello, how are you?'
+      parts:
+        - type: 'text'
+          text: 'Hello, how are you?'
     - id: '7a92b3c1-d5f8-4e76-b8a9-3c1e5fb2e0d8'
       role: assistant
-      content: 'I am doing well, thank you for asking! How can I assist you today?'
+      parts:
+        - type: 'text'
+          text: 'I am doing well, thank you for asking! How can I assist you today?'
     - id: '9c84d6a7-8b23-4f12-a1d5-e7f3b9c05e2a'
       role: user
-      content: 'What is the current weather in Tokyo?'
+      parts:
+        - type: 'text'
+          text: 'What is the current weather in Tokyo?'
     - id: 'b2e5f8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4'
       role: assistant
-      content: "Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies."
+      parts:
+        - type: 'text'
+          text: "Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies."
 ---
 ::
 
@@ -223,22 +252,34 @@ props:
   messages:
     - id: '6045235a-a435-46b8-989d-2df38ca2eb47'
       role: user
-      content: 'Hello, how are you?'
+      parts:
+        - type: 'text'
+          text: 'Hello, how are you?'
     - id: '7a92b3c1-d5f8-4e76-b8a9-3c1e5fb2e0d8'
       role: assistant
-      content: 'I am doing well, thank you for asking! How can I assist you today?'
+      parts:
+        - type: 'text'
+          text: 'I am doing well, thank you for asking! How can I assist you today?'
     - id: '9c84d6a7-8b23-4f12-a1d5-e7f3b9c05e2a'
       role: user
-      content: 'What is the current weather in Tokyo?'
+      parts:
+        - type: 'text'
+          text: 'What is the current weather in Tokyo?'
     - id: 'b2e5f8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4'
       role: assistant
-      content: "Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies. The forecast for the rest of the week shows a slight chance of rain on Thursday, with temperatures gradually rising to 28°C by the weekend. Humidity levels are moderate at around 65%, and wind speeds are light at 8 km/h from the southeast. Air quality is good with an index of 42. The UV index is high at 7, so it's recommended to wear sunscreen if you're planning to spend time outdoors. Sunrise was at 5:24 AM and sunset will be at 6:48 PM, giving Tokyo approximately 13 hours and 24 minutes of daylight today. The moon is currently in its waxing gibbous phase."
+      parts:
+        - type: 'text'
+          text: "Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies. The forecast for the rest of the week shows a slight chance of rain on Thursday, with temperatures gradually rising to 28°C by the weekend. Humidity levels are moderate at around 65%, and wind speeds are light at 8 km/h from the southeast. Air quality is good with an index of 42. The UV index is high at 7, so it's recommended to wear sunscreen if you're planning to spend time outdoors. Sunrise was at 5:24 AM and sunset will be at 6:48 PM, giving Tokyo approximately 13 hours and 24 minutes of daylight today. The moon is currently in its waxing gibbous phase."
     - id: 'c3e5f8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4'
       role: user
-      content: 'Can you recommend some popular tourist attractions in Kyoto?'
+      parts:
+        - type: 'text'
+          text: 'Can you recommend some popular tourist attractions in Kyoto?'
     - id: 'd4f5g8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4'
       role: assistant
-      content: 'Kyoto is known for its beautiful temples, traditional tea houses, and gardens. Some popular attractions include Kinkaku-ji (Golden Pavilion) with its stunning gold leaf exterior reflecting in the mirror pond, Fushimi Inari Shrine with its thousands of vermilion torii gates winding up the mountainside, Arashiyama Bamboo Grove where towering stalks create an otherworldly atmosphere, Kiyomizu-dera Temple perched on a hillside offering panoramic views of the city, and the historic Gion district where you might spot geisha hurrying to evening appointments through narrow stone-paved streets lined with traditional wooden machiya houses.'
+      parts:
+        - type: 'text'
+          text: 'Kyoto is known for its beautiful temples, traditional tea houses, and gardens. Some popular attractions include Kinkaku-ji (Golden Pavilion) with its stunning gold leaf exterior reflecting in the mirror pond, Fushimi Inari Shrine with its thousands of vermilion torii gates winding up the mountainside, Arashiyama Bamboo Grove where towering stalks create an otherworldly atmosphere, Kiyomizu-dera Temple perched on a hillside offering panoramic views of the city, and the historic Gion district where you might spot geisha hurrying to evening appointments through narrow stone-paved streets lined with traditional wooden machiya houses.'
 ---
 ::
 
@@ -264,22 +305,34 @@ props:
   messages:
     - id: '6045235a-a435-46b8-989d-2df38ca2eb47'
       role: user
-      content: 'Hello, how are you?'
+      parts:
+        - type: 'text'
+          text: 'Hello, how are you?'
     - id: '7a92b3c1-d5f8-4e76-b8a9-3c1e5fb2e0d8'
       role: assistant
-      content: 'I am doing well, thank you for asking! How can I assist you today?'
+      parts:
+        - type: 'text'
+          text: 'I am doing well, thank you for asking! How can I assist you today?'
     - id: '9c84d6a7-8b23-4f12-a1d5-e7f3b9c05e2a'
       role: user
-      content: 'What is the current weather in Tokyo?'
+      parts:
+        - type: 'text'
+          text: 'What is the current weather in Tokyo?'
     - id: 'b2e5f8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4'
       role: assistant
-      content: "Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies. The forecast for the rest of the week shows a slight chance of rain on Thursday, with temperatures gradually rising to 28°C by the weekend. Humidity levels are moderate at around 65%, and wind speeds are light at 8 km/h from the southeast. Air quality is good with an index of 42. The UV index is high at 7, so it's recommended to wear sunscreen if you're planning to spend time outdoors. Sunrise was at 5:24 AM and sunset will be at 6:48 PM, giving Tokyo approximately 13 hours and 24 minutes of daylight today. The moon is currently in its waxing gibbous phase."
+      parts:
+        - type: 'text'
+          text: "Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies. The forecast for the rest of the week shows a slight chance of rain on Thursday, with temperatures gradually rising to 28°C by the weekend. Humidity levels are moderate at around 65%, and wind speeds are light at 8 km/h from the southeast. Air quality is good with an index of 42. The UV index is high at 7, so it's recommended to wear sunscreen if you're planning to spend time outdoors. Sunrise was at 5:24 AM and sunset will be at 6:48 PM, giving Tokyo approximately 13 hours and 24 minutes of daylight today. The moon is currently in its waxing gibbous phase."
     - id: 'c3e5f8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4'
       role: user
-      content: 'Can you recommend some popular tourist attractions in Kyoto?'
+      parts:
+        - type: 'text'
+          text: 'Can you recommend some popular tourist attractions in Kyoto?'
     - id: 'd4f5g8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4'
       role: assistant
-      content: 'Kyoto is known for its beautiful temples, traditional tea houses, and gardens. Some popular attractions include Kinkaku-ji (Golden Pavilion) with its stunning gold leaf exterior reflecting in the mirror pond, Fushimi Inari Shrine with its thousands of vermilion torii gates winding up the mountainside, Arashiyama Bamboo Grove where towering stalks create an otherworldly atmosphere, Kiyomizu-dera Temple perched on a hillside offering panoramic views of the city, and the historic Gion district where you might spot geisha hurrying to evening appointments through narrow stone-paved streets lined with traditional wooden machiya houses.'
+      parts:
+        - type: 'text'
+          text: 'Kyoto is known for its beautiful temples, traditional tea houses, and gardens. Some popular attractions include Kinkaku-ji (Golden Pavilion) with its stunning gold leaf exterior reflecting in the mirror pond, Fushimi Inari Shrine with its thousands of vermilion torii gates winding up the mountainside, Arashiyama Bamboo Grove where towering stalks create an otherworldly atmosphere, Kiyomizu-dera Temple perched on a hillside offering panoramic views of the city, and the historic Gion district where you might spot geisha hurrying to evening appointments through narrow stone-paved streets lined with traditional wooden machiya houses.'
 ---
 ::
 
@@ -317,8 +370,8 @@ Use the `should-scroll-to-bottom` prop to enable/disable bottom auto scroll when
 
 ## Examples
 
-::note{to="https://sdk.vercel.ai/docs/getting-started/nuxt" target="_blank"}
-These chat components are designed to be used with the `useChat` composable from **Vercel AI SDK**.
+::note{to="https://ai-sdk.dev/docs/getting-started/nuxt" target="_blank"}
+These chat components are designed to be used with the **AI SDK v5** from **Vercel AI SDK**.
 ::
 
 ::callout{icon="i-simple-icons-github" to="https://github.com/nuxt-ui-pro/chat" target="_blank"}
@@ -327,24 +380,37 @@ Check out the source code of our **AI Chat template** on GitHub for a real-life
 
 ### Within a page
 
-Use the ChatMessages component with the `useChat` composable to display a list of chat messages within a page.
+Use the ChatMessages component with the `Chat` class from AI SDK v5 to display a list of chat messages within a page.
 
 Pass the `messages` prop alongside the `status` prop that will be used for the auto scroll and the indicator display.
 
-```vue [pages/\[id\\].vue] {4,11-15}
+```vue [pages/\[id\\].vue] {2-5,8,12-16,20}
 <script setup lang="ts">
-import { useChat } from '@ai-sdk/vue'
-
-const { messages, input, handleSubmit, reload, stop, status, error } = useChat()
+import { Chat } from '@ai-sdk/vue'
+import { getTextFromMessage } from '@nuxt/ui/utils/ai'
+
+const input = ref('')
+
+const chat = new Chat({
+  onError(error) {
+    console.error('Chat error:', error)
+  }
+})
+
+const handleSubmit = (e: Event) => {
+  e.preventDefault()
+  chat.sendMessage({ text: input.value })
+  input.value = ''
+}
 </script>
 
 <template>
   <UDashboardPanel>
     <template #body>
       <UContainer>
-        <UChatMessages :messages="messages" :status="status">
+        <UChatMessages :messages="chat.messages" :status="chat.status">
           <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>
       </UContainer>
@@ -352,8 +418,8 @@ const { messages, input, handleSubmit, reload, stop, status, error } = useChat()
 
     <template #footer>
       <UContainer>
-        <UChatPrompt v-model="input" :error="error" @submit="handleSubmit">
-          <UChatPromptSubmit :status="status" @stop="stop" @reload="reload" />
+        <UChatPrompt v-model="input" :error="chat.error" @submit="handleSubmit">
+          <UChatPromptSubmit :status="chat.status" @stop="chat.stop" @reload="chat.regenerate" />
         </UChatPrompt>
       </UContainer>
     </template>
@@ -362,7 +428,7 @@ const { messages, input, handleSubmit, reload, stop, status, error } = useChat()
 ```
 
 ::note
-In this example, we use the `MDC` component from [`@nuxtjs/mdc`](https://github.com/nuxt-modules/mdc) to render the content of the message. As Nuxt UI provides pre-styled prose components, your content will be automatically styled.
+In this example, we use the `MDC` component from [`@nuxtjs/mdc`](https://github.com/nuxt-modules/mdc) to render the content of the message. The `getTextFromMessage` utility extracts the text content from the AI SDK V5 message parts. As Nuxt UI provides pre-styled prose components, your content will be automatically styled.
 ::
 
 ## API
@@ -379,10 +445,14 @@ In this example, we use the `MDC` component from [`@nuxtjs/mdc`](https://github.
 You can use all the slots of the [`ChatMessage`](/docs/components/chat-message#slots) component inside ChatMessages, they are automatically forwarded allowing you to customize individual messages when using the `messages` prop.
 
 ```vue{3-5}
+<script setup lang="ts">
+import { getTextFromMessage } from '@nuxt/ui/utils/ai'
+</script>
+
 <template>
   <UChatMessages :messages="messages" :status="status">
     <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>
 </template>
diff --git a/docs/content/docs/2.components/chat-palette.md b/docs/content/docs/2.components/chat-palette.md
index 970cb84707..712ed93ed0 100644
--- a/docs/content/docs/2.components/chat-palette.md
+++ b/docs/content/docs/2.components/chat-palette.md
@@ -26,8 +26,8 @@ The ChatPalette component is a structured layout wrapper that organizes [ChatMes
 
 ## Examples
 
-::note{to="https://sdk.vercel.ai/docs/getting-started/nuxt" target="_blank"}
-These chat components are designed to be used with the `useChat` composable from **Vercel AI SDK**.
+::note{to="https://ai-sdk.dev/docs/getting-started/nuxt" target="_blank"}
+These chat components are designed to be used with the **AI SDK v5** from **Vercel AI SDK**.
 ::
 
 ### Within a Modal
diff --git a/docs/content/docs/2.components/chat-prompt-submit.md b/docs/content/docs/2.components/chat-prompt-submit.md
index 3755df5f0d..92bcc89e20 100644
--- a/docs/content/docs/2.components/chat-prompt-submit.md
+++ b/docs/content/docs/2.components/chat-prompt-submit.md
@@ -235,8 +235,8 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.re
 
 ## Examples
 
-::note{to="https://sdk.vercel.ai/docs/getting-started/nuxt" target="_blank"}
-These chat components are designed to be used with the `useChat` composable from **Vercel AI SDK**.
+::note{to="https://ai-sdk.dev/docs/getting-started/nuxt" target="_blank"}
+These chat components are designed to be used with the **AI SDK v5** from **Vercel AI SDK**.
 ::
 
 ::callout{icon="i-simple-icons-github" to="https://github.com/nuxt-ui-pro/chat" target="_blank"}
@@ -245,24 +245,37 @@ Check out the source code of our **AI Chat template** on GitHub for a real-life
 
 ### Within a page
 
-Use the ChatPromptSubmit component with the `useChat` composable to display a chat prompt within a page.
+Use the ChatPromptSubmit component with the `Chat` class from AI SDK v5 to display a chat prompt within a page.
 
 Pass the `status` prop and listen to the `stop` and `reload` events to control the chat.
 
-```vue [pages/\[id\\].vue] {4,22}
+```vue [pages/\[id\\].vue] {2-4,7,11-15,19,24}
 <script setup lang="ts">
-import { useChat } from '@ai-sdk/vue'
-
-const { messages, input, handleSubmit, reload, stop, status, error } = useChat()
+import { Chat } from '@ai-sdk/vue'
+import { getTextFromMessage } from '@nuxt/ui/utils/ai'
+
+const input = ref('')
+
+const chat = new Chat({
+  onError(error) {
+    console.error('Chat error:', error)
+  }
+})
+
+const handleSubmit = (e: Event) => {
+  e.preventDefault()
+  chat.sendMessage({ text: input.value })
+  input.value = ''
+}
 </script>
 
 <template>
   <UDashboardPanel>
     <template #body>
       <UContainer>
-        <UChatMessages :messages="messages" :status="status">
+        <UChatMessages :messages="chat.messages" :status="chat.status">
           <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>
       </UContainer>
@@ -270,8 +283,8 @@ const { messages, input, handleSubmit, reload, stop, status, error } = useChat()
 
     <template #footer>
       <UContainer>
-        <UChatPrompt v-model="input" :error="error" @submit="handleSubmit">
-          <UChatPromptSubmit :status="status" @stop="stop" @reload="reload" />
+        <UChatPrompt v-model="input" :error="chat.error" @submit="handleSubmit">
+          <UChatPromptSubmit :status="chat.status" @stop="chat.stop" @reload="chat.regenerate" />
         </UChatPrompt>
       </UContainer>
     </template>
diff --git a/docs/content/docs/2.components/chat-prompt.md b/docs/content/docs/2.components/chat-prompt.md
index ec085ed5c2..6bbae0451c 100644
--- a/docs/content/docs/2.components/chat-prompt.md
+++ b/docs/content/docs/2.components/chat-prompt.md
@@ -80,8 +80,8 @@ props:
 
 ## Examples
 
-::note{to="https://sdk.vercel.ai/docs/getting-started/nuxt" target="_blank"}
-These chat components are designed to be used with the `useChat` composable from **Vercel AI SDK**.
+::note{to="https://ai-sdk.dev/docs/getting-started/nuxt" target="_blank"}
+These chat components are designed to be used with the **AI SDK v5** from **Vercel AI SDK**.
 ::
 
 ::callout{icon="i-simple-icons-github" to="https://github.com/nuxt-ui-pro/chat" target="_blank"}
@@ -90,24 +90,37 @@ Check out the source code of our **AI Chat template** on GitHub for a real-life
 
 ### Within a page
 
-Use the ChatPrompt component with the `useChat` composable to display a chat prompt within a page.
+Use the ChatPrompt component with the `Chat` class from AI SDK v5 to display a chat prompt within a page.
 
 Pass the `input` prop alongside the `error` prop to disable the textarea when an error occurs.
 
-```vue [pages/\[id\\].vue] {4,21,23}
+```vue [pages/\[id\\].vue] {2-4,7,11-15,19}
 <script setup lang="ts">
-import { useChat } from '@ai-sdk/vue'
+import { Chat } from '@ai-sdk/vue'
+import { getTextFromMessage } from '@nuxt/ui/utils/ai'
 
-const { messages, input, handleSubmit, reload, stop, status, error } = useChat()
+const input = ref('')
+
+const chat = new Chat({
+  onError(error) {
+    console.error('Chat error:', error)
+  }
+})
+
+const handleSubmit = (e: Event) => {
+  e.preventDefault()
+  chat.sendMessage({ text: input.value })
+  input.value = ''
+}
 </script>
 
 <template>
   <UDashboardPanel>
     <template #body>
       <UContainer>
-        <UChatMessages :messages="messages" :status="status">
+        <UChatMessages :messages="chat.messages" :status="chat.status">
           <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>
       </UContainer>
@@ -115,8 +128,8 @@ const { messages, input, handleSubmit, reload, stop, status, error } = useChat()
 
     <template #footer>
       <UContainer>
-        <UChatPrompt v-model="input" :error="error" @submit="handleSubmit">
-          <UChatPromptSubmit :status="status" @stop="stop" @reload="reload" />
+        <UChatPrompt v-model="input" :error="chat.error" @submit="handleSubmit">
+          <UChatPromptSubmit :status="chat.status" @stop="chat.stop" @reload="chat.regenerate" />
         </UChatPrompt>
       </UContainer>
     </template>
@@ -126,20 +139,23 @@ const { messages, input, handleSubmit, reload, stop, status, error } = useChat()
 
 You can also use it as a starting point for a chat interface.
 
-```vue [pages/index.vue]{23,25}
+```vue [pages/index.vue] {2,5,9-12}
 <script setup lang="ts">
+import { Chat } from '@ai-sdk/vue'
+
 const input = ref('')
-const loading = ref(false)
+const chat = new Chat()
 
 async function onSubmit() {
-  loading.value = true
+  const userInput = input.value
+  input.value = ''
 
-  const chat = await $fetch('/api/chats', {
-    method: 'POST',
-    body: { input }
-  })
+  chat.sendMessage({ text: userInput })
 
-  navigateTo(`/chat/${chat.id}`)
+  // Navigate to chat page after first message
+  if (chat.messages.length === 1) {
+    await navigateTo('/chat')
+  }
 }
 </script>
 
@@ -149,8 +165,8 @@ async function onSubmit() {
       <UContainer>
         <h1>How can I help you today?</h1>
 
-        <UChatPrompt v-model="input" :status="loading ? 'streaming' : 'ready'" @submit="onSubmit">
-          <UChatPromptSubmit />
+        <UChatPrompt v-model="input" @submit="onSubmit">
+          <UChatPromptSubmit :status="chat.status" />
         </UChatPrompt>
       </UContainer>
     </template>
diff --git a/docs/package.json b/docs/package.json
index 977166ae2e..bac45133cb 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -9,7 +9,8 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@ai-sdk/vue": "^1.2.12",
+    "@ai-sdk/gateway": "^1.0.4",
+    "@ai-sdk/vue": "^2.0.9",
     "@iconify-json/logos": "^1.2.9",
     "@iconify-json/lucide": "^1.2.62",
     "@iconify-json/simple-icons": "^1.2.47",
@@ -21,7 +22,7 @@
     "@octokit/rest": "^22.0.0",
     "@vueuse/integrations": "^13.6.0",
     "@vueuse/nuxt": "^13.6.0",
-    "ai": "^4.3.19",
+    "ai": "^5.0.9",
     "better-sqlite3": "^12.2.0",
     "capture-website": "^4.2.0",
     "joi": "^17.13.3",
diff --git a/docs/server/api/chat.ts b/docs/server/api/chat.ts
index cf5e96c4fe..4da88ea1f3 100644
--- a/docs/server/api/chat.ts
+++ b/docs/server/api/chat.ts
@@ -1,13 +1,13 @@
-// import { streamText } from 'ai'
+import { streamText, convertToModelMessages } from 'ai'
+import { gateway } from '@ai-sdk/gateway'
 
 export default defineEventHandler(async (event) => {
   const { messages } = await readBody(event)
 
-  return messages
-  // return streamText({
-  //   model: workersAI('@cf/meta/llama-3.2-3b-instruct'),
-  //   maxTokens: 10000,
-  //   system: 'You are a helpful assistant that can answer questions and help.',
-  //   messages
-  // }).toDataStreamResponse()
+  return streamText({
+    model: gateway('openai/gpt-4o-mini'),
+    maxOutputTokens: 10000,
+    system: 'You are a helpful assistant that can answer questions and help.',
+    messages: convertToModelMessages(messages)
+  }).toUIMessageStreamResponse()
 })
diff --git a/package.json b/package.json
index d7480afb30..ab52d23c21 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,7 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@ai-sdk/vue": "^1.2.12",
+    "@ai-sdk/vue": "^2.0.9",
     "@iconify/vue": "^5.0.0",
     "@internationalized/date": "^3.8.2",
     "@internationalized/number": "^3.6.4",
@@ -244,4 +244,4 @@
     "framework",
     "ui-framework"
   ]
-}
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 91a6f6b691..0910808ce5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,8 +18,8 @@ importers:
   .:
     dependencies:
       '@ai-sdk/vue':
-        specifier: ^1.2.12
-        version: 1.2.12(vue@3.5.18(typescript@5.8.3))(zod@4.0.17)
+        specifier: ^2.0.9
+        version: 2.0.9(vue@3.5.18(typescript@5.8.3))(zod@4.0.17)
       '@iconify/vue':
         specifier: ^5.0.0
         version: 5.0.0(vue@3.5.18(typescript@5.8.3))
@@ -237,9 +237,12 @@ importers:
 
   docs:
     dependencies:
+      '@ai-sdk/gateway':
+        specifier: ^1.0.4
+        version: 1.0.4(zod@4.0.17)
       '@ai-sdk/vue':
-        specifier: ^1.2.12
-        version: 1.2.12(vue@3.5.18(typescript@5.8.3))(zod@4.0.17)
+        specifier: ^2.0.9
+        version: 2.0.9(vue@3.5.18(typescript@5.8.3))(zod@4.0.17)
       '@iconify-json/logos':
         specifier: ^1.2.9
         version: 1.2.9
@@ -274,8 +277,8 @@ importers:
         specifier: ^13.6.0
         version: 13.6.0(magicast@0.3.5)(nuxt@4.0.3(@netlify/blobs@9.1.2)(@parcel/watcher@2.5.1)(@types/node@24.0.7)(@vue/compiler-sfc@3.5.18)(better-sqlite3@12.2.0)(db0@0.3.2(better-sqlite3@12.2.0))(eslint@9.33.0(jiti@2.5.1))(ioredis@5.6.1)(lightningcss@1.30.1)(magicast@0.3.5)(meow@13.2.0)(optionator@0.9.4)(rollup@4.34.9)(terser@5.43.1)(typescript@5.8.3)(vite@7.0.6(@types/node@24.0.7)(jiti@2.5.1)(lightningcss@1.30.1)(terser@5.43.1)(yaml@2.8.0))(vue-tsc@3.0.5(typescript@5.8.3))(yaml@2.8.0))(vue@3.5.18(typescript@5.8.3))
       ai:
-        specifier: ^4.3.19
-        version: 4.3.19(react@19.1.0)(zod@4.0.17)
+        specifier: ^5.0.9
+        version: 5.0.9(zod@4.0.17)
       better-sqlite3:
         specifier: ^12.2.0
         version: 12.2.0
@@ -393,34 +396,24 @@ importers:
 
 packages:
 
-  '@ai-sdk/provider-utils@2.2.8':
-    resolution: {integrity: sha512-fqhG+4sCVv8x7nFzYnFo19ryhAa3w096Kmc3hWxMQfW/TubPOmt3A6tYZhl4mUfQWWQMsuSkLrtjlWuXBVSGQA==}
+  '@ai-sdk/gateway@1.0.4':
+    resolution: {integrity: sha512-1roLdgMbFU3Nr4MC97/te7w6OqxsWBkDUkpbCcvxF3jz/ku91WVaJldn/PKU8feMKNyI5W9wnqhbjb1BqbExOQ==}
     engines: {node: '>=18'}
     peerDependencies:
-      zod: ^3.23.8
+      zod: ^3.25.76 || ^4
 
-  '@ai-sdk/provider@1.1.3':
-    resolution: {integrity: sha512-qZMxYJ0qqX/RfnuIaab+zp8UAeJn/ygXXAffR5I4N0n1IrvA6qBsjc8hXLmBiMV2zoXlifkacF7sEFnYnjBcqg==}
-    engines: {node: '>=18'}
-
-  '@ai-sdk/react@1.2.12':
-    resolution: {integrity: sha512-jK1IZZ22evPZoQW3vlkZ7wvjYGYF+tRBKXtrcolduIkQ/m/sOAVcVeVDUDvh1T91xCnWCdUGCPZg2avZ90mv3g==}
+  '@ai-sdk/provider-utils@3.0.1':
+    resolution: {integrity: sha512-/iP1sKc6UdJgGH98OCly7sWJKv+J9G47PnTjIj40IJMUQKwDrUMyf7zOOfRtPwSuNifYhSoJQ4s1WltI65gJ/g==}
     engines: {node: '>=18'}
     peerDependencies:
-      react: ^18 || ^19 || ^19.0.0-rc
-      zod: ^3.23.8
-    peerDependenciesMeta:
-      zod:
-        optional: true
+      zod: ^3.25.76 || ^4
 
-  '@ai-sdk/ui-utils@1.2.11':
-    resolution: {integrity: sha512-3zcwCc8ezzFlwp3ZD15wAPjf2Au4s3vAbKsXQVyhxODHcmu0iyPO2Eua6D/vicq/AUm/BAo60r97O6HU+EI0+w==}
+  '@ai-sdk/provider@2.0.0':
+    resolution: {integrity: sha512-6o7Y2SeO9vFKB8lArHXehNuusnpddKPk7xqL7T2/b+OvXMRIXUO1rR4wcv1hAFUAT9avGZshty3Wlua/XA7TvA==}
     engines: {node: '>=18'}
-    peerDependencies:
-      zod: ^3.23.8
 
-  '@ai-sdk/vue@1.2.12':
-    resolution: {integrity: sha512-uJJ4w6vlj3mmWzjwg+1dqKtyQSVmavO//189eh3D6bUC/G17OWQdV47b67FaOiNkdlDIxormmbUOjlYDQv0TtA==}
+  '@ai-sdk/vue@2.0.9':
+    resolution: {integrity: sha512-Wru2Tn9W4Nc7zxa0Jwoc+WeG1FUCT7wwd/RkDGADeTJ4ycN6NQ5eABXyclbrRTZ0hWNXLFfr/yHT+sudqwuWfw==}
     engines: {node: '>=18'}
     peerDependencies:
       vue: ^3.3.4
@@ -2762,9 +2755,6 @@ packages:
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
-  '@types/diff-match-patch@1.0.36':
-    resolution: {integrity: sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==}
-
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
@@ -3288,15 +3278,11 @@ packages:
     resolution: {integrity: sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==}
     engines: {node: '>= 14'}
 
-  ai@4.3.19:
-    resolution: {integrity: sha512-dIE2bfNpqHN3r6IINp9znguYdhIOheKW2LDigAMrgt/upT3B8eBGPSCblENvaZGoq+hxaN9fSMzjWpbqloP+7Q==}
+  ai@5.0.9:
+    resolution: {integrity: sha512-l7YdzsCTId7CDNNQ+roC0m4uDMmVIO9NpDC3bI2RxNDss3XpGIvsbHq7bT+IZzMYIqGbHK17HI0eiOOvtwzN6Q==}
     engines: {node: '>=18'}
     peerDependencies:
-      react: ^18 || ^19 || ^19.0.0-rc
-      zod: ^3.23.8
-    peerDependenciesMeta:
-      react:
-        optional: true
+      zod: ^3.25.76 || ^4
 
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
@@ -4156,9 +4142,6 @@ packages:
   dfa@1.2.0:
     resolution: {integrity: sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==}
 
-  diff-match-patch@1.0.5:
-    resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
-
   diff@8.0.2:
     resolution: {integrity: sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==}
     engines: {node: '>=0.3.1'}
@@ -4532,6 +4515,10 @@ packages:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
 
+  eventsource-parser@3.0.3:
+    resolution: {integrity: sha512-nVpZkTMM9rF6AQ9gPJpFsNAMt48wIzB5TQgiTLdHiuO8XEDhUgZEhqKlZWXbIzo9VmJ/HvysHqEaVeD5v9TPvA==}
+    engines: {node: '>=20.0.0'}
+
   execa@8.0.1:
     resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
     engines: {node: '>=16.17'}
@@ -5313,11 +5300,6 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
-  jsondiffpatch@0.6.0:
-    resolution: {integrity: sha512-3QItJOXp2AP1uv7waBkao5nCvhEv+QmJAd38Ybq7wNI74Q+BBmnLn4EDKz6yI9xGAIQoUF87qHt+kc1IVxB4zQ==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    hasBin: true
-
   junk@4.0.1:
     resolution: {integrity: sha512-Qush0uP+G8ZScpGMZvHUiRfI0YBWuB3gVBYlI0v0vvOJt5FLicco+IkP0a50LqTTQhmts/m6tP5SWE+USyIvcQ==}
     engines: {node: '>=12.20'}
@@ -6828,9 +6810,6 @@ packages:
   scule@1.3.0:
     resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
 
-  secure-json-parse@2.7.0:
-    resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
-
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -7137,11 +7116,6 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
 
-  swr@2.3.3:
-    resolution: {integrity: sha512-dshNvs3ExOqtZ6kJBaAsabhPdHyeY4P2cKwRCniDVifBMoG/SVI7tfLWqPXriVspf2Rg4tPzXJTnwaihIeFw2A==}
-    peerDependencies:
-      react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   swrv@1.1.0:
     resolution: {integrity: sha512-pjllRDr2s0iTwiE5Isvip51dZGR7GjLH1gCSVyE8bQnbAx6xackXsFdojau+1O5u98yHF5V73HQGOFxKUXO9gQ==}
     peerDependencies:
@@ -7199,10 +7173,6 @@ packages:
   text-hex@1.0.0:
     resolution: {integrity: sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==}
 
-  throttleit@2.1.0:
-    resolution: {integrity: sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==}
-    engines: {node: '>=18'}
-
   through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
@@ -7596,11 +7566,6 @@ packages:
   urlpattern-polyfill@8.0.2:
     resolution: {integrity: sha512-Qp95D4TPJl1kC9SKigDcqgyM2VDVO4RiJc2d4qe5GrYm+zbIQCWWKAFaJNQ4BhdFeDGwBmAxqJBwWSJDb9T3BQ==}
 
-  use-sync-external-store@1.5.0:
-    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -8068,38 +8033,28 @@ packages:
 
 snapshots:
 
-  '@ai-sdk/provider-utils@2.2.8(zod@4.0.17)':
+  '@ai-sdk/gateway@1.0.4(zod@4.0.17)':
     dependencies:
-      '@ai-sdk/provider': 1.1.3
-      nanoid: 3.3.11
-      secure-json-parse: 2.7.0
+      '@ai-sdk/provider': 2.0.0
+      '@ai-sdk/provider-utils': 3.0.1(zod@4.0.17)
       zod: 4.0.17
 
-  '@ai-sdk/provider@1.1.3':
-    dependencies:
-      json-schema: 0.4.0
-
-  '@ai-sdk/react@1.2.12(react@19.1.0)(zod@4.0.17)':
+  '@ai-sdk/provider-utils@3.0.1(zod@4.0.17)':
     dependencies:
-      '@ai-sdk/provider-utils': 2.2.8(zod@4.0.17)
-      '@ai-sdk/ui-utils': 1.2.11(zod@4.0.17)
-      react: 19.1.0
-      swr: 2.3.3(react@19.1.0)
-      throttleit: 2.1.0
-    optionalDependencies:
+      '@ai-sdk/provider': 2.0.0
+      '@standard-schema/spec': 1.0.0
+      eventsource-parser: 3.0.3
       zod: 4.0.17
+      zod-to-json-schema: 3.24.6(zod@4.0.17)
 
-  '@ai-sdk/ui-utils@1.2.11(zod@4.0.17)':
+  '@ai-sdk/provider@2.0.0':
     dependencies:
-      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.2.8(zod@4.0.17)
-      zod: 4.0.17
-      zod-to-json-schema: 3.24.6(zod@4.0.17)
+      json-schema: 0.4.0
 
-  '@ai-sdk/vue@1.2.12(vue@3.5.18(typescript@5.8.3))(zod@4.0.17)':
+  '@ai-sdk/vue@2.0.9(vue@3.5.18(typescript@5.8.3))(zod@4.0.17)':
     dependencies:
-      '@ai-sdk/provider-utils': 2.2.8(zod@4.0.17)
-      '@ai-sdk/ui-utils': 1.2.11(zod@4.0.17)
+      '@ai-sdk/provider-utils': 3.0.1(zod@4.0.17)
+      ai: 5.0.9(zod@4.0.17)
       swrv: 1.1.0(vue@3.5.18(typescript@5.8.3))
     optionalDependencies:
       vue: 3.5.18(typescript@5.8.3)
@@ -10530,8 +10485,6 @@ snapshots:
 
   '@types/deep-eql@4.0.2': {}
 
-  '@types/diff-match-patch@1.0.36': {}
-
   '@types/estree@1.0.6': {}
 
   '@types/estree@1.0.8': {}
@@ -11130,17 +11083,13 @@ snapshots:
 
   agent-base@7.1.3: {}
 
-  ai@4.3.19(react@19.1.0)(zod@4.0.17):
+  ai@5.0.9(zod@4.0.17):
     dependencies:
-      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.2.8(zod@4.0.17)
-      '@ai-sdk/react': 1.2.12(react@19.1.0)(zod@4.0.17)
-      '@ai-sdk/ui-utils': 1.2.11(zod@4.0.17)
+      '@ai-sdk/gateway': 1.0.4(zod@4.0.17)
+      '@ai-sdk/provider': 2.0.0
+      '@ai-sdk/provider-utils': 3.0.1(zod@4.0.17)
       '@opentelemetry/api': 1.9.0
-      jsondiffpatch: 0.6.0
       zod: 4.0.17
-    optionalDependencies:
-      react: 19.1.0
 
   ajv@6.12.6:
     dependencies:
@@ -12003,8 +11952,6 @@ snapshots:
 
   dfa@1.2.0: {}
 
-  diff-match-patch@1.0.5: {}
-
   diff@8.0.2: {}
 
   dom-serializer@2.0.0:
@@ -12469,6 +12416,8 @@ snapshots:
 
   events@3.3.0: {}
 
+  eventsource-parser@3.0.3: {}
+
   execa@8.0.1:
     dependencies:
       cross-spawn: 7.0.6
@@ -13353,12 +13302,6 @@ snapshots:
 
   json5@2.2.3: {}
 
-  jsondiffpatch@0.6.0:
-    dependencies:
-      '@types/diff-match-patch': 1.0.36
-      chalk: 5.4.1
-      diff-match-patch: 1.0.5
-
   junk@4.0.1: {}
 
   jwt-decode@4.0.0: {}
@@ -15141,7 +15084,8 @@ snapshots:
       minimist: 1.2.8
       strip-json-comments: 2.0.1
 
-  react@19.1.0: {}
+  react@19.1.0:
+    optional: true
 
   read-package-up@11.0.0:
     dependencies:
@@ -15509,8 +15453,6 @@ snapshots:
 
   scule@1.3.0: {}
 
-  secure-json-parse@2.7.0: {}
-
   semver@6.3.1: {}
 
   semver@7.7.2: {}
@@ -15886,12 +15828,6 @@ snapshots:
       picocolors: 1.1.1
       sax: 1.4.1
 
-  swr@2.3.3(react@19.1.0):
-    dependencies:
-      dequal: 2.0.3
-      react: 19.1.0
-      use-sync-external-store: 1.5.0(react@19.1.0)
-
   swrv@1.1.0(vue@3.5.18(typescript@5.8.3)):
     dependencies:
       vue: 3.5.18(typescript@5.8.3)
@@ -15963,8 +15899,6 @@ snapshots:
 
   text-hex@1.0.0: {}
 
-  throttleit@2.1.0: {}
-
   through@2.3.8: {}
 
   tiny-case@1.0.3: {}
@@ -16376,10 +16310,6 @@ snapshots:
 
   urlpattern-polyfill@8.0.2: {}
 
-  use-sync-external-store@1.5.0(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-
   util-deprecate@1.0.2: {}
 
   uuid@11.1.0: {}
diff --git a/src/runtime/components/ChatMessage.vue b/src/runtime/components/ChatMessage.vue
index 32394c6cbf..939cede291 100644
--- a/src/runtime/components/ChatMessage.vue
+++ b/src/runtime/components/ChatMessage.vue
@@ -1,13 +1,13 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
-import type { Message } from '@ai-sdk/vue'
+import type { UIMessage } from 'ai'
 import theme from '#build/ui/chat-message'
 import type { AvatarProps, ButtonProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type ChatMessage = ComponentConfig<typeof theme, AppConfig, 'chatMessage'>
 
-export interface ChatMessageProps extends Message {
+export interface ChatMessageProps extends UIMessage {
   /**
    * The element or component this component should render as.
    * @defaultValue 'article'
@@ -31,20 +31,25 @@ export interface ChatMessageProps extends Message {
    * The `label` will be used in a tooltip.
    * `{ size: 'xs', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
    */
-  actions?: (Omit<ButtonProps, 'onClick'> & { onClick?: (e: MouseEvent, message: Message) => void })[]
+  actions?: (Omit<ButtonProps, 'onClick'> & { onClick?: (e: MouseEvent, message: UIMessage) => void })[]
   /**
    * Render the message in a compact style.
    * This is done automatically when used inside a `UChatPalette`{lang="ts-type"}.
    * @defaultValue false
    */
   compact?: boolean
+  /**
+   * @deprecated Use `parts` instead. (https://ai-sdk.dev/docs/migration-guides/migration-guide-5-0#content--parts-array)
+   * Use to display the content of the message.
+   */
+  content?: string
   class?: any
   ui?: ChatMessage['slots']
 }
 
 export interface ChatMessageSlots {
   leading(props: { avatar: ChatMessageProps['avatar'] }): any
-  content(props: Pick<ChatMessageProps, 'content' | 'reasoning' | 'experimental_attachments' | 'annotations' | 'toolInvocations' | 'parts'>): any
+  content(props: ChatMessageProps): any
   actions(props: { actions: ChatMessageProps['actions'] }): any
 }
 </script>
@@ -86,17 +91,24 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatMessage
         </slot>
       </div>
 
-      <div v-if="content || !!slots.content" :class="ui.content({ class: props.ui?.content })">
+      <div v-if="content || parts.length || !!slots.content" :class="ui.content({ class: props.ui?.content })">
         <slot
+          :id="id"
           name="content"
+          :role="role"
           :content="content"
-          :reasoning="reasoning"
-          :experimental_attachments="experimental_attachments"
-          :annotations="annotations"
-          :tool-invocations="toolInvocations"
           :parts="parts"
         >
-          {{ content }}
+          <template v-if="content">
+            {{ content }}
+          </template>
+          <template v-else>
+            <template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
+              <template v-if="part.type === 'text'">
+                {{ part.text }}
+              </template>
+            </template>
+          </template>
         </slot>
       </div>
 
diff --git a/src/runtime/components/ChatMessages.vue b/src/runtime/components/ChatMessages.vue
index 0aac49be01..997bebe0ae 100644
--- a/src/runtime/components/ChatMessages.vue
+++ b/src/runtime/components/ChatMessages.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
-import type { Message, UseChatHelpers } from '@ai-sdk/vue'
+import type { UIMessage, ChatStatus } from 'ai'
 import theme from '#build/ui/chat-messages'
 import type { ButtonProps, ChatMessageProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
@@ -8,8 +8,8 @@ import type { ComponentConfig } from '../types/tv'
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>
 
 export interface ChatMessagesProps {
-  messages?: Message[]
-  status?: UseChatHelpers['status']['value']
+  messages?: UIMessage[]
+  status?: ChatStatus
   /**
    * Whether to automatically scroll to the bottom when a message is streaming.
    * @defaultValue false
@@ -61,9 +61,9 @@ export interface ChatMessagesSlots {
   default(props?: {}): any
   indicator(props?: {}): any
   viewport(props: { onClick: () => void }): any
-  content(props: { message: Message }): any
-  leading(props: { message: Message }): any
-  actions(props: { message: Message }): any
+  content(props: { message: UIMessage }): any
+  leading(props: { message: UIMessage }): any
+  actions(props: { message: UIMessage }): any
 }
 </script>
 
@@ -277,9 +277,8 @@ onMounted(() => {
     <UChatMessage
       v-if="status === 'submitted'"
       id="indicator"
-      content=""
       role="assistant"
-      v-bind="{ ...assistantProps, actions: undefined }"
+      v-bind="{ ...assistantProps, actions: undefined, parts: [] }"
       :compact="compact"
     >
       <template #content>
diff --git a/src/runtime/components/ChatPromptSubmit.vue b/src/runtime/components/ChatPromptSubmit.vue
index 71424d2282..a2c843ae70 100644
--- a/src/runtime/components/ChatPromptSubmit.vue
+++ b/src/runtime/components/ChatPromptSubmit.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
+import type { ChatStatus } from 'ai'
 import type { AppConfig } from '@nuxt/schema'
-import type { UseChatHelpers } from '@ai-sdk/vue'
 import theme from '#build/ui/chat-prompt-submit'
 import type { ButtonProps, ButtonSlots } from '../types'
 import type { ComponentConfig } from '../types/tv'
@@ -8,7 +8,7 @@ import type { ComponentConfig } from '../types/tv'
 type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubmit'>
 
 export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonProps, 'size' | 'label'> {
-  status?: UseChatHelpers['status']['value']
+  status?: ChatStatus
   /**
    * The icon displayed in the button when the status is `ready`.
    * @defaultValue appConfig.ui.icons.arrowUp
diff --git a/src/runtime/utils/ai.ts b/src/runtime/utils/ai.ts
new file mode 100644
index 0000000000..c5bbba73a7
--- /dev/null
+++ b/src/runtime/utils/ai.ts
@@ -0,0 +1,8 @@
+import type { UIMessage } from 'ai'
+
+export function getTextFromMessage(message: UIMessage) {
+  return message.parts
+    .filter(part => part.type === 'text')
+    .map(part => part.text)
+    .join('')
+}
diff --git a/test/components/ChatMessage.spec.ts b/test/components/ChatMessage.spec.ts
index 4bea42aa0f..eda09e22bd 100644
--- a/test/components/ChatMessage.spec.ts
+++ b/test/components/ChatMessage.spec.ts
@@ -9,12 +9,13 @@ describe('ChatMessage', () => {
   const props = {
     id: '6045235a-a435-46b8-989d-2df38ca2eb47',
     role: 'user' as const,
-    content: 'Hello, how are you?'
+    parts: [{ type: 'text', text: 'Hello, how are you?' }]
   }
 
   it.each([
     // Props
-    ['with content', { props }],
+    ['with parts', { props }],
+    ['with content', { props: { ...props, content: 'Hello, how are you?' } }],
     ['with icon', { props: { ...props, icon: 'i-lucide-user' } }],
     ['with avatar', { props: { ...props, avatar: { src: 'https://github.com/benjamincanac.png' } } }],
     ['with role assistant', { props: { ...props, role: 'assistant' as const } }],
diff --git a/test/components/ChatMessages.spec.ts b/test/components/ChatMessages.spec.ts
index 576365d1bb..603bc1a666 100644
--- a/test/components/ChatMessages.spec.ts
+++ b/test/components/ChatMessages.spec.ts
@@ -10,11 +10,11 @@ describe('ChatMessages', () => {
     messages: [{
       id: '6045235a-a435-46b8-989d-2df38ca2eb47',
       role: 'user' as const,
-      content: 'Hello, how are you?'
+      parts: [{ type: 'text', text: 'Hello, how are you?' }]
     }, {
       id: '6045235a-a435-46b8-989d-2df38ca2eb47',
       role: 'assistant' as const,
-      content: 'I am fine, thank you!'
+      parts: [{ type: 'text', text: 'I am fine, thank you!' }]
     }]
   }
 
diff --git a/test/components/__snapshots__/ChatMessage-vue.spec.ts.snap b/test/components/__snapshots__/ChatMessage-vue.spec.ts.snap
index 34b76a4796..9dc7e41e70 100644
--- a/test/components/__snapshots__/ChatMessage-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatMessage-vue.spec.ts.snap
@@ -70,6 +70,16 @@ exports[`ChatMessage > renders with icon correctly 1`] = `
 </article>"
 `;
 
+exports[`ChatMessage > renders with parts correctly 1`] = `
+"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
+    <!--v-if-->
+    <div class="relative text-pretty min-w-0">Hello, how are you?</div>
+    <!--v-if-->
+  </div>
+</article>"
+`;
+
 exports[`ChatMessage > renders with role assistant correctly 1`] = `
 "<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
diff --git a/test/components/__snapshots__/ChatMessage.spec.ts.snap b/test/components/__snapshots__/ChatMessage.spec.ts.snap
index b7a5296393..31cc30b72f 100644
--- a/test/components/__snapshots__/ChatMessage.spec.ts.snap
+++ b/test/components/__snapshots__/ChatMessage.spec.ts.snap
@@ -70,6 +70,16 @@ exports[`ChatMessage > renders with icon correctly 1`] = `
 </article>"
 `;
 
+exports[`ChatMessage > renders with parts correctly 1`] = `
+"<article data-role="user" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">
+    <!--v-if-->
+    <div class="relative text-pretty min-w-0">Hello, how are you?</div>
+    <!--v-if-->
+  </div>
+</article>"
+`;
+
 exports[`ChatMessage > renders with role assistant correctly 1`] = `
 "<article data-role="assistant" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] gap-3 pb-8">