feat: use @nuxthub/core

README.md

@@ -20,7 +20,7 @@ Full-featured AI Chatbot Nuxt application with authentication, chat history, mul
 - ⚡️ **Streaming AI messages** powered by the [AI SDK v5](https://sdk.vercel.ai)
 - 🤖 **Multiple model support** via various AI providers with built-in AI Gateway support
 - 🔐 **Authentication** via [nuxt-auth-utils](https://github.com/atinux/nuxt-auth-utils)
-- 💾 **Chat history persistence** using PostgreSQL database and [Drizzle ORM](https://orm.drizzle.team)
+- 💾 **Chat history persistence** using SQLite database (Turso in production) and [Drizzle ORM](https://orm.drizzle.team)
 - 🚀 **Easy deploy** to Vercel with zero configuration
 
 ## Quick Start
@@ -31,7 +31,7 @@ npm create nuxt@latest -- -t ui/chat
 
 ## Deploy your own
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-name=chat&repository-url=https%3A%2F%2Fgithub.com%2Fnuxt-ui-templates%2Fchat&env=NUXT_SESSION_PASSWORD,NUXT_OAUTH_GITHUB_CLIENT_ID,NUXT_OAUTH_GITHUB_CLIENT_SECRET&products=%5B%7B%22type%22%3A%22integration%22%2C%22group%22%3A%22postgres%22%7D%5D&demo-image=https%3A%2F%2Fui.nuxt.com%2Fassets%2Ftemplates%2Fnuxt%2Fchat-dark.png&demo-url=https%3A%2F%2Fchat-template.nuxt.dev%2F&demo-title=Nuxt%20Chat%20Template&demo-description=An%20AI%20chatbot%20template%20to%20build%20your%20own%20chatbot%20powered%20by%20Nuxt%20MDC%20and%20Vercel%20AI%20SDK.)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-name=chat&repository-url=https%3A%2F%2Fgithub.com%2Fnuxt-ui-templates%2Fchat&env=NUXT_SESSION_PASSWORD,NUXT_OAUTH_GITHUB_CLIENT_ID,NUXT_OAUTH_GITHUB_CLIENT_SECRET&products=%5B%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22storage%22%2C%22productSlug%22%3A%22database%22%2C%22integrationSlug%22%3A%22tursocloud%22%7D%5D&demo-image=https%3A%2F%2Fui.nuxt.com%2Fassets%2Ftemplates%2Fnuxt%2Fchat-dark.png&demo-url=https%3A%2F%2Fchat-template.nuxt.dev%2F&demo-title=Nuxt%20Chat%20Template&demo-description=An%20AI%20chatbot%20template%20to%20build%20your%20own%20chatbot%20powered%20by%20Nuxt%20MDC%20and%20Vercel%20AI%20SDK.)
 
 ## Setup
 

app/composables/useChats.ts

@@ -1,20 +1,20 @@
 import { isToday, isYesterday, subMonths } from 'date-fns'
 
-interface Chat {
+export interface UIChat {
   id: string
   label: string
   icon: string
   createdAt: string
 }
 
-export function useChats(chats: Ref<Chat[] | undefined>) {
+export function useChats(chats: Ref<UIChat[] | undefined>) {
   const groups = computed(() => {
     // Group chats by date
-    const today: Chat[] = []
-    const yesterday: Chat[] = []
-    const lastWeek: Chat[] = []
-    const lastMonth: Chat[] = []
-    const older: Record<string, Chat[]> = {}
+    const today: UIChat[] = []
+    const yesterday: UIChat[] = []
+    const lastWeek: UIChat[] = []
+    const lastMonth: UIChat[] = []
+    const older: Record<string, UIChat[]> = {}
 
     const oneWeekAgo = subMonths(new Date(), 0.25) // ~7 days ago
     const oneMonthAgo = subMonths(new Date(), 1)
@@ -56,7 +56,7 @@ export function useChats(chats: Ref<Chat[] | undefined>) {
     const formattedGroups = [] as Array<{
       id: string
       label: string
-      items: Array<Chat>
+      items: Array<UIChat>
     }>
 
     // Add groups that have chats

app/layouts/default.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { LazyModalConfirm } from '#components'
+import type { UIChat } from '../composables/useChats'
 
 const route = useRoute()
 const toast = useToast()
@@ -17,7 +18,7 @@ const deleteModal = overlay.create(LazyModalConfirm, {
 
 const { data: chats, refresh: refreshChats } = await useFetch('/api/chats', {
   key: 'chats',
-  transform: data => data.map(chat => ({
+  transform: (data: Chat[]) => data.map(chat => ({
     id: chat.id,
     label: chat.title || 'Untitled',
     to: `/chat/${chat.id}`,
@@ -40,7 +41,7 @@ watch(loggedIn, () => {
   open.value = false
 })
 
-const { groups } = useChats(chats)
+const { groups } = useChats(chats as unknown as Ref<UIChat[]>)
 
 const items = computed(() => groups.value?.flatMap((group) => {
   return [{

app/pages/chat/[id].vue

@@ -16,12 +16,12 @@ const toast = useToast()
 const clipboard = useClipboard()
 const { model } = useModels()
 
-const { data } = await useFetch(`/api/chats/${route.params.id}`, {
+const { data, error } = await useFetch(`/api/chats/${route.params.id}`, {
   cache: 'force-cache'
 })
 
-if (!data.value) {
-  throw createError({ statusCode: 404, statusMessage: 'Chat not found', fatal: true })
+if (error.value) {
+  throw createError(error.value)
 }
 
 const input = ref('')

nuxt.config.ts

@@ -4,6 +4,7 @@ export default defineNuxtConfig({
     '@nuxt/eslint',
     '@nuxt/ui',
     '@nuxtjs/mdc',
+    '@nuxthub/core',
     'nuxt-auth-utils',
     'nuxt-charts'
   ],
@@ -36,6 +37,11 @@ export default defineNuxtConfig({
     }
   },
 
+  hub: {
+    ai: 'vercel',
+    database: 'sqlite'
+  },
+
   eslint: {
     config: {
       stylistic: {

package.json

@@ -15,19 +15,23 @@
   "dependencies": {
     "@ai-sdk/gateway": "^2.0.2",
     "@ai-sdk/vue": "^2.0.80",
+    "@electric-sql/pglite": "^0.3.11",
     "@iconify-json/logos": "^1.2.9",
     "@iconify-json/lucide": "^1.2.71",
     "@iconify-json/simple-icons": "^1.2.55",
+    "@libsql/client": "^0.15.15",
     "@nuxt/ui": "^4.1.0",
+    "@nuxthub/core": "npm:@nuxthub/[email protected]",
     "@nuxtjs/mdc": "^0.18.0",
     "ai": "^5.0.80",
     "date-fns": "^4.1.0",
     "drizzle-orm": "^0.44.7",
-    "nuxt": "^4.2.0",
+    "nuxt": "4.1.0",
     "nuxt-auth-utils": "^0.5.25",
     "nuxt-charts": "0.2.4",
-    "pg": "^8.16.3",
-    "shiki-stream": "^0.1.2"
+    "postgres": "^3.4.7",
+    "shiki-stream": "^0.1.2",
+    "workers-ai-provider": "^2.0.0"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.9.0",