feat(cli): upgrade to ai sdk v5 (#487)

apps/cli/templates/examples/ai/web/nuxt/app/pages/ai.vue.hbs

@@ -1,20 +1,35 @@
 <script setup lang="ts">
-import { useChat } from '@ai-sdk/vue'
+import { Chat } from '@ai-sdk/vue'
+import { DefaultChatTransport } from 'ai'
 import { nextTick, ref, watch } from 'vue'
 
 const config = useRuntimeConfig()
 const serverUrl = config.public.serverURL
 
-const { messages, input, handleSubmit } = useChat({
-  api: `${serverUrl}/ai`,
+const input = ref('')
+const chat = new Chat({
+  transport: new DefaultChatTransport({
+    api: `${serverUrl}/ai`,
+  }),
 })
 
 const messagesEndRef = ref<null | HTMLDivElement>(null)
 
-watch(messages, async () => {
-  await nextTick()
-  messagesEndRef.value?.scrollIntoView({ behavior: 'smooth' })
-})
+watch(
+  () => chat.messages,
+  async () => {
+    await nextTick()
+    messagesEndRef.value?.scrollIntoView({ behavior: 'smooth' })
+  }
+)
+
+const handleSubmit = (e: Event) => {
+  e.preventDefault()
+  const text = input.value.trim()
+  if (!text) return
+  chat.sendMessage({ text })
+  input.value = ''
+}
 
 function getMessageText(message: any) {
   return message.parts
@@ -27,11 +42,11 @@ function getMessageText(message: any) {
 <template>
   <div class="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
     <div class="overflow-y-auto space-y-4 pb-4">
-      <div v-if="messages.length === 0" class="text-center text-muted-foreground mt-8">
+      <div v-if="chat.messages.length === 0" class="text-center text-muted-foreground mt-8">
         Ask me anything to get started!
       </div>
       <div
-        v-for="message in messages"
+        v-for="message in chat.messages"
         :key="message.id"
         :class="[
           'p-3 rounded-lg',
@@ -39,14 +54,14 @@ function getMessageText(message: any) {
         ]"
       >
         <p class="text-sm font-semibold mb-1">
-          {{ message.role === 'user' ? 'You' : 'AI Assistant' }}
+          \{{ message.role === 'user' ? 'You' : 'AI Assistant' }}
         </p>
-        <div class="whitespace-pre-wrap">{{ getMessageText(message) }}</div>
+        <div class="whitespace-pre-wrap">\{{ getMessageText(message) }}</div>
       </div>
-      <div ref="messagesEndRef" />
+      <div ref="messagesEndRef"></div>
     </div>
 
-    <form @submit.prevent="handleSubmit" class="w-full flex items-center space-x-2 pt-2 border-t">
+    <form @submit="handleSubmit" class="w-full flex items-center space-x-2 pt-2 border-t">
       <UInput
         name="prompt"
         v-model="input"
@@ -60,4 +75,4 @@ function getMessageText(message: any) {
       </UButton>
     </form>
   </div>
-</template>
+</template>