diff --git a/app/app.config.ts b/app/app.config.ts
index 0a21908c0..30084f9fe 100644
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -1,4 +1,32 @@
 export default defineAppConfig({
+  agent: {
+    faqQuestions: [
+      {
+        category: 'Getting Started',
+        items: [
+          'Show me available starter templates',
+          'What\'s new in Nuxt 4?',
+          'How do I add authentication to my Nuxt app?'
+        ]
+      },
+      {
+        category: 'Features',
+        items: [
+          'useFetch vs useAsyncData?',
+          'How does file-based routing work?',
+          'How do I connect a database to my Nuxt app?'
+        ]
+      },
+      {
+        category: 'Deploy & Explore',
+        items: [
+          'How do I deploy my Nuxt app?',
+          'What are the available rendering modes?',
+          'How do I add SEO meta tags in Nuxt?'
+        ]
+      }
+    ]
+  },
   ui: {
     colors: {
       primary: 'green',
diff --git a/app/app.vue b/app/app.vue
index d1c998a7a..1ef736caa 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const colorMode = useColorMode()
+const route = useRoute()
 const { version } = useDocsVersion()
 const { searchGroups, searchLinks, searchTerm } = useNavigation()
 const { fetchList: fetchModules } = useModules()
@@ -72,12 +73,24 @@ onMounted(() => {
 </script>
 
 <template>
-  <UApp>
+  <UApp :tooltip="{ delayDuration: 500 }">
     <NuxtLoadingIndicator color="var(--ui-primary)" />
 
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
+    <div class="flex">
+      <div class="flex-1 min-w-0">
+        <NuxtLayout>
+          <NuxtPage />
+        </NuxtLayout>
+
+        <ClientOnly>
+          <LazyAgentFloatingInput v-if="route.path !== '/chat'" />
+        </ClientOnly>
+      </div>
+
+      <ClientOnly>
+        <LazyAgentPanel v-if="route.path !== '/chat'" />
+      </ClientOnly>
+    </div>
 
     <ClientOnly>
       <LazyUContentSearch
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 8e52533a4..35845db7d 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -30,3 +30,11 @@
   --ui-bg-elevated: var(--ui-color-neutral-900);
   --ui-bg-accented: var(--ui-color-neutral-800);
 }
+
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
diff --git a/app/assets/icons/ai.svg b/app/assets/icons/ai.svg
index 1373b1e3a..b7f09fe4f 100644
--- a/app/assets/icons/ai.svg
+++ b/app/assets/icons/ai.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g class="nc-icon-wrapper" fill="currentColor"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8 1V5H6V1H8Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M8 19V23H6V19H8Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M18 1V5H16V1H18Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M18 19V23H16V19H18Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M13 1V5H11V1H13Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M13 19V23H11V19H13Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M23 8L19 8L19 6L23 6L23 8Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 8L1 8L1 6L5 6L5 8Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M23 18L19 18L19 16L23 16L23 18Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 18L1 18L1 16L5 16L5 18Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M23 13L19 13L19 11L23 11L23 13Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 13L1 13L1 11L5 11L5 13Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M3 6C3 4.34315 4.34315 3 6 3H18C19.6569 3 21 4.34315 21 6V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6ZM12 7L13.5 10.5L17 12L13.5 13.5L12 17L10.5 13.5L7 12L10.5 10.5L12 7Z" fill="currentColor"></path> </g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" id="artificial-intelligence" aria-hidden="true" viewBox="0 0 20 20"><title>artificial-intelligence</title><g fill="currentColor"><polyline fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="10.5 15 7 5 6 5 2.5 15"/><line x1="9.586" x2="3.414" y1="12.5" y2="12.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><polyline fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="13.5 9 15.5 9 15.5 15"/><line x1="13.5" x2="17.5" y1="15" y2="15" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path fill="currentColor" stroke-width="0" d="m17.6527,3.9647l-1.2005-.4503-.4506-1.2005c-.1562-.4185-.8468-.4185-1.0031,0l-.4506,1.2005-1.2005.4503c-.2086.0785-.3474.2783-.3474.5015s.1388.4231.3474.5015l1.2005.4503.4506,1.2005c.0781.2093.2783.3477.5015.3477s.4234-.1385.5015-.3477l.4506-1.2005,1.2005-.4503c.2086-.0785.3474-.2783.3474-.5015s-.1388-.4231-.3474-.5015h0Z"/></g></svg>
diff --git a/app/components/agent/AgentChatButton.vue b/app/components/agent/AgentChatButton.vue
new file mode 100644
index 000000000..b0a57cb46
--- /dev/null
+++ b/app/components/agent/AgentChatButton.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const { toggle, isOpen } = useNuxtAgent()
+const { track } = useAnalytics()
+
+function handleToggle() {
+  track('Nuxt Agent Toggled', { source: 'header', open: !isOpen.value })
+  toggle()
+}
+</script>
+
+<template>
+  <UTooltip text="Agent">
+    <UButton
+      icon="i-custom-ai"
+      color="neutral"
+      variant="ghost"
+      @click="handleToggle"
+    />
+  </UTooltip>
+</template>
diff --git a/app/components/agent/AgentComark.ts b/app/components/agent/AgentComark.ts
new file mode 100644
index 000000000..bc911b7af
--- /dev/null
+++ b/app/components/agent/AgentComark.ts
@@ -0,0 +1,13 @@
+import highlight from '@comark/nuxt/plugins/highlight'
+import SourceLink from '../tools/SourceLink.vue'
+
+export default defineComarkComponent({
+  name: 'AgentComark',
+  plugins: [
+    highlight()
+  ],
+  components: {
+    'source-link': SourceLink
+  },
+  class: '*:first:mt-0 *:last:mb-0'
+})
diff --git a/app/components/agent/AgentFloatingInput.vue b/app/components/agent/AgentFloatingInput.vue
new file mode 100644
index 000000000..a45d8a156
--- /dev/null
+++ b/app/components/agent/AgentFloatingInput.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { AnimatePresence, motion } from 'motion-v'
+
+const route = useRoute()
+const { open, isOpen } = useNuxtAgent()
+const { track } = useAnalytics()
+const input = ref('')
+const isVisible = ref(true)
+const inputRef = ref<{ inputRef: HTMLInputElement } | null>(null)
+
+const isDocsRoute = computed(() => route.path.startsWith('/docs') || route.path.startsWith('/blog'))
+
+function handleSubmit() {
+  if (!input.value.trim()) return
+
+  track('Nuxt Agent Message Sent', { query: input.value, source: 'floating-input', page: route.path })
+  const message = input.value
+  isVisible.value = false
+
+  setTimeout(() => {
+    open(message, true)
+    input.value = ''
+    isVisible.value = true
+  }, 200)
+}
+
+defineShortcuts({
+  meta_i: {
+    usingInput: true,
+    handler: () => {
+      inputRef.value?.inputRef?.focus()
+    }
+  },
+  escape: {
+    usingInput: true,
+    handler: () => {
+      inputRef.value?.inputRef?.blur()
+    }
+  }
+})
+</script>
+
+<template>
+  <AnimatePresence>
+    <motion.div
+      v-if="isDocsRoute && isVisible && !isOpen"
+      key="floating-input"
+      :initial="{ y: 20, opacity: 0 }"
+      :animate="{ y: 0, opacity: 1 }"
+      :exit="{ y: 100, opacity: 0 }"
+      :transition="{ duration: 0.2, ease: 'easeOut' }"
+      class="pointer-events-none fixed inset-x-0 z-10 bottom-[max(1.5rem,env(safe-area-inset-bottom))] px-4 sm:px-80"
+      style="will-change: transform"
+    >
+      <form
+        class="pointer-events-none flex w-full justify-center"
+        @submit.prevent="handleSubmit"
+      >
+        <div class="pointer-events-auto w-full max-w-96">
+          <UInput
+            ref="inputRef"
+            v-model="input"
+            placeholder="Ask anything…"
+            size="lg"
+            maxlength="1000"
+            :ui="{
+              root: 'group w-full! min-w-0 sm:max-w-96 transition-all duration-300 ease-out [@media(hover:hover)]:hover:scale-105 [@media(hover:hover)]:focus-within:scale-105',
+              base: 'bg-default shadow-lg rounded-xl text-base',
+              trailing: 'pe-2'
+            }"
+            @keydown.enter.exact.prevent="handleSubmit"
+          >
+            <template #trailing>
+              <div class="flex items-center gap-2">
+                <div class="hidden sm:flex group-focus-within:hidden items-center gap-1">
+                  <UKbd value="meta" />
+                  <UKbd value="I" />
+                </div>
+
+                <UButton
+                  type="submit"
+                  icon="i-lucide-arrow-up"
+                  color="primary"
+                  size="xs"
+                  :disabled="!input.trim()"
+                />
+              </div>
+            </template>
+          </UInput>
+        </div>
+      </form>
+    </motion.div>
+  </AnimatePresence>
+</template>
diff --git a/app/components/agent/AgentIndicator.vue b/app/components/agent/AgentIndicator.vue
new file mode 100644
index 000000000..137a2f918
--- /dev/null
+++ b/app/components/agent/AgentIndicator.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+const size = 4
+const dotSize = 2
+const gap = 2
+const totalDots = size * size
+
+const patterns = [
+  [[0], [1], [2], [3], [7], [11], [15], [14], [13], [12], [8], [4], [5], [6], [10], [9]],
+  [[0, 4, 8, 12], [1, 5, 9, 13], [2, 6, 10, 14], [3, 7, 11, 15]],
+  [[5, 6, 9, 10], [1, 4, 7, 8, 11, 14], [0, 3, 12, 15], [1, 4, 7, 8, 11, 14], [5, 6, 9, 10]],
+  [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]],
+  [[0], [3], [15], [12]],
+  [[5, 6, 9, 10], [1, 2, 4, 7, 8, 11, 13, 14], [0, 3, 12, 15]],
+  [[0], [1], [2], [3], [7], [6], [5], [4], [8], [9], [10], [11], [15], [14], [13], [12]],
+  [[0], [1, 4], [2, 5, 8], [3, 6, 9, 12], [7, 10, 13], [11, 14], [15]]
+]
+
+const activeDots = ref<Set<number>>(new Set())
+let patternIndex = 0
+let stepIndex = 0
+
+function nextStep() {
+  const pattern = patterns[patternIndex]
+  if (!pattern) return
+
+  activeDots.value = new Set(pattern[stepIndex])
+  stepIndex++
+
+  if (stepIndex >= pattern.length) {
+    stepIndex = 0
+    patternIndex = (patternIndex + 1) % patterns.length
+  }
+}
+
+const statusMessages = ['Thinking...', 'Searching...', 'Reading...', 'Analyzing...']
+const currentIndex = ref(0)
+const displayedText = ref(statusMessages[0]!)
+const chars = 'abcdefghijklmnopqrstuvwxyz'
+
+function scramble(from: string, to: string) {
+  const maxLength = Math.max(from.length, to.length)
+  let frame = 0
+  const totalFrames = 15
+
+  const step = () => {
+    frame++
+    let result = ''
+    const progress = (frame / totalFrames) * maxLength
+
+    for (let i = 0; i < maxLength; i++) {
+      if (i < progress - 2) {
+        result += to[i] || ''
+      } else if (i < progress) {
+        result += chars[Math.floor(Math.random() * chars.length)]
+      } else {
+        result += from[i] || ''
+      }
+    }
+
+    displayedText.value = result
+
+    if (frame < totalFrames) {
+      requestAnimationFrame(step)
+    } else {
+      displayedText.value = to
+    }
+  }
+
+  requestAnimationFrame(step)
+}
+
+let matrixInterval: ReturnType<typeof setInterval> | undefined
+let textInterval: ReturnType<typeof setInterval> | undefined
+
+onMounted(() => {
+  nextStep()
+  matrixInterval = setInterval(nextStep, 120)
+  textInterval = setInterval(() => {
+    const prev = displayedText.value
+    currentIndex.value = (currentIndex.value + 1) % statusMessages.length
+    scramble(prev, statusMessages[currentIndex.value]!)
+  }, 3500)
+})
+
+onUnmounted(() => {
+  clearInterval(matrixInterval)
+  clearInterval(textInterval)
+})
+</script>
+
+<template>
+  <div class="flex items-center text-xs text-muted overflow-hidden">
+    <div
+      class="shrink-0 mr-2 grid"
+      :style="{
+        gridTemplateColumns: `repeat(${size}, 1fr)`,
+        gap: `${gap}px`,
+        width: `${size * dotSize + (size - 1) * gap}px`,
+        height: `${size * dotSize + (size - 1) * gap}px`
+      }"
+    >
+      <span
+        v-for="i in totalDots"
+        :key="i"
+        class="rounded-[0.5px] bg-current transition-opacity duration-100"
+        :class="activeDots.has(i - 1) ? 'opacity-100' : 'opacity-20'"
+        :style="{ width: `${dotSize}px`, height: `${dotSize}px` }"
+      />
+    </div>
+
+    <UChatShimmer :text="displayedText" class="font-mono tracking-tight" />
+  </div>
+</template>
diff --git a/app/components/agent/AgentPanel.vue b/app/components/agent/AgentPanel.vue
new file mode 100644
index 000000000..e2002405b
--- /dev/null
+++ b/app/components/agent/AgentPanel.vue
@@ -0,0 +1,313 @@
+<script setup lang="ts">
+import { DefaultChatTransport } from 'ai'
+import type { UIMessage } from 'ai'
+import { Chat } from '@ai-sdk/vue'
+
+const { isOpen, messages, chatId, resetChatId, faqQuestions, expandToFullScreen, isAgentDockedBreakpoint, usage, rateLimitReached, onMessageSent } = useNuxtAgent()
+const { track } = useAnalytics()
+const route = useRoute()
+const toast = useToast()
+const input = ref('')
+const votes = ref(new Map<string, boolean>())
+
+function vote(message: UIMessage, isUpvoted: boolean) {
+  const current = votes.value.get(message.id)
+  const next = current === isUpvoted ? undefined : isUpvoted
+
+  if (next === undefined) {
+    votes.value.delete(message.id)
+  } else {
+    votes.value.set(message.id, next)
+  }
+  votes.value = new Map(votes.value)
+
+  $fetch('/api/agent/vote', {
+    method: 'POST',
+    body: { chatId: chatId.value, messageId: message.id, isUpvoted: next }
+  }).catch(() => {
+    if (current !== undefined) votes.value.set(message.id, current)
+    else votes.value.delete(message.id)
+    votes.value = new Map(votes.value)
+  })
+}
+
+const indexPages = new Set(['/docs', '/blog', '/changelog', '/modules', '/deploy'])
+
+const currentPage = computed(() => {
+  const path = route.path
+  if (indexPages.has(path)) return null
+  if (!path.startsWith('/docs/') && !path.startsWith('/blog/') && !path.startsWith('/changelog/') && !path.startsWith('/modules/') && !path.startsWith('/deploy/')) return null
+  return path
+})
+
+const pageContextAdded = ref(false)
+const pageContextDismissed = ref(false)
+
+watch(currentPage, () => {
+  pageContextAdded.value = false
+  pageContextDismissed.value = false
+})
+
+const showPageContext = computed(() => currentPage.value && (pageContextAdded.value || !pageContextDismissed.value))
+
+let _skipSync = false
+
+const chat = new Chat({
+  messages: messages.value,
+  transport: new DefaultChatTransport({
+    api: '/api/agent',
+    headers: () => ({ 'x-chat-id': chatId.value })
+  }),
+  onError: (error: Error) => {
+    let message = error.message
+    if (typeof message === 'string' && message[0] === '{') {
+      try {
+        message = JSON.parse(message).message || message
+      } catch {
+        // keep original on malformed JSON
+      }
+    }
+
+    toast.add({
+      description: message,
+      icon: 'i-lucide-alert-circle',
+      color: 'error',
+      duration: 0
+    })
+  },
+  onFinish: () => {
+    _skipSync = true
+    messages.value = chat.messages
+    nextTick(() => {
+      _skipSync = false
+    })
+  }
+})
+
+watch(messages, (newMessages) => {
+  if (_skipSync) return
+
+  chat.messages = newMessages
+  if (chat.lastMessage?.role === 'user') {
+    chat.regenerate()
+  }
+})
+
+const canClear = computed(() => messages.value.length > 0 || chat.messages.length > 0)
+
+function onSubmit() {
+  if (!input.value.trim() || rateLimitReached.value) return
+
+  track('Nuxt Agent Message Sent', { query: input.value, source: 'prompt', page: currentPage.value, withContext: showPageContext.value })
+  const text = currentPage.value && showPageContext.value
+    ? `[Page: ${currentPage.value}] ${input.value}`
+    : input.value
+  chat.sendMessage({ text })
+  onMessageSent()
+  input.value = ''
+}
+
+function askQuestion(question: string) {
+  track('Nuxt Agent FAQ Clicked', { question })
+  input.value = question
+  onSubmit()
+}
+
+function clearMessages() {
+  track('Nuxt Agent Chat Cleared')
+  if (chat.status === 'streaming') {
+    chat.stop()
+  }
+  messages.value = []
+  chat.messages = []
+  resetChatId()
+  votes.value = new Map()
+}
+
+const panelUi = {
+  footer: 'p-0',
+  actions: 'gap-0.5'
+} as const
+
+/* Slideover theme defaults add sm:px-6 / sm:p-6; override so layout matches USidebar (full width inside panel) */
+const slideoverUi = {
+  footer: 'p-0 px-0 sm:px-0',
+  header:
+    'min-h-(--ui-header-height) flex items-center gap-1.5 overflow-hidden border-b border-default px-4 sm:px-4',
+  wrapper: 'min-w-0 flex-1',
+  title: 'text-highlighted font-semibold truncate',
+  actions: 'flex items-center gap-1.5 shrink-0 gap-0.5',
+  close: '',
+  body: 'flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 sm:p-4'
+}
+
+defineShortcuts({
+  meta_i: {
+    handler: () => {
+      isOpen.value = !isOpen.value
+    },
+    usingInput: true
+  },
+  tab: {
+    handler: () => {
+      if (!currentPage.value) return
+      if (showPageContext.value) {
+        pageContextAdded.value = false
+        pageContextDismissed.value = true
+      } else {
+        pageContextAdded.value = true
+        pageContextDismissed.value = false
+      }
+    },
+    usingInput: true
+  }
+})
+</script>
+
+<template>
+  <USidebar
+    v-if="isAgentDockedBreakpoint"
+    v-model:open="isOpen"
+    side="right"
+    rail
+    :style="{ '--sidebar-width': '24rem' }"
+    :ui="panelUi"
+  >
+    <template #title>
+      <span class="inline-flex items-center gap-2 min-w-0">
+        <span class="truncate">Agent</span>
+        <UBadge variant="subtle" size="sm" class="shrink-0">
+          Beta
+        </UBadge>
+      </span>
+    </template>
+    <template #actions>
+      <UTooltip v-if="canClear" text="Clear chat">
+        <UButton
+          icon="i-lucide-list-x"
+          color="neutral"
+          variant="ghost"
+          @click="clearMessages"
+        />
+      </UTooltip>
+      <UTooltip text="Open full screen">
+        <UButton
+          icon="i-lucide-maximize-2"
+          color="neutral"
+          variant="ghost"
+          @click="expandToFullScreen"
+        />
+      </UTooltip>
+    </template>
+
+    <template #close>
+      <UTooltip text="Close" :kbds="['meta', 'i']">
+        <UButton
+          icon="i-lucide-panel-right-close"
+          color="neutral"
+          variant="ghost"
+          aria-label="Close"
+          @click="isOpen = false"
+        />
+      </UTooltip>
+    </template>
+
+    <AgentPanelMain
+      v-model:votes="votes"
+      :chat="chat"
+      :faq-questions="faqQuestions"
+      @ask-question="askQuestion"
+      @vote="vote"
+    />
+
+    <template #footer>
+      <AgentPanelFooter
+        v-model="input"
+        :chat="chat"
+        :current-page="currentPage"
+        :show-page-context="!!showPageContext"
+        :rate-limit-reached="rateLimitReached"
+        :usage="usage"
+        @submit="onSubmit"
+        @dismiss-page-context="pageContextAdded = false; pageContextDismissed = true"
+        @add-page-context="pageContextAdded = true; pageContextDismissed = false"
+      />
+    </template>
+  </USidebar>
+
+  <USlideover
+    v-else
+    v-model:open="isOpen"
+    side="right"
+    :style="{ '--sidebar-width': '24rem' }"
+    :ui="{
+      ...slideoverUi,
+      /* Full width on small screens; cap at sidebar width from sm up (slideover only below xl) */
+      content: 'w-full max-w-none sm:max-w-96 max-h-svh p-0 flex flex-col'
+    }"
+  >
+    <template #title>
+      <span class="inline-flex items-center gap-2 min-w-0">
+        <span class="truncate">Agent</span>
+        <UBadge variant="subtle" size="sm" class="shrink-0">
+          Beta
+        </UBadge>
+      </span>
+    </template>
+    <template #actions>
+      <UTooltip v-if="canClear" text="Clear chat">
+        <UButton
+          icon="i-lucide-list-x"
+          color="neutral"
+          variant="ghost"
+          @click="clearMessages"
+        />
+      </UTooltip>
+      <UTooltip text="Open full screen">
+        <UButton
+          icon="i-lucide-maximize-2"
+          color="neutral"
+          variant="ghost"
+          @click="expandToFullScreen"
+        />
+      </UTooltip>
+    </template>
+
+    <template #close>
+      <UTooltip text="Close" :kbds="['meta', 'i']">
+        <UButton
+          icon="i-lucide-panel-right-close"
+          color="neutral"
+          variant="ghost"
+          aria-label="Close"
+          @click="isOpen = false"
+        />
+      </UTooltip>
+    </template>
+
+    <template #body>
+      <AgentPanelMain
+        v-model:votes="votes"
+        :chat="chat"
+        :faq-questions="faqQuestions"
+        class="min-h-0 flex-1 flex flex-col overflow-hidden"
+        @ask-question="askQuestion"
+        @vote="vote"
+      />
+    </template>
+
+    <template #footer>
+      <AgentPanelFooter
+        v-model="input"
+        :chat="chat"
+        :current-page="currentPage"
+        :show-page-context="!!showPageContext"
+        :rate-limit-reached="rateLimitReached"
+        :usage="usage"
+        @submit="onSubmit"
+        @dismiss-page-context="pageContextAdded = false; pageContextDismissed = true"
+        @add-page-context="pageContextAdded = true; pageContextDismissed = false"
+      />
+    </template>
+  </USlideover>
+</template>
diff --git a/app/components/agent/AgentPanelFooter.vue b/app/components/agent/AgentPanelFooter.vue
new file mode 100644
index 000000000..3931139f8
--- /dev/null
+++ b/app/components/agent/AgentPanelFooter.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { UIMessage } from 'ai'
+import type { Chat } from '@ai-sdk/vue'
+
+const input = defineModel<string>({ required: true })
+
+const props = defineProps<{
+  chat: Chat<UIMessage>
+  currentPage: string | null
+  showPageContext: boolean
+  rateLimitReached?: boolean
+  usage?: { used: number, remaining: number, limit: number }
+}>()
+
+defineEmits<{
+  submit: []
+  dismissPageContext: []
+  addPageContext: []
+}>()
+
+const contextPathLabel = computed(() => {
+  const p = props.currentPage
+  if (!p) return ''
+  return p.replace(/^\//, '')
+})
+</script>
+
+<template>
+  <div class="flex flex-col w-full">
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      leave-active-class="transition duration-150 ease-in"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="showPageContext"
+        class="flex items-center gap-2 border-b border-default px-4 py-2.5"
+      >
+        <div class="min-w-0 flex-1 flex items-center gap-1.5 text-xs">
+          <span class="shrink-0 text-dimmed">Agent is using</span>
+          <img
+            src="/icon.png"
+            alt=""
+            class="size-3.5 shrink-0 rounded-sm opacity-90"
+          >
+          <span
+            class="min-w-0 truncate font-medium text-highlighted"
+            :title="currentPage ?? undefined"
+          >{{ contextPathLabel }}</span>
+        </div>
+        <UTooltip text="Stop using this page as context">
+          <UButton
+            icon="i-lucide-x"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            class="shrink-0 text-dimmed hover:text-default -me-1"
+            @click="$emit('dismissPageContext')"
+          />
+        </UTooltip>
+      </div>
+    </Transition>
+
+    <div v-if="rateLimitReached" class="flex items-center gap-2 px-4 py-3 text-sm text-muted">
+      <UIcon name="i-lucide-clock" class="size-4 shrink-0" />
+      <span>Daily limit reached. Try again tomorrow.</span>
+    </div>
+
+    <UChatPrompt
+      v-else
+      v-model="input"
+      :error="chat.error"
+      placeholder="Ask anything…"
+      variant="naked"
+      size="sm"
+      :rows="2"
+      :maxrows="5"
+      autofocus
+      :ui="{ base: 'px-0 rounded-none' }"
+      class="px-4"
+      @submit="$emit('submit')"
+    >
+      <template #footer>
+        <div class="flex items-center gap-2 text-xs text-dimmed">
+          <UTooltip v-if="currentPage && !showPageContext" text="Use page as context" :kbds="['tab']">
+            <button
+              class="relative flex items-center py-1 px-1.5 -my-1 -mx-1.5 rounded-md text-dimmed hover:text-default hover:bg-elevated transition-colors"
+              @click="$emit('addPageContext')"
+            >
+              <UIcon name="i-lucide-file-plus" class="size-4" />
+            </button>
+          </UTooltip>
+
+          <USeparator v-if="currentPage && !showPageContext" orientation="vertical" class="h-4" />
+
+          <UTooltip v-if="usage" text="Daily messages remaining">
+            <span :class="usage.remaining <= 5 ? 'text-warning' : ''">
+              {{ usage.remaining }}/{{ usage.limit }}
+            </span>
+          </UTooltip>
+        </div>
+
+        <UChatPromptSubmit
+          size="sm"
+          :status="chat.status"
+          :disabled="chat.status === 'ready' && !input.trim()"
+          @stop="chat.stop()"
+          @reload="chat.regenerate()"
+        />
+      </template>
+    </UChatPrompt>
+  </div>
+</template>
diff --git a/app/components/agent/AgentPanelMain.vue b/app/components/agent/AgentPanelMain.vue
new file mode 100644
index 000000000..f27e8e879
--- /dev/null
+++ b/app/components/agent/AgentPanelMain.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { UIMessage } from 'ai'
+import type { Chat } from '@ai-sdk/vue'
+import type { FaqCategory } from '~/types/agent'
+
+defineProps<{
+  chat: Chat<UIMessage>
+  faqQuestions: FaqCategory[]
+}>()
+
+const emit = defineEmits<{
+  askQuestion: [question: string]
+  vote: [message: UIMessage, isUpvoted: boolean]
+}>()
+
+const votes = defineModel<Map<string, boolean>>('votes', { required: true })
+</script>
+
+<template>
+  <UTheme
+    :ui="{
+      prose: {
+        p: { base: 'my-2 text-sm/6' },
+        li: { base: 'my-0.5 text-sm/6' },
+        ul: { base: 'my-2' },
+        ol: { base: 'my-2' },
+        h1: { base: 'text-xl mb-4' },
+        h2: { base: 'text-lg mt-6 mb-3' },
+        h3: { base: 'text-base mt-4 mb-2' },
+        h4: { base: 'text-sm mt-3 mb-1.5' },
+        code: { base: 'text-xs' },
+        pre: { root: 'my-2', base: 'text-xs/5' },
+        table: { root: 'my-2' },
+        hr: { base: 'my-4' }
+      }
+    }"
+  >
+    <UChatMessages
+      v-if="chat.messages.length"
+      should-auto-scroll
+      :messages="chat.messages"
+      :status="chat.status"
+      compact
+      class="px-0 gap-2"
+      :user="{ ui: { container: 'max-w-full' } }"
+    >
+      <template #indicator>
+        <AgentIndicator />
+      </template>
+
+      <template #content="{ message }">
+        <ChatContent :message="message" :index="0" :chat="chat" />
+      </template>
+
+      <template #actions="{ message }">
+        <ChatMessageActions
+          v-if="message.role === 'assistant'"
+          :message="message"
+          :vote="votes.get(message.id) ?? null"
+          @vote="(msg, isUpvoted) => $emit('vote', msg, isUpvoted)"
+        />
+      </template>
+    </UChatMessages>
+
+    <div v-else class="flex flex-col">
+      <div class="relative h-48 overflow-hidden rounded-lg mx-1">
+        <AgentShader />
+      </div>
+
+      <div class="flex flex-col gap-6 mt-6">
+        <UPageLinks
+          v-for="category in faqQuestions"
+          :key="category.category"
+          :title="category.category"
+          :links="category.items.map(item => ({ label: item, onClick: () => emit('askQuestion', item) }))"
+        />
+      </div>
+    </div>
+  </UTheme>
+</template>
diff --git a/app/components/agent/AgentShader.vue b/app/components/agent/AgentShader.vue
new file mode 100644
index 000000000..85b88524a
--- /dev/null
+++ b/app/components/agent/AgentShader.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Shader, DotGrid, ImageTexture } from 'shaders/vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** Chat landing: slightly brighter dots behind the title; sidebar keeps default. */
+    variant?: 'default' | 'hero'
+  }>(),
+  { variant: 'default' }
+)
+
+const isHero = computed(() => props.variant === 'hero')
+
+const logoTransform = computed(() =>
+  isHero.value
+    ? { offsetY: 0.02, scale: 1.48 }
+    : { offsetY: 0.05, scale: 1.4 }
+)
+
+const dotDensity = computed(() => (isHero.value ? 36 : 30))
+const dotSize = computed(() => (isHero.value ? 0.4 : 0.2))
+const twinkle = computed(() => (isHero.value ? 2 : 1))
+</script>
+
+<template>
+  <div class="absolute inset-0 overflow-hidden rounded-[inherit]" :class="isHero ? 'brightness-70' : ''">
+    <ClientOnly>
+      <Shader
+        class="absolute inset-0 -z-1 mask-b-from-50% mask-b-to-100% mask-l-from-90% mask-l-to-100% mask-r-from-90% mask-r-to-100% mask-t-from-90% mask-t-to-100%"
+      >
+        <ImageTexture
+          id="logoMask"
+          :visible="false"
+          url="/icon.png"
+          object-fit="contain"
+          :transform="logoTransform"
+        />
+        <DotGrid
+          color="#4cffa8"
+          :density="dotDensity"
+          :dot-size="dotSize"
+          :twinkle="twinkle"
+          mask-source="logoMask"
+          mask-type="alphaInverted"
+        />
+      </Shader>
+    </ClientOnly>
+  </div>
+</template>
diff --git a/app/components/chat/ChatContent.vue b/app/components/chat/ChatContent.vue
new file mode 100644
index 000000000..209fffc1d
--- /dev/null
+++ b/app/components/chat/ChatContent.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { UIMessage } from 'ai'
+import { isToolUIPart, isReasoningUIPart, isTextUIPart, getToolName } from 'ai'
+import { isPartStreaming, isToolStreaming } from '@nuxt/ui/utils/ai'
+
+defineProps<{
+  message: UIMessage
+  index: number
+  chat: { status: string, messages: UIMessage[] }
+}>()
+
+function getTemplates(output: unknown): TemplateCardData[] {
+  if (!output || typeof output !== 'object') return []
+  const o = output as Record<string, unknown>
+  if (Array.isArray(o.templates)) return o.templates as TemplateCardData[]
+  return []
+}
+</script>
+
+<template>
+  <template v-for="(part, partIndex) in getMergedParts(message.parts)" :key="`${message.id}-${part.type}-${partIndex}`">
+    <UChatReasoning
+      v-if="isReasoningUIPart(part)"
+      :text="part.text"
+      :streaming="isPartStreaming(part)"
+      icon="i-lucide-brain"
+    >
+      <AgentComark
+        :markdown="part.text"
+        :streaming="isPartStreaming(part)"
+      />
+    </UChatReasoning>
+
+    <template v-else-if="isToolUIPart(part)">
+      <UChatTool
+        v-if="getToolName(part) === 'web_search'"
+        :text="isToolStreaming(part) ? 'Searching the web...' : 'Searched the web'"
+        :suffix="getSearchQuery(part)"
+        :streaming="isToolStreaming(part)"
+        chevron="leading"
+      >
+        <ToolsToolSources :sources="getSources(part)" />
+      </UChatTool>
+      <template v-else-if="getToolName(part) === 'show_module'">
+        <UChatTool
+          :text="isToolStreaming(part) ? 'Loading module...' : (part.state === 'output-available' && isValidModuleCardData(part.output) ? 'Found module' : 'Module not found')"
+          icon="i-lucide-box"
+          :streaming="isToolStreaming(part)"
+        />
+        <ToolsModuleCard
+          v-if="part.state === 'output-available' && isValidModuleCardData(part.output)"
+          v-bind="moduleCardProps(part.output as ModuleCardData)"
+        />
+      </template>
+      <template v-else-if="getToolName(part) === 'show_template'">
+        <UChatTool
+          :text="isToolStreaming(part) ? 'Loading templates...' : (part.state === 'output-available' && part.output && !(part.output as Record<string, unknown>).error ? 'Found templates' : 'Templates not found')"
+          icon="i-lucide-layout-template"
+          :streaming="isToolStreaming(part)"
+        />
+        <div
+          v-if="part.state === 'output-available' && part.output && !(part.output as Record<string, unknown>).error && getTemplates(part.output).length"
+          class="grid grid-cols-1 sm:grid-cols-2 gap-3"
+        >
+          <ToolsTemplateCard
+            v-for="tpl in getTemplates(part.output)"
+            :key="tpl.slug"
+            v-bind="tpl"
+          />
+        </div>
+      </template>
+      <template v-else-if="getToolName(part) === 'show_blog_post'">
+        <UChatTool
+          :text="isToolStreaming(part) ? 'Finding blog post...' : (part.state === 'output-available' && part.output && !(part.output as Record<string, unknown>).error ? 'Found blog post' : 'Blog post not found')"
+          icon="i-lucide-newspaper"
+          :streaming="isToolStreaming(part)"
+        />
+        <ToolsBlogCard
+          v-if="part.state === 'output-available' && part.output && !(part.output as Record<string, unknown>).error"
+          v-bind="part.output as BlogCardData"
+        />
+      </template>
+      <template v-else-if="getToolName(part) === 'show_hosting'">
+        <UChatTool
+          :text="isToolStreaming(part) ? 'Loading provider...' : (part.state === 'output-available' && part.output && !(part.output as Record<string, unknown>).error ? 'Found provider' : 'Provider not found')"
+          icon="i-lucide-server"
+          :streaming="isToolStreaming(part)"
+        />
+        <ToolsHostingCard
+          v-if="part.state === 'output-available' && part.output && !(part.output as Record<string, unknown>).error"
+          v-bind="part.output as HostingCardData"
+        />
+      </template>
+      <template v-else-if="getToolName(part) === 'open_playground'">
+        <UChatTool
+          :text="isToolStreaming(part) ? 'Generating playground...' : 'Playground ready'"
+          icon="i-simple-icons-stackblitz"
+          :streaming="isToolStreaming(part)"
+        />
+        <ToolsPlaygroundCard
+          v-if="part.state === 'output-available' && part.output"
+          v-bind="part.output as PlaygroundCardData"
+        />
+      </template>
+      <template v-else-if="(getToolName(part) === 'get-module' || getToolName(part) === 'list-modules') && getModuleCards(part).length">
+        <UChatTool
+          :text="getToolText(part)"
+          :icon="getToolIcon(part)"
+          :streaming="isToolStreaming(part)"
+          chevron="leading"
+        />
+        <div class="flex flex-col gap-2">
+          <ToolsModuleCard
+            v-for="mod in getModuleCards(part).filter(isValidModuleCardData)"
+            :key="mod.name"
+            v-bind="moduleCardProps(mod)"
+          />
+        </div>
+      </template>
+      <UChatTool
+        v-else
+        :text="getToolText(part)"
+        :icon="getToolIcon(part)"
+        :streaming="isToolStreaming(part)"
+        chevron="leading"
+      >
+        <pre v-if="getToolOutput(part)" class="text-xs text-dimmed whitespace-pre-wrap break-all" v-text="getToolOutput(part)" />
+      </UChatTool>
+    </template>
+
+    <template v-else-if="isTextUIPart(part) && part.text.length > 0">
+      <AgentComark
+        v-if="message.role === 'assistant'"
+        :markdown="part.text"
+        :streaming="isPartStreaming(part)"
+      />
+      <div v-else-if="message.role === 'user'">
+        <div v-if="parseUserMessage(part.text).page" class="flex items-center gap-1.5 mb-1.5 rounded-md bg-default/10 px-2 py-1 w-fit">
+          <img src="/icon.png" alt="Nuxt" class="size-3.5 shrink-0">
+          <span class="text-xs text-default/70">{{ parseUserMessage(part.text).page?.replace('/docs/', '') }}</span>
+        </div>
+        <p class="whitespace-pre-wrap text-sm/6">
+          {{ parseUserMessage(part.text).text }}
+        </p>
+      </div>
+    </template>
+  </template>
+</template>
diff --git a/app/components/chat/ChatMessageActions.vue b/app/components/chat/ChatMessageActions.vue
new file mode 100644
index 000000000..b9d0c7eb8
--- /dev/null
+++ b/app/components/chat/ChatMessageActions.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { UIMessage } from 'ai'
+
+const props = defineProps<{
+  message: UIMessage
+  vote: boolean | null
+}>()
+
+const emit = defineEmits<{
+  vote: [message: UIMessage, isUpvoted: boolean]
+}>()
+
+const { copy, copied } = useClipboard()
+
+const textContent = computed(() => {
+  return props.message.parts
+    .filter(p => p.type === 'text')
+    .map(p => (p as { text: string }).text)
+    .join('\n')
+})
+</script>
+
+<template>
+  <div class="flex items-center gap-0.5">
+    <UTooltip :text="copied ? 'Copied' : 'Copy'">
+      <UButton
+        :icon="copied ? 'i-lucide-check' : 'i-lucide-copy'"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        @click="copy(textContent)"
+      />
+    </UTooltip>
+
+    <UTooltip text="Good response">
+      <UButton
+        icon="i-lucide-thumbs-up"
+        :color="vote === true ? 'success' : 'neutral'"
+        variant="ghost"
+        size="xs"
+        @click="emit('vote', message, true)"
+      />
+    </UTooltip>
+
+    <UTooltip text="Bad response">
+      <UButton
+        icon="i-lucide-thumbs-down"
+        :color="vote === false ? 'error' : 'neutral'"
+        variant="ghost"
+        size="xs"
+        @click="emit('vote', message, false)"
+      />
+    </UTooltip>
+  </div>
+</template>
diff --git a/app/components/chat/ChatPanel.vue b/app/components/chat/ChatPanel.vue
new file mode 100644
index 000000000..6da2f6d53
--- /dev/null
+++ b/app/components/chat/ChatPanel.vue
@@ -0,0 +1,329 @@
+<script setup lang="ts">
+import { DefaultChatTransport } from 'ai'
+import type { UIMessage } from 'ai'
+import { Chat } from '@ai-sdk/vue'
+
+const { messages, chatId, resetChatId, collapseToSidebar, usage, rateLimitReached, onMessageSent } = useNuxtAgent()
+const { track } = useAnalytics()
+const toast = useToast()
+const input = ref('')
+const votes = ref(new Map<string, boolean>())
+
+function vote(message: UIMessage, isUpvoted: boolean) {
+  const current = votes.value.get(message.id)
+  const next = current === isUpvoted ? undefined : isUpvoted
+
+  if (next === undefined) {
+    votes.value.delete(message.id)
+  } else {
+    votes.value.set(message.id, next)
+  }
+  votes.value = new Map(votes.value)
+
+  $fetch('/api/agent/vote', {
+    method: 'POST',
+    body: { chatId: chatId.value, messageId: message.id, isUpvoted: next }
+  }).catch(() => {
+    if (current !== undefined) votes.value.set(message.id, current)
+    else votes.value.delete(message.id)
+    votes.value = new Map(votes.value)
+  })
+}
+
+let _skipSync = false
+
+const chat = new Chat({
+  messages: messages.value,
+  transport: new DefaultChatTransport({
+    api: '/api/agent',
+    headers: () => ({ 'x-chat-id': chatId.value })
+  }),
+  onError: (error: Error) => {
+    let message = error.message
+    if (typeof message === 'string' && message[0] === '{') {
+      try {
+        message = JSON.parse(message).message || message
+      } catch {
+        // keep original
+      }
+    }
+
+    toast.add({
+      description: message,
+      icon: 'i-lucide-alert-circle',
+      color: 'error',
+      duration: 0
+    })
+  },
+  onFinish: () => {
+    _skipSync = true
+    messages.value = chat.messages
+    nextTick(() => {
+      _skipSync = false
+    })
+  }
+})
+
+watch(messages, (newMessages) => {
+  if (_skipSync) return
+
+  chat.messages = newMessages
+  if (chat.lastMessage?.role === 'user') {
+    chat.regenerate()
+  }
+})
+
+const canClear = computed(() => messages.value.length > 0 || chat.messages.length > 0)
+
+const suggestions = [
+  {
+    icon: 'i-lucide-rocket',
+    title: 'Start a project',
+    description: 'Pick a starter template',
+    question: 'Show me available starter templates'
+  },
+  {
+    icon: 'i-lucide-lock',
+    title: 'Add auth',
+    description: 'User authentication setup',
+    question: 'How do I add authentication to my Nuxt app?'
+  },
+  {
+    icon: 'i-lucide-layers',
+    title: 'Rendering',
+    description: 'SSR, SSG, ISR & more',
+    question: 'What are the available rendering modes in Nuxt?'
+  },
+  {
+    icon: 'i-lucide-database',
+    title: 'Database',
+    description: 'Connect a database',
+    question: 'How do I connect a database to my Nuxt app?'
+  },
+  {
+    icon: 'i-lucide-cloud',
+    title: 'Deploy',
+    description: 'Ship to production',
+    question: 'How do I deploy my Nuxt app?'
+  },
+  {
+    icon: 'i-lucide-sparkles',
+    title: 'What\'s new',
+    description: 'Latest in Nuxt 4',
+    question: 'What\'s new in Nuxt 4?'
+  }
+]
+
+function onSubmit() {
+  if (!input.value.trim() || rateLimitReached.value) return
+
+  track('Nuxt Agent Message Sent', { query: input.value, source: 'chat-page' })
+  chat.sendMessage({ text: input.value })
+  onMessageSent()
+  input.value = ''
+}
+
+function askQuestion(question: string) {
+  track('Nuxt Agent FAQ Clicked', { question, source: 'chat-page' })
+  input.value = question
+  onSubmit()
+}
+
+function clearMessages() {
+  track('Nuxt Agent Chat Cleared', { source: 'chat-page' })
+  if (chat.status === 'streaming') {
+    chat.stop()
+  }
+  messages.value = []
+  chat.messages = []
+  resetChatId()
+  votes.value = new Map()
+}
+
+const chatTheme = {
+  prose: {
+    p: { base: 'my-2 text-sm/6' },
+    li: { base: 'my-0.5 text-sm/6' },
+    ul: { base: 'my-2' },
+    ol: { base: 'my-2' },
+    h1: { base: 'text-xl mb-4' },
+    h2: { base: 'text-lg mt-6 mb-3' },
+    h3: { base: 'text-base mt-4 mb-2' },
+    h4: { base: 'text-sm mt-3 mb-1.5' },
+    code: { base: 'text-xs' },
+    pre: { root: 'my-2', base: 'text-xs/5' },
+    table: { root: 'my-2' },
+    hr: { base: 'my-4' }
+  }
+}
+</script>
+
+<template>
+  <div class="flex-1 flex flex-col min-h-0 relative">
+    <div class="absolute top-0 inset-x-0 z-10 backdrop-blur pointer-events-none">
+      <div class="flex items-center justify-between px-3 py-2 pointer-events-auto">
+        <UTooltip text="Back to nuxt.com">
+          <NuxtLink to="/" class="flex items-baseline gap-1.5 text-muted hover:text-highlighted transition-colors" @click="collapseToSidebar">
+            <UIcon name="i-lucide-arrow-left" class="size-4" />
+            <NuxtLogo class="h-4.5 w-auto" />
+          </NuxtLink>
+        </UTooltip>
+
+        <div class="flex items-center gap-1.5">
+          <UTooltip v-if="canClear" text="New conversation">
+            <UButton
+              icon="i-lucide-list-x"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              @click="clearMessages"
+            />
+          </UTooltip>
+          <UColorModeButton size="sm" color="neutral" variant="ghost" />
+        </div>
+      </div>
+    </div>
+
+    <template v-if="!chat.messages.length">
+      <div class="flex-1 flex flex-col items-center justify-center gap-8 p-8">
+        <div class="flex w-full max-w-2xl flex-col items-center px-4">
+          <div class="relative h-36 w-full shrink-0 overflow-hidden sm:h-40">
+            <AgentShader variant="hero" />
+          </div>
+          <div class="text-center">
+            <h1 class="text-2xl sm:text-3xl font-semibold text-highlighted tracking-tight">
+              Welcome to Nuxt Agent
+            </h1>
+            <p class="text-base text-muted mt-2 max-w-lg mx-auto">
+              Ask anything or explore docs, modules, deployment, and more.
+            </p>
+          </div>
+        </div>
+
+        <div class="w-full max-w-2xl flex flex-col gap-6">
+          <div v-if="rateLimitReached" class="flex items-center justify-center gap-2 py-4 text-sm text-muted">
+            <UIcon name="i-lucide-clock" class="size-4 shrink-0" />
+            <span>Daily limit reached. Try again tomorrow.</span>
+          </div>
+          <UChatPrompt
+            v-else
+            v-model="input"
+            :error="chat.error"
+            placeholder="Ask anything…"
+            variant="subtle"
+            :rows="2"
+            :maxrows="5"
+            autofocus
+            class="[view-transition-name:chat-prompt]"
+            :ui="{ base: 'px-1.5 rounded-none' }"
+            @submit="onSubmit"
+          >
+            <template #footer>
+              <UTooltip v-if="usage" text="Daily messages remaining">
+                <span class="text-xs text-dimmed" :class="usage.remaining <= 5 ? 'text-warning' : ''">
+                  {{ usage.remaining }}/{{ usage.limit }}
+                </span>
+              </UTooltip>
+              <UChatPromptSubmit
+                color="neutral"
+                size="sm"
+                :status="chat.status"
+                :disabled="chat.status === 'ready' && !input.trim()"
+                @stop="chat.stop()"
+                @reload="chat.regenerate()"
+              />
+            </template>
+          </UChatPrompt>
+
+          <div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-3">
+            <button
+              v-for="suggestion in suggestions"
+              :key="suggestion.title"
+              class="flex sm:flex-col gap-3 p-4 rounded-lg border border-default bg-default hover:bg-elevated/50 text-left transition-colors cursor-pointer"
+
+              @click="askQuestion(suggestion.question)"
+            >
+              <UIcon :name="suggestion.icon" class="size-5 text-muted shrink-0" />
+              <div>
+                <p class="text-sm font-medium text-highlighted">
+                  {{ suggestion.title }}
+                </p>
+                <p class="text-sm text-muted mt-0.5 hidden sm:block">
+                  {{ suggestion.description }}
+                </p>
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="flex-1 overflow-y-auto overscroll-none">
+        <UTheme :ui="chatTheme">
+          <div class="mx-auto w-full max-w-3xl px-4 sm:px-6">
+            <UChatMessages
+              should-auto-scroll
+              :messages="chat.messages"
+              :status="chat.status"
+              class="pt-10 pb-4"
+            >
+              <template #indicator>
+                <AgentIndicator />
+              </template>
+
+              <template #content="{ message }">
+                <ChatContent :message="message" :index="0" :chat="chat" />
+              </template>
+
+              <template #actions="{ message }">
+                <ChatMessageActions
+                  v-if="message.role === 'assistant'"
+                  :message="message"
+                  :vote="votes.get(message.id) ?? null"
+                  @vote="vote"
+                />
+              </template>
+            </UChatMessages>
+          </div>
+        </UTheme>
+      </div>
+
+      <div class="mx-auto w-full max-w-3xl px-4 sm:px-6">
+        <div v-if="rateLimitReached" class="flex items-center justify-center gap-2 py-4 text-sm text-muted">
+          <UIcon name="i-lucide-clock" class="size-4 shrink-0" />
+          <span>Daily limit reached. Try again tomorrow.</span>
+        </div>
+        <UChatPrompt
+          v-else
+          v-model="input"
+          :error="chat.error"
+          placeholder="Ask anything…"
+          variant="subtle"
+          :rows="2"
+          :maxrows="8"
+          autofocus
+          class="[view-transition-name:chat-prompt] rounded-b-none"
+          :ui="{ base: 'px-1.5', root: 'rounded-b-none' }"
+          @submit="onSubmit"
+        >
+          <template #footer>
+            <UTooltip v-if="usage" text="Daily messages remaining">
+              <span class="text-xs text-dimmed" :class="usage.remaining <= 5 ? 'text-warning' : ''">
+                {{ usage.remaining }}/{{ usage.limit }}
+              </span>
+            </UTooltip>
+            <UChatPromptSubmit
+              :status="chat.status"
+              :disabled="chat.status === 'ready' && !input.trim()"
+              color="neutral"
+              size="sm"
+              @stop="chat.stop()"
+              @reload="chat.regenerate()"
+            />
+          </template>
+        </UChatPrompt>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/app/components/content-toc/ContentTocBottom.vue b/app/components/content-toc/ContentTocBottom.vue
index 1674d3070..debfa9c6c 100644
--- a/app/components/content-toc/ContentTocBottom.vue
+++ b/app/components/content-toc/ContentTocBottom.vue
@@ -13,12 +13,31 @@ interface Props {
 }
 
 defineProps<Props>()
+
+const route = useRoute()
+const { open } = useNuxtAgent()
+const { track } = useAnalytics()
+
+function explainWithAI() {
+  track('Nuxt Agent Explain Page', { page: route.path })
+  open(`[Page: ${route.path}] Explain this page`, true)
+}
 </script>
 
 <template>
   <USeparator v-if="hasLinks" type="dashed" />
   <UPageLinks title="Community" :links="communityLinks" />
   <USeparator type="dashed" />
+  <UButton
+    icon="i-lucide-brain"
+    label="Explain with Agent"
+    size="sm"
+    variant="link"
+    color="neutral"
+    class="p-0 -my-2"
+    @click="explainWithAI"
+  />
+  <USeparator type="dashed" />
   <SocialLinks />
   <Ads />
 </template>
diff --git a/app/components/header/Header.vue b/app/components/header/Header.vue
index dc13088a7..b75f0a890 100644
--- a/app/components/header/Header.vue
+++ b/app/components/header/Header.vue
@@ -69,6 +69,8 @@ function trackGitHubClick() {
         <UContentSearchButton @click="trackSearchOpen" />
       </UTooltip>
 
+      <AgentChatButton />
+
       <UColorModeButton />
 
       <UTooltip text="GitHub Stars">
diff --git a/app/components/tools/BlogCard.vue b/app/components/tools/BlogCard.vue
new file mode 100644
index 000000000..482ce25d8
--- /dev/null
+++ b/app/components/tools/BlogCard.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  description?: string
+  path: string
+  date?: string
+  image?: string
+  category?: string
+  authors?: Array<{ name: string, avatar?: string }>
+}>()
+
+const formattedDate = computed(() => {
+  if (!props.date) return null
+  return formatDateByLocale('en', props.date)
+})
+</script>
+
+<template>
+  <NuxtLink :to="path" class="flex flex-col rounded-lg border border-default bg-elevated/50 overflow-hidden hover:bg-elevated transition-colors max-w-sm">
+    <NuxtImg
+      v-if="image"
+      :src="image"
+      :alt="title"
+      class="w-full aspect-2/1 object-cover"
+      width="384"
+      height="192"
+      loading="lazy"
+    />
+
+    <div class="px-3 py-2">
+      <div class="flex items-center gap-2 mb-0.5">
+        <UBadge
+          v-if="category"
+          :label="category"
+          :color="category === 'Release' ? 'primary' : category === 'Tutorial' ? 'info' : 'neutral'"
+          variant="subtle"
+          size="sm"
+          class="rounded-full"
+        />
+        <span v-if="formattedDate" class="text-[11px] text-dimmed">{{ formattedDate }}</span>
+      </div>
+      <span class="text-sm font-semibold text-highlighted line-clamp-2">{{ title }}</span>
+      <p v-if="description" class="text-xs text-muted line-clamp-2 mt-0.5">
+        {{ description }}
+      </p>
+    </div>
+
+    <div v-if="authors?.length" class="flex items-center gap-2 px-3 py-1.5 border-t border-default">
+      <div class="flex -space-x-1">
+        <UAvatar
+          v-for="author in authors.slice(0, 3)"
+          :key="author.name"
+          :src="author.avatar"
+          :alt="author.name"
+          size="2xs"
+          class="ring-1 ring-default"
+        />
+      </div>
+      <span class="text-[11px] text-muted">{{ authors.map(a => a.name).join(', ') }}</span>
+    </div>
+  </NuxtLink>
+</template>
diff --git a/app/components/tools/HostingCard.vue b/app/components/tools/HostingCard.vue
new file mode 100644
index 000000000..373cd1091
--- /dev/null
+++ b/app/components/tools/HostingCard.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  description?: string
+  path: string
+  logoSrc?: string
+  logoIcon?: string
+  category?: string
+  nitroPreset?: string
+  website?: string
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col rounded-lg border border-default bg-elevated/50 overflow-hidden">
+    <NuxtLink :to="path" class="flex items-start gap-3 p-3 hover:bg-elevated transition-colors">
+      <UAvatar
+        v-if="logoSrc"
+        :src="logoSrc"
+        :alt="title"
+        size="md"
+        class="rounded-md bg-transparent shrink-0"
+      />
+      <div v-else class="flex items-center justify-center size-10 rounded-md bg-elevated shrink-0">
+        <UIcon :name="logoIcon || 'i-lucide-server'" class="size-5 text-muted" />
+      </div>
+      <div class="min-w-0 flex-1">
+        <span class="text-sm font-semibold text-highlighted truncate">{{ title }}</span>
+        <p v-if="description" class="text-xs text-muted line-clamp-2 mt-0.5">
+          {{ description }}
+        </p>
+      </div>
+    </NuxtLink>
+
+    <div class="flex items-center gap-2 px-3 py-1.5 border-t border-default">
+      <div class="flex items-center gap-2.5 text-[11px] text-muted flex-1">
+        <span v-if="category" class="flex items-center gap-1">
+          <UIcon name="i-lucide-layers" class="size-3" />
+          {{ category }}
+        </span>
+        <NuxtLink v-if="website" :to="website" target="_blank" class="flex items-center gap-1 hover:text-default transition-colors">
+          <UIcon name="i-lucide-globe" class="size-3" />
+          Website
+        </NuxtLink>
+        <NuxtLink v-if="nitroPreset" :to="`https://nitro.unjs.io/deploy/providers/${nitroPreset}`" target="_blank" class="flex items-center gap-1 hover:text-default transition-colors">
+          <UIcon name="i-lucide-book" class="size-3" />
+          Nitro Docs
+        </NuxtLink>
+      </div>
+
+      <UButton
+        icon="i-lucide-arrow-right"
+        label="Guide"
+        size="xs"
+        color="primary"
+        variant="soft"
+        :to="path"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/components/tools/ModuleCard.vue b/app/components/tools/ModuleCard.vue
new file mode 100644
index 000000000..2d92dbb4f
--- /dev/null
+++ b/app/components/tools/ModuleCard.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+/**
+ * Prop is `slug` (catalog slug), not `name`, so Vue Router's NuxtLink never receives a `name` prop
+ * (named route), which was hiding the title line when `npm` was absent.
+ */
+const props = defineProps<{
+  slug: string
+  npm?: string
+  description?: string
+  icon?: string
+  category?: string
+  repo?: string
+  website?: string
+  downloads?: number
+  stars?: number
+}>()
+
+const { copy } = useClipboard()
+const { track } = useAnalytics()
+
+const displayTitle = computed(() => {
+  const fromNpm = props.npm?.trim()
+  if (fromNpm) return fromNpm
+  return props.slug?.trim() || 'Module'
+})
+
+const installCommand = computed(() => `npx nuxt@latest module add ${props.slug}`)
+
+const agentPrompt = computed(() => {
+  const lines = [`Install and configure the Nuxt module **${props.npm || props.slug}**: ${props.description || ''}`]
+  if (props.website) lines.push(`Docs: ${props.website}`)
+  if (props.repo) lines.push(`GitHub: https://github.com/${props.repo}`)
+  lines.push(`\nSteps:\n1. Run \`${installCommand.value}\`\n2. Read the module documentation and add recommended configuration in \`nuxt.config.ts\`\n3. List any required environment variables in \`.env.example\` without filling in actual values`)
+  return lines.join('\n')
+})
+
+function copyInstall() {
+  track('Module Install Command Copied', { module: props.slug, source: 'nuxt-agent' })
+  copy(installCommand.value, { title: 'Command copied to clipboard:', description: installCommand.value })
+}
+
+function copyPrompt() {
+  track('Module Agent Prompt Copied', { module: props.slug, source: 'nuxt-agent' })
+  copy(agentPrompt.value, { title: 'Agent prompt copied!', description: props.npm || props.slug, icon: 'i-custom-ai' })
+}
+</script>
+
+<template>
+  <div class="flex flex-col rounded-lg border border-default bg-elevated/50 overflow-hidden">
+    <NuxtLink
+      :to="`/modules/${slug}`"
+      class="flex items-start gap-3 p-3 transition-colors hover:bg-elevated"
+    >
+      <UAvatar
+        :src="moduleImage(icon)"
+        :icon="moduleIcon(category || '')"
+        :alt="displayTitle"
+        size="md"
+        class="rounded-md bg-transparent shrink-0"
+      />
+      <div class="min-w-0 flex-1">
+        <span class="text-sm font-semibold text-highlighted truncate">{{ displayTitle }}</span>
+        <p v-if="description" class="text-xs text-muted line-clamp-2 mt-0.5">
+          {{ description }}
+        </p>
+      </div>
+    </NuxtLink>
+
+    <div class="flex items-center gap-2 px-3 py-1.5 border-t border-default">
+      <div class="flex items-center gap-2.5 text-[11px] text-muted flex-1">
+        <span v-if="stars" class="flex items-center gap-1">
+          <UIcon name="i-lucide-star" class="size-3" />
+          {{ formatNumber(stars) }}
+        </span>
+        <NuxtLink v-if="website" :to="website" target="_blank" class="flex items-center gap-1 hover:text-default transition-colors">
+          <UIcon name="i-lucide-book" class="size-3" />
+          Docs
+        </NuxtLink>
+        <NuxtLink v-if="repo" :to="`https://github.com/${repo}`" target="_blank" class="flex items-center gap-1 hover:text-default transition-colors">
+          <UIcon name="i-lucide-github" class="size-3" />
+          GitHub
+        </NuxtLink>
+      </div>
+
+      <UButton
+        icon="i-custom-ai"
+        label="Prompt"
+        size="xs"
+        color="neutral"
+        variant="outline"
+        @click.stop="copyPrompt"
+      />
+      <UButton
+        icon="i-lucide-terminal"
+        label="Install"
+        size="xs"
+        color="primary"
+        variant="soft"
+        @click.stop="copyInstall"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/components/tools/PlaygroundCard.vue b/app/components/tools/PlaygroundCard.vue
new file mode 100644
index 000000000..b19594afa
--- /dev/null
+++ b/app/components/tools/PlaygroundCard.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  url: string
+  repo: string
+  title?: string
+  file?: string
+  dir?: string
+}>()
+</script>
+
+<template>
+  <div class="flex items-center gap-3 rounded-lg border border-default bg-elevated/50 p-3">
+    <div class="flex items-center justify-center size-10 rounded-md bg-elevated shrink-0">
+      <UIcon name="i-simple-icons-stackblitz" class="size-5 text-[#1389FD]" />
+    </div>
+    <div class="min-w-0 flex-1">
+      <span class="text-sm font-semibold text-highlighted truncate block">{{ title || repo }}</span>
+      <span class="text-[11px] text-muted truncate block">{{ file || 'app.vue' }}{{ dir ? ` · ${dir}` : '' }}</span>
+    </div>
+    <UButton
+      icon="i-lucide-external-link"
+      label="Open"
+      size="xs"
+      color="primary"
+      variant="soft"
+      :to="url"
+      target="_blank"
+    />
+  </div>
+</template>
diff --git a/app/components/tools/SourceLink.vue b/app/components/tools/SourceLink.vue
new file mode 100644
index 000000000..1937df91c
--- /dev/null
+++ b/app/components/tools/SourceLink.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  url: string
+  favicon: string
+  label: string
+}>()
+</script>
+
+<template>
+  <UButton
+    :to="url"
+    target="_blank"
+    :avatar="{ src: favicon }"
+    :label="label"
+    trailing-icon="i-lucide-arrow-up-right"
+    size="xs"
+    color="neutral"
+    variant="outline"
+    class="rounded-full align-middle"
+  />
+</template>
diff --git a/app/components/tools/TemplateCard.vue b/app/components/tools/TemplateCard.vue
new file mode 100644
index 000000000..6735fc14e
--- /dev/null
+++ b/app/components/tools/TemplateCard.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+const props = defineProps<{
+  name: string
+  slug: string
+  description?: string
+  repo?: string
+  demo?: string
+  badge?: string
+  purchase?: string
+}>()
+
+const { copy } = useClipboard()
+const { track } = useAnalytics()
+
+const initCommand = computed(() => {
+  if (!props.repo) return null
+  return `npx nuxi init -t gh:${props.repo} my-app`
+})
+
+function copyInit() {
+  if (!initCommand.value) return
+  track('Template Init Copied', { template: props.slug, source: 'nuxt-agent' })
+  copy(initCommand.value, { title: 'Command copied to clipboard:', description: initCommand.value })
+}
+</script>
+
+<template>
+  <div class="@container flex flex-col rounded-lg border border-default bg-elevated/50 overflow-hidden">
+    <NuxtLink :to="`/templates`" class="block hover:bg-elevated transition-colors overflow-hidden">
+      <NuxtImg
+        :src="`/assets/templates/${slug}.webp`"
+        :alt="name"
+        class="w-full aspect-2/1 object-cover object-top"
+        width="384"
+        height="192"
+        format="webp"
+        loading="lazy"
+      />
+    </NuxtLink>
+
+    <div class="px-3 py-2">
+      <div class="flex items-center gap-2">
+        <span class="text-sm font-semibold text-highlighted truncate">{{ name }}</span>
+        <UBadge
+          v-if="badge === 'Premium'"
+          label="Premium"
+          color="info"
+          variant="subtle"
+          size="sm"
+          class="rounded-full"
+        />
+        <UBadge
+          v-else-if="badge === 'Freemium'"
+          label="Freemium"
+          color="success"
+          variant="subtle"
+          size="sm"
+          class="rounded-full"
+        />
+      </div>
+      <p v-if="description" class="text-xs text-muted line-clamp-2 mt-0.5">
+        {{ description }}
+      </p>
+    </div>
+
+    <div class="flex items-center gap-1.5 px-3 py-1.5 border-t border-default">
+      <div class="flex items-center gap-1 @xs:gap-2.5 flex-1">
+        <NuxtLink v-if="demo" :to="demo" target="_blank" class="flex items-center gap-1 text-muted hover:text-default transition-colors">
+          <UIcon name="i-lucide-laptop" class="size-3.5" />
+          <span class="hidden @xs:inline text-[11px]">Demo</span>
+        </NuxtLink>
+        <NuxtLink v-if="repo" :to="`https://github.com/${repo}`" target="_blank" class="flex items-center gap-1 text-muted hover:text-default transition-colors">
+          <UIcon name="i-simple-icons-github" class="size-3.5" />
+          <span class="hidden @xs:inline text-[11px]">GitHub</span>
+        </NuxtLink>
+        <NuxtLink v-if="purchase" :to="purchase" target="_blank" class="flex items-center gap-1 text-muted hover:text-default transition-colors">
+          <UIcon name="i-lucide-credit-card" class="size-3.5" />
+          <span class="hidden @xs:inline text-[11px]">Purchase</span>
+        </NuxtLink>
+      </div>
+
+      <UButton
+        v-if="initCommand"
+        icon="i-lucide-terminal"
+        label="Init"
+        size="xs"
+        color="primary"
+        variant="soft"
+        @click.stop="copyInit"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/components/tools/ToolSources.vue b/app/components/tools/ToolSources.vue
new file mode 100644
index 000000000..540fc20ed
--- /dev/null
+++ b/app/components/tools/ToolSources.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineProps<{
+  sources: Source[]
+}>()
+</script>
+
+<template>
+  <div v-if="sources.length" class="p-1 border border-default rounded-md max-h-40 overflow-y-auto">
+    <a
+      v-for="source in sources"
+      :key="source.url"
+      :href="source.url"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="flex items-center gap-2 px-2 py-1 text-sm text-muted hover:text-default hover:bg-elevated/50 transition-colors min-w-0 rounded-md"
+    >
+      <img
+        :src="getFaviconUrl(source.url)"
+        :alt="getDomain(source.url)"
+        class="size-4 shrink-0 rounded-sm"
+        loading="lazy"
+        @error="($event.target as HTMLImageElement).style.display = 'none'"
+      >
+      <span class="truncate">{{ source.title || getDomain(source.url) }}</span>
+      <span v-if="source.title" class="text-xs text-dimmed ms-auto shrink-0">{{ getDomain(source.url) }}</span>
+    </a>
+  </div>
+</template>
diff --git a/app/composables/useChatTools.ts b/app/composables/useChatTools.ts
new file mode 100644
index 000000000..bca76343a
--- /dev/null
+++ b/app/composables/useChatTools.ts
@@ -0,0 +1,194 @@
+import type { ToolUIPart, DynamicToolUIPart } from 'ai'
+import { getToolName } from 'ai'
+
+export type ToolPart = ToolUIPart | DynamicToolUIPart
+type ToolState = ToolPart['state']
+
+export interface ModuleCardData {
+  name: string
+  npm?: string
+  description?: string
+  icon?: string
+  category?: string
+  repo?: string
+  website?: string
+  downloads?: number
+  stars?: number
+}
+
+export function isValidModuleCardData(output: unknown): output is ModuleCardData {
+  if (!output || typeof output !== 'object') return false
+  const o = output as Record<string, unknown>
+  if ('error' in o && o.error) return false
+  const name = o.name
+  return typeof name === 'string' && name.trim().length > 0
+}
+
+/** Maps API/tool `name` to `slug` so we never pass a `name` prop into ModuleCard (conflicts with Vue Router / NuxtLink). */
+export function moduleCardProps(data: ModuleCardData): Omit<ModuleCardData, 'name'> & { slug: string } {
+  const { name, ...rest } = data
+  return { ...rest, slug: name }
+}
+
+export interface TemplateCardData {
+  name: string
+  slug: string
+  description?: string
+  repo?: string
+  demo?: string
+  badge?: string
+  purchase?: string
+}
+
+export interface BlogCardData {
+  title: string
+  description?: string
+  path: string
+  date?: string
+  image?: string
+  category?: string
+  authors?: Array<{ name: string, avatar?: string }>
+}
+
+export interface HostingCardData {
+  title: string
+  description?: string
+  path: string
+  logoSrc?: string
+  logoIcon?: string
+  category?: string
+  nitroPreset?: string
+  website?: string
+}
+
+export interface PlaygroundCardData {
+  url: string
+  repo: string
+  title?: string
+  file?: string
+  dir?: string
+}
+
+function getToolMessage(state: ToolState, toolName: string, toolInput: Record<string, string | undefined>) {
+  const searchVerb = state === 'output-available' ? 'Searched' : 'Searching'
+  const readVerb = state === 'output-available' ? 'Read' : 'Reading'
+
+  return {
+    'list-pages': `${searchVerb} pages`,
+    'get-page': `${readVerb} ${toolInput.path || '...'}`,
+    'list-modules': `${searchVerb} modules`,
+    'get-module': `${readVerb} module ${toolInput.slug || '...'}`,
+    'show_template': `${state === 'output-available' ? 'Found' : 'Finding'} templates`,
+    'show_blog_post': `${state === 'output-available' ? 'Found' : 'Finding'} blog post`,
+    'show_hosting': `${state === 'output-available' ? 'Found' : 'Finding'} hosting provider`,
+    'open_playground': `${state === 'output-available' ? 'Generated' : 'Generating'} playground`
+  }[toolName] || `${searchVerb} ${toolName}`
+}
+
+export function getToolText(part: ToolPart) {
+  return getToolMessage(part.state, getToolName(part), (part.input || {}) as Record<string, string | undefined>)
+}
+
+export function getToolIcon(part: ToolPart): string {
+  const toolName = getToolName(part)
+
+  return {
+    'get-page': 'i-lucide-file-text',
+    'list-modules': 'i-lucide-box',
+    'get-module': 'i-lucide-box',
+    'show_template': 'i-lucide-layout-template',
+    'show_blog_post': 'i-lucide-newspaper',
+    'show_hosting': 'i-lucide-server',
+    'open_playground': 'i-simple-icons-stackblitz'
+  }[toolName] || 'i-lucide-search'
+}
+
+export function getModuleCards(part: ToolPart): ModuleCardData[] {
+  if (part.state !== 'output-available' || !part.output) return []
+
+  const toolName = getToolName(part)
+  const output = part.output as Record<string, unknown>
+
+  if (toolName === 'get-module') {
+    const content = (output.content ?? output) as Array<{ text?: string }> | Record<string, unknown>
+    let data: Record<string, unknown> | undefined
+    if (Array.isArray(content)) {
+      const text = content.find(c => c.text)?.text
+      if (text) {
+        try {
+          data = JSON.parse(text)
+        } catch {
+          // ignore malformed JSON
+        }
+      }
+    } else {
+      data = content
+    }
+    if (data?.name) {
+      return [{
+        name: data.name as string,
+        npm: data.npm as string | undefined,
+        description: data.description as string | undefined,
+        icon: data.icon as string | undefined,
+        category: data.category as string | undefined,
+        repo: data.repo as string | undefined,
+        website: data.website as string | undefined,
+        downloads: (data.stats as Record<string, number> | undefined)?.downloads,
+        stars: (data.stats as Record<string, number> | undefined)?.stars
+      }]
+    }
+  }
+
+  if (toolName === 'list-modules') {
+    const content = (output.content ?? output) as Array<{ text?: string }> | unknown
+    let items: Record<string, unknown>[] = []
+    if (Array.isArray(content)) {
+      const text = content.find((c: { text?: string }) => c.text)?.text
+      if (text) {
+        try {
+          items = JSON.parse(text)
+        } catch {
+          // ignore malformed JSON
+        }
+      }
+    }
+    if (Array.isArray(items)) {
+      return items.filter(m => m.name).slice(0, 5).map(m => ({
+        name: m.name as string,
+        npm: m.npm as string | undefined,
+        description: m.description as string | undefined,
+        icon: m.icon as string | undefined,
+        category: m.category as string | undefined,
+        repo: m.repo as string | undefined,
+        website: m.website as string | undefined,
+        downloads: (m.stats as Record<string, number> | undefined)?.downloads,
+        stars: (m.stats as Record<string, number> | undefined)?.stars
+      }))
+    }
+  }
+
+  return []
+}
+
+export function getToolOutput(part: ToolPart): string | undefined {
+  if (part.state !== 'output-available' || !part.output) return undefined
+
+  const output = part.output as Record<string, unknown>
+
+  if (getToolName(part) === 'list-pages' || getToolName(part) === 'get-page') {
+    const content = (output.content ?? output) as Array<{ text?: string }> | string
+    const text = typeof content === 'string' ? content : content?.map(c => c.text).filter(Boolean).join('\n') || ''
+    return text.length > 500 ? `${text.slice(0, 500)}…` : text || undefined
+  }
+
+  const json = JSON.stringify(output, null, 2)
+  return json.length > 500 ? `${json.slice(0, 500)}…` : json
+}
+
+const pageContextPattern = /^\[Page: (\/[^\]]+)\]\s*/
+
+export function parseUserMessage(text: string) {
+  const match = text.match(pageContextPattern)
+  if (!match) return { page: null, text }
+  return { page: match[1], text: text.replace(pageContextPattern, '') }
+}
diff --git a/app/composables/useNavigation.ts b/app/composables/useNavigation.ts
index 32bc64397..c7ed12859 100644
--- a/app/composables/useNavigation.ts
+++ b/app/composables/useNavigation.ts
@@ -178,11 +178,11 @@ const _useNavigation = () => {
   const { providers } = useHostingProviders()
 
   const searchLinks = computed(() => [{
-    label: 'Ask AI',
+    label: 'Ask Agent',
     icon: 'i-lucide-wand',
     to: 'javascript:void(0);',
     onSelect: () => {
-      track('Ask AI Opened', { source: 'search-links' })
+      track('Nuxt Agent Opened', { source: 'search-links' })
       nuxtApp.$kapa?.openModal()
     }
   }, ...headerLinks.value.flatMap((link) => {
@@ -260,11 +260,11 @@ const _useNavigation = () => {
       return items
     },
     items: [{
-      label: 'Ask AI',
+      label: 'Ask Agent',
       icon: 'i-lucide-wand',
       to: 'javascript:void(0);',
       onSelect() {
-        track('Ask AI Opened', { source: 'search-palette', query: searchTerm.value })
+        track('Nuxt Agent Opened', { source: 'search-palette', query: searchTerm.value })
         nuxtApp.$kapa?.openModal(searchTerm.value)
       }
     }]
diff --git a/app/composables/useNuxtAgent.ts b/app/composables/useNuxtAgent.ts
new file mode 100644
index 000000000..3485938e1
--- /dev/null
+++ b/app/composables/useNuxtAgent.ts
@@ -0,0 +1,130 @@
+import type { UIMessage } from 'ai'
+import { createSharedComposable, useLocalStorage, useMediaQuery } from '@vueuse/core'
+import type { FaqCategory, FaqQuestions } from '~/types/agent'
+
+interface AgentUsage {
+  used: number
+  remaining: number
+  limit: number
+}
+
+function normalizeFaqQuestions(questions: FaqQuestions): FaqCategory[] {
+  if (!questions || (Array.isArray(questions) && questions.length === 0)) {
+    return []
+  }
+
+  if (typeof questions[0] === 'string') {
+    return [{
+      category: 'Questions',
+      items: questions as string[]
+    }]
+  }
+
+  return questions as FaqCategory[]
+}
+
+export const useNuxtAgent = createSharedComposable(() => {
+  const appConfig = useAppConfig()
+  const agentConfig = appConfig.agent as { faqQuestions?: FaqQuestions } | undefined
+
+  const storageOpen = useLocalStorage('assistant-open', false)
+  const messages = useLocalStorage<UIMessage[]>('assistant-messages', [])
+  const chatId = useLocalStorage('assistant-chat-id', () => crypto.randomUUID())
+
+  const isOpen = ref(false)
+
+  onNuxtReady(() => {
+    nextTick(() => {
+      isOpen.value = storageOpen.value
+    })
+  })
+
+  watch(isOpen, (value) => {
+    storageOpen.value = value
+  })
+
+  const faqQuestions = computed<FaqCategory[]>(() => {
+    const faqConfig = agentConfig?.faqQuestions
+    if (!faqConfig) return []
+    return normalizeFaqQuestions(faqConfig)
+  })
+
+  function resetChatId() {
+    chatId.value = crypto.randomUUID()
+  }
+
+  function open(initialMessage?: string, clearPrevious = false) {
+    if (clearPrevious) {
+      messages.value = []
+      resetChatId()
+    }
+
+    if (initialMessage) {
+      messages.value = [...messages.value, {
+        id: String(Date.now()),
+        role: 'user' as const,
+        parts: [{ type: 'text' as const, text: initialMessage }]
+      }]
+    }
+    isOpen.value = true
+  }
+
+  function close() {
+    isOpen.value = false
+  }
+
+  function toggle() {
+    isOpen.value = !isOpen.value
+  }
+
+  function expandToFullScreen() {
+    isOpen.value = false
+    navigateTo('/chat')
+  }
+
+  function collapseToSidebar() {
+    isOpen.value = true
+  }
+
+  /** Matches Tailwind `xl` — docked USidebar only at this width and above */
+  const isAgentDockedBreakpoint = useMediaQuery('(min-width: 1280px)')
+
+  const isAgentDocked = computed(() => isOpen.value && isAgentDockedBreakpoint.value)
+
+  const { data: usage, refresh: refreshUsage } = useFetch<AgentUsage>('/api/agent/usage', {
+    server: false,
+    lazy: true,
+    default: () => ({ used: 0, remaining: 20, limit: 20 })
+  })
+
+  const rateLimitReached = computed(() => usage.value.remaining <= 0)
+
+  function onMessageSent() {
+    if (usage.value) {
+      usage.value = {
+        ...usage.value,
+        used: usage.value.used + 1,
+        remaining: Math.max(0, usage.value.remaining - 1)
+      }
+    }
+  }
+
+  return {
+    isOpen,
+    messages,
+    chatId,
+    resetChatId,
+    faqQuestions,
+    open,
+    close,
+    toggle,
+    expandToFullScreen,
+    collapseToSidebar,
+    isAgentDockedBreakpoint,
+    isAgentDocked,
+    usage,
+    rateLimitReached,
+    refreshUsage,
+    onMessageSent
+  }
+})
diff --git a/app/layouts/chat.vue b/app/layouts/chat.vue
new file mode 100644
index 000000000..9ef43d750
--- /dev/null
+++ b/app/layouts/chat.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="h-dvh flex p-2 sm:p-3">
+    <div class="flex-1 flex rounded-lg ring ring-default bg-default/75 shadow min-w-0 overflow-hidden">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/app/pages/chat.vue b/app/pages/chat.vue
new file mode 100644
index 000000000..ec0881e54
--- /dev/null
+++ b/app/pages/chat.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { joinURL } from 'ufo'
+
+definePageMeta({
+  layout: 'chat'
+})
+
+const site = useSiteConfig()
+
+useHead({
+  title: 'Nuxt Agent'
+})
+
+useSeoMeta({
+  ogTitle: 'Nuxt Agent · Nuxt',
+  ogDescription: 'The Nuxt Agent helps you explore the documentation — ask about Nuxt, modules, deployment, and more.',
+  ogImage: joinURL(site.url, '/nuxt-chat-og.jpg'),
+  twitterTitle: 'Nuxt Agent · Nuxt',
+  twitterDescription: 'The Nuxt Agent helps you explore the documentation — ask about Nuxt, modules, deployment, and more.',
+  twitterImage: joinURL(site.url, '/nuxt-chat-og.jpg')
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <ChatPanel />
+  </ClientOnly>
+</template>
diff --git a/app/pages/docs/[...slug].vue b/app/pages/docs/[...slug].vue
index a3936efc6..4a0b0d214 100644
--- a/app/pages/docs/[...slug].vue
+++ b/app/pages/docs/[...slug].vue
@@ -18,6 +18,7 @@ const route = useRoute()
 const nuxtApp = useNuxtApp()
 const { version } = useDocsVersion()
 const { headerLinks } = useHeaderLinks()
+const { isAgentDocked } = useNuxtAgent()
 const site = useSiteConfig()
 const path = computed(() => route.path.replace(/\/$/, ''))
 
@@ -177,7 +178,12 @@ function refreshHeading(opened: boolean) {
           />
         </UPageAside>
       </template>
-      <UPage>
+      <UPage
+        :ui="isAgentDocked ? {
+          center: 'lg:col-span-10',
+          right: 'lg:col-span-0'
+        } : undefined"
+      >
         <UPageHeader
           :ui="{
             wrapper: 'flex-row items-center flex-wrap justify-between'
@@ -236,6 +242,7 @@ function refreshHeading(opened: boolean) {
 
         <template #right>
           <ContentToc
+            v-if="!isAgentDocked"
             :links="page.body?.toc?.links"
             :community-links="communityLinks"
             highlight
diff --git a/app/types/agent.ts b/app/types/agent.ts
new file mode 100644
index 000000000..d97cbd870
--- /dev/null
+++ b/app/types/agent.ts
@@ -0,0 +1,6 @@
+export interface FaqCategory {
+  category: string
+  items: string[]
+}
+
+export type FaqQuestions = string[] | FaqCategory[]
diff --git a/app/utils/ai.ts b/app/utils/ai.ts
new file mode 100644
index 000000000..02b2957b6
--- /dev/null
+++ b/app/utils/ai.ts
@@ -0,0 +1,21 @@
+import type { UIMessage } from 'ai'
+import { isTextUIPart } from 'ai'
+
+export function getMergedParts(parts: UIMessage['parts']): UIMessage['parts'] {
+  const result: UIMessage['parts'] = []
+  for (const part of parts) {
+    const prev = result[result.length - 1]
+    if (part.type === 'source-url') {
+      if (prev && isTextUIPart(prev)) {
+        result[result.length - 1] = { type: 'text', text: prev.text + sourceToInlineMdc(part.url) }
+      }
+      continue
+    }
+    if (isTextUIPart(part) && prev && isTextUIPart(prev)) {
+      result[result.length - 1] = { type: 'text', text: prev.text + part.text }
+    } else {
+      result.push(part)
+    }
+  }
+  return result
+}
diff --git a/app/utils/tool.ts b/app/utils/tool.ts
new file mode 100644
index 000000000..6583b955f
--- /dev/null
+++ b/app/utils/tool.ts
@@ -0,0 +1,41 @@
+import type { getToolName } from 'ai'
+
+export interface Source {
+  url: string
+  title?: string
+}
+
+interface SearchOutput {
+  sources?: { url: string, type?: string }[]
+}
+
+type ToolPart = Parameters<typeof getToolName>[0]
+
+export function getSearchQuery(part: ToolPart): string | undefined {
+  return (part.input as { query?: string } | undefined)?.query
+}
+
+export function getSources(part: ToolPart): Source[] {
+  const output = part.output
+  if (!output) return []
+
+  if (Array.isArray(output)) {
+    return output.filter((s: Source) => s.url).map((s: Source) => ({ url: s.url, title: s.title }))
+  }
+
+  const typed = output as SearchOutput
+  if (typed.sources) {
+    return typed.sources.filter(s => s.url).map(s => ({ url: s.url }))
+  }
+
+  return []
+}
+
+export function sourceToInlineMdc(url: string): string {
+  const domain = getDomain(url)
+  const favicon = getFaviconUrl(url)
+  const safeUrl = url.replace(/"/g, '&quot;')
+  const safeFavicon = favicon.replace(/"/g, '&quot;')
+
+  return ` :source-link{url="${safeUrl}" favicon="${safeFavicon}" label="${domain}"}`
+}
diff --git a/app/utils/url.ts b/app/utils/url.ts
new file mode 100644
index 000000000..b6011d884
--- /dev/null
+++ b/app/utils/url.ts
@@ -0,0 +1,11 @@
+export function getDomain(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, '')
+  } catch {
+    return url
+  }
+}
+
+export function getFaviconUrl(url: string): string {
+  return `https://www.google.com/s2/favicons?sz=32&domain=${getDomain(url)}`
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e60920625..c76ab09b3 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -25,7 +25,9 @@ export default defineNuxtConfig({
     '@nuxtjs/mcp-toolkit',
     '@nuxt/hints',
     '@vercel/analytics',
-    '@vercel/speed-insights'
+    '@vercel/speed-insights',
+    '@comark/nuxt',
+    'evlog/nuxt'
   ],
   $development: {
     site: {
@@ -401,6 +403,7 @@ export default defineNuxtConfig({
   sourcemap: true,
   experimental: {
     extractAsyncDataHandlers: true,
+    viewTransition: true,
     defaults: {
       nuxtLink: {
         externalRelAttribute: 'noopener'
@@ -462,6 +465,9 @@ export default defineNuxtConfig({
       }
     }
   },
+  evlog: {
+    env: { service: 'nuxt-com' }
+  },
   icon: {
     customCollections: [{
       prefix: 'custom',
diff --git a/package.json b/package.json
index 59f3ec444..318b2ca86 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,11 @@
     "db:migrate": "nuxt hub database migrate"
   },
   "dependencies": {
+    "@ai-sdk/anthropic": "^3.0.68",
+    "@ai-sdk/gateway": "^3.0.83",
+    "@ai-sdk/mcp": "^1.0.25",
+    "@ai-sdk/vue": "^3.0.141",
+    "@comark/nuxt": "^0.2.0",
     "@iconify-json/heroicons": "^1.2.3",
     "@iconify-json/logos": "^1.2.10",
     "@iconify-json/lucide": "^1.2.96",
@@ -34,7 +39,7 @@
     "@nuxt/hints": "1.0.0-alpha.10",
     "@nuxt/image": "^2.0.0",
     "@nuxt/scripts": "^0.13.2",
-    "@nuxt/ui": "^4.5.1",
+    "@nuxt/ui": "^4.6.1",
     "@nuxthub/core": "^0.10.7",
     "@nuxtjs/html-validator": "^2.1.0",
     "@nuxtjs/mcp-toolkit": "^0.7.0",
@@ -47,9 +52,11 @@
     "@vueuse/components": "^14.2.1",
     "@vueuse/core": "^14.2.1",
     "@vueuse/nuxt": "^14.2.1",
-    "better-sqlite3": "^12.6.2",
+    "ai": "^6.0.161",
+    "better-sqlite3": "^12.8.0",
     "date-fns": "^4.1.0",
     "drizzle-orm": "^0.45.1",
+    "evlog": "^2.12.0",
     "feed": "^5.2.0",
     "h3": "^1.15.6",
     "little-date": "^1.2.1",
@@ -62,13 +69,13 @@
     "ofetch": "^1.5.1",
     "resend": "^6.9.3",
     "scule": "^1.3.0",
+    "shaders": "^2.5.93",
     "sitemap": "^9.0.1",
     "std-env": "^4.0.0",
     "ufo": "^1.6.3",
     "valibot": "^1.2.0"
   },
   "devDependencies": {
-    "@ai-sdk/mcp": "^1.0.25",
     "@iconify-json/vscode-icons": "^1.2.44",
     "@nuxt/devtools": "^3.2.3",
     "@nuxt/eslint": "^1.15.2",
@@ -80,7 +87,6 @@
     "@types/semver": "^7.7.1",
     "@types/youtube": "^0.1.2",
     "@vue/test-utils": "^2.4.6",
-    "ai": "^6.0.116",
     "capture-website": "^5.1.0",
     "drizzle-kit": "^0.31.9",
     "eslint": "^10.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3a0b654a3..24a2fe8d2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,21 @@ importers:
 
   .:
     dependencies:
+      '@ai-sdk/anthropic':
+        specifier: ^3.0.68
+        version: 3.0.68(zod@4.3.6)
+      '@ai-sdk/gateway':
+        specifier: ^3.0.83
+        version: 3.0.91(zod@4.3.6)
+      '@ai-sdk/mcp':
+        specifier: ^1.0.25
+        version: 1.0.35(zod@4.3.6)
+      '@ai-sdk/vue':
+        specifier: ^3.0.141
+        version: 3.0.154(vue@3.5.32(typescript@6.0.2))(zod@4.3.6)
+      '@comark/nuxt':
+        specifier: ^0.2.0
+        version: 0.2.1(@types/markdown-it@14.1.2)(magicast@0.5.2)(markdown-it@14.1.1)(nuxt@4.4.2(445499489540052a4c2e3761b79c8923))(shiki@4.0.2)(vue@3.5.32(typescript@6.0.2))
       '@iconify-json/heroicons':
         specifier: ^1.2.3
         version: 1.2.3
@@ -42,7 +57,7 @@ importers:
         specifier: ^0.13.2
         version: 0.13.2(@types/youtube@0.1.2)(@unhead/vue@2.1.13(vue@3.5.32(typescript@6.0.2)))(@vercel/functions@3.4.3)(db0@0.3.4(@libsql/client@0.17.2)(better-sqlite3@12.8.0)(drizzle-orm@0.45.2(@cloudflare/workers-types@4.20260405.1)(@libsql/client@0.17.2)(@opentelemetry/api@1.9.0)(better-sqlite3@12.8.0)))(ioredis@5.10.1)(magicast@0.5.2)(typescript@6.0.2)(vue@3.5.32(typescript@6.0.2))
       '@nuxt/ui':
-        specifier: ^4.5.1
+        specifier: ^4.6.1
         version: 4.6.1(@nuxt/content@3.12.0(@libsql/client@0.17.2)(better-sqlite3@12.8.0)(drizzle-orm@0.45.2(@cloudflare/workers-types@4.20260405.1)(@libsql/client@0.17.2)(@opentelemetry/api@1.9.0)(better-sqlite3@12.8.0))(magicast@0.5.2)(valibot@1.3.1(typescript@6.0.2)))(@tiptap/extensions@3.22.2(@tiptap/core@3.22.2(@tiptap/pm@3.22.2))(@tiptap/pm@3.22.2))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.8)(y-protocols@1.0.7(yjs@13.6.30))(yjs@13.6.30))(@vercel/functions@3.4.3)(change-case@5.4.4)(db0@0.3.4(@libsql/client@0.17.2)(better-sqlite3@12.8.0)(drizzle-orm@0.45.2(@cloudflare/workers-types@4.20260405.1)(@libsql/client@0.17.2)(@opentelemetry/api@1.9.0)(better-sqlite3@12.8.0)))(embla-carousel@8.6.0)(ioredis@5.10.1)(magicast@0.5.2)(tailwindcss@4.2.2)(typescript@6.0.2)(valibot@1.3.1(typescript@6.0.2))(vite@7.3.2(@types/node@25.5.2)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vue@3.5.32(typescript@6.0.2))(yjs@13.6.30)(zod@4.3.6)
       '@nuxthub/core':
         specifier: ^0.10.7
@@ -80,8 +95,11 @@ importers:
       '@vueuse/nuxt':
         specifier: ^14.2.1
         version: 14.2.1(magicast@0.5.2)(nuxt@4.4.2(445499489540052a4c2e3761b79c8923))(vue@3.5.32(typescript@6.0.2))
+      ai:
+        specifier: ^6.0.161
+        version: 6.0.161(zod@4.3.6)
       better-sqlite3:
-        specifier: ^12.6.2
+        specifier: ^12.8.0
         version: 12.8.0
       date-fns:
         specifier: ^4.1.0
@@ -89,6 +107,9 @@ importers:
       drizzle-orm:
         specifier: ^0.45.1
         version: 0.45.2(@cloudflare/workers-types@4.20260405.1)(@libsql/client@0.17.2)(@opentelemetry/api@1.9.0)(better-sqlite3@12.8.0)
+      evlog:
+        specifier: ^2.12.0
+        version: 2.12.0(@nuxt/kit@4.4.2(magicast@0.5.2))(ai@6.0.161(zod@4.3.6))(express@5.2.1)(fastify@5.8.4)(h3@1.15.11)(hono@4.12.12)(nitropack@2.13.3(@libsql/client@0.17.2)(@vercel/functions@3.4.3)(better-sqlite3@12.8.0)(drizzle-orm@0.45.2(@cloudflare/workers-types@4.20260405.1)(@libsql/client@0.17.2)(@opentelemetry/api@1.9.0)(better-sqlite3@12.8.0))(rolldown@1.0.0-beta.57(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2))(srvx@0.11.15))(ofetch@1.5.1)(vite@7.3.2(@types/node@25.5.2)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))
       feed:
         specifier: ^5.2.0
         version: 5.2.0
@@ -125,6 +146,9 @@ importers:
       scule:
         specifier: ^1.3.0
         version: 1.3.0
+      shaders:
+        specifier: ^2.5.93
+        version: 2.5.93(vue@3.5.32(typescript@6.0.2))
       sitemap:
         specifier: ^9.0.1
         version: 9.0.1
@@ -138,9 +162,6 @@ importers:
         specifier: ^1.2.0
         version: 1.3.1(typescript@6.0.2)
     devDependencies:
-      '@ai-sdk/mcp':
-        specifier: ^1.0.25
-        version: 1.0.35(zod@4.3.6)
       '@iconify-json/vscode-icons':
         specifier: ^1.2.44
         version: 1.2.45
@@ -174,9 +195,6 @@ importers:
       '@vue/test-utils':
         specifier: ^2.4.6
         version: 2.4.6
-      ai:
-        specifier: ^6.0.116
-        version: 6.0.149(zod@4.3.6)
       capture-website:
         specifier: ^5.1.0
         version: 5.1.0(typescript@6.0.2)
@@ -188,7 +206,7 @@ importers:
         version: 10.2.0(jiti@2.6.1)
       evalite:
         specifier: 1.0.0-beta.16
-        version: 1.0.0-beta.16(ai@6.0.149(zod@4.3.6))(better-sqlite3@12.8.0)
+        version: 1.0.0-beta.16(ai@6.0.161(zod@4.3.6))(better-sqlite3@12.8.0)
       happy-dom:
         specifier: ^20.8.3
         version: 20.8.9
@@ -231,12 +249,30 @@ packages:
       bcrypt:
         optional: true
 
+  '@ai-sdk/anthropic@3.0.68':
+    resolution: {integrity: sha512-BAd+fmgYoJMmGw0/uV+jRlXX60PyGxelA6Clp4cK/NI0dsyv9jOOwzQmKNaz2nwb+Jz7HqI7I70KK4XtU5EcXQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   '@ai-sdk/gateway@3.0.91':
     resolution: {integrity: sha512-J39Dh6Gyg6HjG3A7OFKnJMp3QyZ3Eex+XDiX8aFBdRwwZm3jGWaMhkCxQPH7yiQ9kRiErZwHXX/Oexx4SyGGGA==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
+  '@ai-sdk/gateway@3.0.94':
+    resolution: {integrity: sha512-uDDwLZhCkvC89crVS3S90D5L7AcVN8WriGuYVNYgVAaVcvy3Mthy3R9ICfzG75BObhz6pm2FWnhxDfNRK+t69Q==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
+  '@ai-sdk/gateway@3.0.98':
+    resolution: {integrity: sha512-Ol+nP8PIlj8FjN8qKlxhE89N0woqAaGi9CUBGp1boe3RafpphJ7WMuq/RErSvxtwTqje03TP+zIdzP113krxRg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   '@ai-sdk/mcp@1.0.35':
     resolution: {integrity: sha512-YeFHyq3pq/tkD8rp/U0P9sJsQfDTT4F/8WdpRLLo30cCLx2kfuIYafRyTLfERnYayYlLbH5aMBpjttFunvIDCA==}
     engines: {node: '>=18'}
@@ -253,6 +289,12 @@ packages:
     resolution: {integrity: sha512-oGMAgGoQdBXbZqNG0Ze56CHjDZ1IDYOwGYxYjO5KLSlz5HiNQ9udIXsPZ61VWaHGZ5XW/jyjmr6t2xz2jGVwbQ==}
     engines: {node: '>=18'}
 
+  '@ai-sdk/vue@3.0.154':
+    resolution: {integrity: sha512-dPhHMhRgBD6Si8JUeJRQ+P/lQhyumB67JRl8q5kumImXG6LXXF12wy3KvNgU6fVitvi9VhwPyVitZtBzwgO8DA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      vue: ^3.3.4
+
   '@alloc/quick-lru@5.2.0':
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
@@ -438,6 +480,32 @@ packages:
   '@colordx/core@5.0.3':
     resolution: {integrity: sha512-xBQ0MYRTNNxW3mS2sJtlQTT7C3Sasqgh1/PsHva7fyDb5uqYY+gv9V0utDdX8X80mqzbGz3u/IDJdn2d/uW09g==}
 
+  '@comark/markdown-it@0.3.3':
+    resolution: {integrity: sha512-qG+dbiwPKcaO3kzABw0dxtLqTxHAgqpklLwnu56jiYX3V/0dpVYCTIhXRhKgAo1JasBhcPP+OeHAENziXxGYbg==}
+    peerDependencies:
+      '@types/markdown-it': '*'
+      markdown-it: ^14.0.0
+
+  '@comark/nuxt@0.2.1':
+    resolution: {integrity: sha512-cluseC8YBC/+toX47LTDXCBEOpk1KAJYiK/Vyc6sZ4Q+ct0fG/q74dT2jVoEsR1es8JNmCUzEFSmnuuI8AOCfA==}
+    peerDependencies:
+      nuxt: ^3.0.0
+
+  '@comark/vue@0.2.1':
+    resolution: {integrity: sha512-MOwPsBBrTN1rKb9P5s3Vrj5SKqdHZ5PU16PgCscZLZFbL1Qt/MoRCHr0gwmA8ijrk6C5dih65Xr5BSNdTITGEA==}
+    peerDependencies:
+      beautiful-mermaid: ^1.1.3
+      katex: ^0.16.33
+      shiki: ^4.0.0
+      vue: ^3.5.0
+    peerDependenciesMeta:
+      beautiful-mermaid:
+        optional: true
+      katex:
+        optional: true
+      shiki:
+        optional: true
+
   '@drizzle-team/brocli@0.10.2':
     resolution: {integrity: sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w==}
 
@@ -4196,8 +4264,14 @@ packages:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
 
-  ai@6.0.149:
-    resolution: {integrity: sha512-3asRb/m3ZGH7H4+VTuTgj8eQYJZ9IJUmV0ljLslY92mQp6Zj+NVn4SmFj0TBr2Y/wFBWC3xgn++47tSGOXxdbw==}
+  ai@6.0.154:
+    resolution: {integrity: sha512-HfKJKCTJsDZxqrIUDSVnBQ7DpQlx5WI4ExqtLd7Bl70epLmvkpc/HYMzU1hP9W+g9VEAcvZo4fbMqc3v5D+9gQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
+  ai@6.0.161:
+    resolution: {integrity: sha512-ufhmijmx2YyWTPAicGgtpLOB/xD7mG8zKs1pT1Trj+JL/3r1rS8fkMi/cHZoChSAQSGB4pgmcWVxDrVTUvK2IQ==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
@@ -4621,6 +4695,20 @@ packages:
   colortranslator@5.0.0:
     resolution: {integrity: sha512-Z3UPUKasUVDFCDYAjP2fmlVRf1jFHJv1izAmPjiOa0OCIw1W7iC8PZ2GsoDa8uZv+mKyWopxxStT9q05+27h7w==}
 
+  comark@0.2.1:
+    resolution: {integrity: sha512-DBc24O/utr7p0TPqxZwm7fsZPmA+2y3ZOrOaXF9Wk3YhETzz7lzN294epUjGEEXkPOxOs8G8RZOPbLCg3bY0Ag==}
+    peerDependencies:
+      beautiful-mermaid: ^1.1.3
+      katex: ^0.16.33
+      shiki: ^4.0.0
+    peerDependenciesMeta:
+      beautiful-mermaid:
+        optional: true
+      katex:
+        optional: true
+      shiki:
+        optional: true
+
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
@@ -5136,16 +5224,32 @@ packages:
   dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
 
+  dom-serializer@3.0.0:
+    resolution: {integrity: sha512-x+9D6nkC8tdXOQUS32egtZpZFLP90+HBZmWjuT920srbJvD/zPgFB9t4k3pEhlw5BQrXStQtRc1Y1zuriXk+Nw==}
+    engines: {node: '>=20.19.0'}
+
   domelementtype@2.3.0:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
 
+  domelementtype@3.0.0:
+    resolution: {integrity: sha512-umCQid3jKbDmVjx8jGaW7uUykm4DEUeyV21hPxNMo2nV955DhUThwqyOIDtreepP31hl84X7G5U9ZfsWvIB3Pg==}
+    engines: {node: '>=20.19.0'}
+
   domhandler@5.0.3:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
+  domhandler@6.0.1:
+    resolution: {integrity: sha512-gYzvtM72ZtxQO0T048kd6HWSbbGCNOUwcnfQ01cqIJ4X2IYKFFHZ5mKvrQETcFXxsRObZulDaKmy//R7TPtsBg==}
+    engines: {node: '>=20.19.0'}
+
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
+  domutils@4.0.2:
+    resolution: {integrity: sha512-qI4JLRKnSzqFqr7hAlS5xQDusBCjKSEG4t4+7aNrIQMHBcsC2TGEhuyABJdYkgSewL57PNLYEiibY2iPKhKpaA==}
+    engines: {node: '>=20.19.0'}
+
   dot-prop@10.1.0:
     resolution: {integrity: sha512-MVUtAugQMOff5RnBy2d9N31iG0lNwg1qAoAOn7pOK5wf94WIaE3My2p3uwTQuvS2AcqchkcR3bHByjaM0mmi7Q==}
     engines: {node: '>=20'}
@@ -5393,6 +5497,10 @@ packages:
     resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
     engines: {node: '>=0.12'}
 
+  entities@8.0.0:
+    resolution: {integrity: sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==}
+    engines: {node: '>=20.19.0'}
+
   env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
@@ -5643,6 +5751,59 @@ packages:
     resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
     engines: {node: '>=18.0.0'}
 
+  evlog@2.12.0:
+    resolution: {integrity: sha512-uCnpBZlrjf51Evz+jTkydviq0QxiwPz4yGDmTjTKePelsIcbCiS0adPd5s26ZPf4tAf97HtWoYdlKd0JhydIkg==}
+    peerDependencies:
+      '@nestjs/common': '>=11.1.18'
+      '@nuxt/kit': ^4.4.2
+      '@tanstack/start-client-core': ^1.167.9
+      ai: '>=6.0.154'
+      elysia: '>=1.4.28'
+      express: '>=5.2.1'
+      fastify: '>=5.8.4'
+      h3: ^1.15.11
+      hono: ''
+      next: '>=16.2.3'
+      nitro: ^3.0.260311-beta
+      nitropack: ^2.13.3
+      ofetch: ^1.5.1
+      react: '>=19.2.5'
+      react-router: '>=7.14.0'
+      vite: ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      '@nestjs/common':
+        optional: true
+      '@nuxt/kit':
+        optional: true
+      '@tanstack/start-client-core':
+        optional: true
+      ai:
+        optional: true
+      elysia:
+        optional: true
+      express:
+        optional: true
+      fastify:
+        optional: true
+      h3:
+        optional: true
+      hono:
+        optional: true
+      next:
+        optional: true
+      nitro:
+        optional: true
+      nitropack:
+        optional: true
+      ofetch:
+        optional: true
+      react:
+        optional: true
+      react-router:
+        optional: true
+      vite:
+        optional: true
+
   execa@8.0.1:
     resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
     engines: {node: '>=16.17'}
@@ -6186,6 +6347,10 @@ packages:
   html-whitespace-sensitive-tag-names@3.0.1:
     resolution: {integrity: sha512-q+310vW8zmymYHALr1da4HyXUQ0zgiIwIicEfotYPWGN0OJVEN/58IJ3A4GBYcEq3LGAZqKb+ugvP0GNB9CEAA==}
 
+  htmlparser2@12.0.0:
+    resolution: {integrity: sha512-Tz7u1i95/g2x2jz81+x0FBVhBhY5aRTvD3tXXdFaljuNdzDLJ8UGNRrTcj2cgQvAg3iW/h77Fz15nLW0L0CrZw==}
+    engines: {node: '>=20.19.0'}
+
   http-errors@2.0.1:
     resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
     engines: {node: '>= 0.8'}
@@ -6811,6 +6976,9 @@ packages:
   maplibre-gl@2.4.0:
     resolution: {integrity: sha512-csNFylzntPmHWidczfgCZpvbTSmhaWvLRj9e1ezUDBEPizGgshgm3ea1T5TCNEEBq0roauu7BPuRZjA3wO4KqA==}
 
+  markdown-exit@1.0.0-beta.9:
+    resolution: {integrity: sha512-5tzrMKMF367amyBly131vm6eGuWRL2DjBqWaFmPzPbLyuxP0XOmyyyroOAIXuBAMF/3kZbbfqOxvW/SotqKqbQ==}
+
   markdown-it@14.1.1:
     resolution: {integrity: sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==}
     hasBin: true
@@ -8251,6 +8419,29 @@ packages:
     engines: {node: '>= 0.10'}
     hasBin: true
 
+  shaders@2.5.93:
+    resolution: {integrity: sha512-ZM41grBXeWzmG/yGCr5IKWxnvEUya/zpxcLstHmqs4kB150vkLg0getvgO0uF0pjppddyCwGJt22Y4v3MogkTg==}
+    peerDependencies:
+      pixi.js: ^8.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+      solid-js: ^1.8.0
+      svelte: ^5
+      vue: ^3.5.0
+    peerDependenciesMeta:
+      pixi.js:
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      solid-js:
+        optional: true
+      svelte:
+        optional: true
+      vue:
+        optional: true
+
   sharp@0.34.5:
     resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -8540,6 +8731,11 @@ packages:
   svix@1.88.0:
     resolution: {integrity: sha512-vm/JrrUd3bVyBE+3L33TIyVSs8gS5fYx7lrISvKlDJXTYX1ACH4REX8P1tHxsSKoZi/rvifM1t0XRc5Vc45THw==}
 
+  swrv@1.2.0:
+    resolution: {integrity: sha512-lH/g4UcNyj+7lzK4eRGT4C68Q4EhQ6JtM9otPRIASfhhzfLWtbZPHcMuhuba7S9YVYuxkMUGImwMyGpfbkH07A==}
+    peerDependencies:
+      vue: '>=3.2.26 < 4'
+
   table@6.9.0:
     resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
     engines: {node: '>=10.0.0'}
@@ -8603,6 +8799,9 @@ packages:
   three@0.135.0:
     resolution: {integrity: sha512-kuEpuuxRzLv0MDsXai9huCxOSQPZ4vje6y0gn80SRmQvgz6/+rI0NAvCRAw56zYaWKMGMfqKWsxF9Qa2Z9xymQ==}
 
+  three@0.183.2:
+    resolution: {integrity: sha512-di3BsL2FEQ1PA7Hcvn4fyJOlxRRgFYBpMTcyOgkwJIaDOdJMebEFPA+t98EvjuljDx4hNulAGwF6KIjtwI5jgQ==}
+
   throttle-debounce@5.0.2:
     resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
     engines: {node: '>=12.22'}
@@ -9521,6 +9720,12 @@ snapshots:
       '@phc/format': 1.0.0
       '@poppinss/utils': 6.10.1
 
+  '@ai-sdk/anthropic@3.0.68(zod@4.3.6)':
+    dependencies:
+      '@ai-sdk/provider': 3.0.8
+      '@ai-sdk/provider-utils': 4.0.23(zod@4.3.6)
+      zod: 4.3.6
+
   '@ai-sdk/gateway@3.0.91(zod@4.3.6)':
     dependencies:
       '@ai-sdk/provider': 3.0.8
@@ -9528,6 +9733,20 @@ snapshots:
       '@vercel/oidc': 3.1.0
       zod: 4.3.6
 
+  '@ai-sdk/gateway@3.0.94(zod@4.3.6)':
+    dependencies:
+      '@ai-sdk/provider': 3.0.8
+      '@ai-sdk/provider-utils': 4.0.23(zod@4.3.6)
+      '@vercel/oidc': 3.1.0
+      zod: 4.3.6
+
+  '@ai-sdk/gateway@3.0.98(zod@4.3.6)':
+    dependencies:
+      '@ai-sdk/provider': 3.0.8
+      '@ai-sdk/provider-utils': 4.0.23(zod@4.3.6)
+      '@vercel/oidc': 3.1.0
+      zod: 4.3.6
+
   '@ai-sdk/mcp@1.0.35(zod@4.3.6)':
     dependencies:
       '@ai-sdk/provider': 3.0.8
@@ -9546,6 +9765,15 @@ snapshots:
     dependencies:
       json-schema: 0.4.0
 
+  '@ai-sdk/vue@3.0.154(vue@3.5.32(typescript@6.0.2))(zod@4.3.6)':
+    dependencies:
+      '@ai-sdk/provider-utils': 4.0.23(zod@4.3.6)
+      ai: 6.0.154(zod@4.3.6)
+      swrv: 1.2.0(vue@3.5.32(typescript@6.0.2))
+      vue: 3.5.32(typescript@6.0.2)
+    transitivePeerDependencies:
+      - zod
+
   '@alloc/quick-lru@5.2.0': {}
 
   '@antfu/install-pkg@1.1.0':
@@ -9775,6 +10003,37 @@ snapshots:
 
   '@colordx/core@5.0.3': {}
 
+  '@comark/markdown-it@0.3.3(@types/markdown-it@14.1.2)(markdown-it@14.1.1)':
+    dependencies:
+      '@types/markdown-it': 14.1.2
+      js-yaml: 4.1.1
+      markdown-it: 14.1.1
+
+  '@comark/nuxt@0.2.1(@types/markdown-it@14.1.2)(magicast@0.5.2)(markdown-it@14.1.1)(nuxt@4.4.2(445499489540052a4c2e3761b79c8923))(shiki@4.0.2)(vue@3.5.32(typescript@6.0.2))':
+    dependencies:
+      '@comark/vue': 0.2.1(@types/markdown-it@14.1.2)(markdown-it@14.1.1)(shiki@4.0.2)(vue@3.5.32(typescript@6.0.2))
+      '@nuxt/kit': 4.4.2(magicast@0.5.2)
+      comark: 0.2.1(@types/markdown-it@14.1.2)(markdown-it@14.1.1)(shiki@4.0.2)
+      nuxt: 4.4.2(445499489540052a4c2e3761b79c8923)
+    transitivePeerDependencies:
+      - '@types/markdown-it'
+      - beautiful-mermaid
+      - katex
+      - magicast
+      - markdown-it
+      - shiki
+      - vue
+
+  '@comark/vue@0.2.1(@types/markdown-it@14.1.2)(markdown-it@14.1.1)(shiki@4.0.2)(vue@3.5.32(typescript@6.0.2))':
+    dependencies:
+      comark: 0.2.1(@types/markdown-it@14.1.2)(markdown-it@14.1.1)(shiki@4.0.2)
+      vue: 3.5.32(typescript@6.0.2)
+    optionalDependencies:
+      shiki: 4.0.2
+    transitivePeerDependencies:
+      - '@types/markdown-it'
+      - markdown-it
+
   '@drizzle-team/brocli@0.10.2': {}
 
   '@dxup/nuxt@0.4.0(magicast@0.5.2)(typescript@6.0.2)':
@@ -13756,9 +14015,17 @@ snapshots:
 
   agent-base@7.1.4: {}
 
-  ai@6.0.149(zod@4.3.6):
+  ai@6.0.154(zod@4.3.6):
     dependencies:
-      '@ai-sdk/gateway': 3.0.91(zod@4.3.6)
+      '@ai-sdk/gateway': 3.0.94(zod@4.3.6)
+      '@ai-sdk/provider': 3.0.8
+      '@ai-sdk/provider-utils': 4.0.23(zod@4.3.6)
+      '@opentelemetry/api': 1.9.0
+      zod: 4.3.6
+
+  ai@6.0.161(zod@4.3.6):
+    dependencies:
+      '@ai-sdk/gateway': 3.0.98(zod@4.3.6)
       '@ai-sdk/provider': 3.0.8
       '@ai-sdk/provider-utils': 4.0.23(zod@4.3.6)
       '@opentelemetry/api': 1.9.0
@@ -14182,6 +14449,19 @@ snapshots:
 
   colortranslator@5.0.0: {}
 
+  comark@0.2.1(@types/markdown-it@14.1.2)(markdown-it@14.1.1)(shiki@4.0.2):
+    dependencies:
+      '@comark/markdown-it': 0.3.3(@types/markdown-it@14.1.2)(markdown-it@14.1.1)
+      entities: 8.0.0
+      htmlparser2: 12.0.0
+      js-yaml: 4.1.1
+      markdown-exit: 1.0.0-beta.9
+    optionalDependencies:
+      shiki: 4.0.2
+    transitivePeerDependencies:
+      - '@types/markdown-it'
+      - markdown-it
+
   comma-separated-tokens@2.0.3: {}
 
   commander@10.0.1: {}
@@ -14696,18 +14976,36 @@ snapshots:
       domhandler: 5.0.3
       entities: 4.5.0
 
+  dom-serializer@3.0.0:
+    dependencies:
+      domelementtype: 3.0.0
+      domhandler: 6.0.1
+      entities: 8.0.0
+
   domelementtype@2.3.0: {}
 
+  domelementtype@3.0.0: {}
+
   domhandler@5.0.3:
     dependencies:
       domelementtype: 2.3.0
 
+  domhandler@6.0.1:
+    dependencies:
+      domelementtype: 3.0.0
+
   domutils@3.2.2:
     dependencies:
       dom-serializer: 2.0.0
       domelementtype: 2.3.0
       domhandler: 5.0.3
 
+  domutils@4.0.2:
+    dependencies:
+      dom-serializer: 3.0.0
+      domelementtype: 3.0.0
+      domhandler: 6.0.1
+
   dot-prop@10.1.0:
     dependencies:
       type-fest: 5.5.0
@@ -14848,6 +15146,8 @@ snapshots:
 
   entities@7.0.1: {}
 
+  entities@8.0.0: {}
+
   env-paths@2.2.1: {}
 
   error-ex@1.3.4:
@@ -15184,7 +15484,7 @@ snapshots:
 
   etag@1.8.1: {}
 
-  evalite@1.0.0-beta.16(ai@6.0.149(zod@4.3.6))(better-sqlite3@12.8.0):
+  evalite@1.0.0-beta.16(ai@6.0.161(zod@4.3.6))(better-sqlite3@12.8.0):
     dependencies:
       '@fastify/static': 8.3.0
       '@fastify/websocket': 11.2.0
@@ -15201,7 +15501,7 @@ snapshots:
       table: 6.9.0
       tinyrainbow: 3.1.0
     optionalDependencies:
-      ai: 6.0.149(zod@4.3.6)
+      ai: 6.0.161(zod@4.3.6)
       better-sqlite3: 12.8.0
     transitivePeerDependencies:
       - bufferutil
@@ -15223,6 +15523,18 @@ snapshots:
     dependencies:
       eventsource-parser: 3.0.6
 
+  evlog@2.12.0(@nuxt/kit@4.4.2(magicast@0.5.2))(ai@6.0.161(zod@4.3.6))(express@5.2.1)(fastify@5.8.4)(h3@1.15.11)(hono@4.12.12)(nitropack@2.13.3(@libsql/client@0.17.2)(@vercel/functions@3.4.3)(better-sqlite3@12.8.0)(drizzle-orm@0.45.2(@cloudflare/workers-types@4.20260405.1)(@libsql/client@0.17.2)(@opentelemetry/api@1.9.0)(better-sqlite3@12.8.0))(rolldown@1.0.0-beta.57(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2))(srvx@0.11.15))(ofetch@1.5.1)(vite@7.3.2(@types/node@25.5.2)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)):
+    optionalDependencies:
+      '@nuxt/kit': 4.4.2(magicast@0.5.2)
+      ai: 6.0.161(zod@4.3.6)
+      express: 5.2.1
+      fastify: 5.8.4
+      h3: 1.15.11
+      hono: 4.12.12
+      nitropack: 2.13.3(@libsql/client@0.17.2)(@vercel/functions@3.4.3)(better-sqlite3@12.8.0)(drizzle-orm@0.45.2(@cloudflare/workers-types@4.20260405.1)(@libsql/client@0.17.2)(@opentelemetry/api@1.9.0)(better-sqlite3@12.8.0))(rolldown@1.0.0-beta.57(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2))(srvx@0.11.15)
+      ofetch: 1.5.1
+      vite: 7.3.2(@types/node@25.5.2)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3)
+
   execa@8.0.1:
     dependencies:
       cross-spawn: 7.0.6
@@ -15925,6 +16237,13 @@ snapshots:
 
   html-whitespace-sensitive-tag-names@3.0.1: {}
 
+  htmlparser2@12.0.0:
+    dependencies:
+      domelementtype: 3.0.0
+      domhandler: 6.0.1
+      domutils: 4.0.2
+      entities: 8.0.0
+
   http-errors@2.0.1:
     dependencies:
       depd: 2.0.0
@@ -16571,6 +16890,16 @@ snapshots:
       tinyqueue: 2.0.3
       vt-pbf: 3.1.3
 
+  markdown-exit@1.0.0-beta.9:
+    dependencies:
+      '@types/linkify-it': 5.0.0
+      '@types/mdurl': 2.0.0
+      entities: 7.0.1
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
   markdown-it@14.1.1:
     dependencies:
       argparse: 2.0.1
@@ -18788,6 +19117,12 @@ snapshots:
       safe-buffer: 5.2.1
       to-buffer: 1.2.2
 
+  shaders@2.5.93(vue@3.5.32(typescript@6.0.2)):
+    dependencies:
+      three: 0.183.2
+    optionalDependencies:
+      vue: 3.5.32(typescript@6.0.2)
+
   sharp@0.34.5:
     dependencies:
       '@img/colour': 1.1.0
@@ -19144,6 +19479,10 @@ snapshots:
       standardwebhooks: 1.0.0
       uuid: 10.0.0
 
+  swrv@1.2.0(vue@3.5.32(typescript@6.0.2)):
+    dependencies:
+      vue: 3.5.32(typescript@6.0.2)
+
   table@6.9.0:
     dependencies:
       ajv: 8.18.0
@@ -19238,6 +19577,8 @@ snapshots:
 
   three@0.135.0: {}
 
+  three@0.183.2: {}
+
   throttle-debounce@5.0.2: {}
 
   tiny-inflate@1.0.3: {}
diff --git a/public/nuxt-chat-og.jpg b/public/nuxt-chat-og.jpg
new file mode 100644
index 000000000..a43955c47
Binary files /dev/null and b/public/nuxt-chat-og.jpg differ
diff --git a/server/api/agent.post.ts b/server/api/agent.post.ts
new file mode 100644
index 000000000..95f379cb8
--- /dev/null
+++ b/server/api/agent.post.ts
@@ -0,0 +1,207 @@
+import { streamText, convertToModelMessages, createUIMessageStream, createUIMessageStreamResponse } from 'ai'
+import type { ToolSet } from 'ai'
+import { createMCPClient } from '@ai-sdk/mcp'
+import { anthropic } from '@ai-sdk/anthropic'
+import type { H3Event } from 'h3'
+import { createAILogger, createEvlogIntegration } from 'evlog/ai'
+import type { AILogger } from 'evlog/ai'
+import { sql } from 'drizzle-orm'
+import { showModuleTool } from '../utils/tools/show-module'
+import { createShowTemplateTool } from '../utils/tools/show-template'
+import { createShowBlogPostTool } from '../utils/tools/show-blog-post'
+import { createShowHostingTool } from '../utils/tools/show-hosting'
+import { openPlaygroundTool } from '../utils/tools/open-playground'
+
+const MCP_PATH = '/mcp'
+const MODEL = 'anthropic/claude-sonnet-4.6'
+const MAX_STEPS = 10
+
+function stopWhenResponseComplete({ steps }: { steps: { text?: string, toolCalls?: unknown[] }[] }): boolean {
+  const lastStep = steps.at(-1)
+  if (!lastStep) return false
+
+  const hasText = Boolean(lastStep.text && lastStep.text.trim().length > 0)
+  const hasNoToolCalls = !lastStep.toolCalls || lastStep.toolCalls.length === 0
+
+  if (hasText && hasNoToolCalls) return true
+
+  return steps.length >= MAX_STEPS
+}
+
+const systemPrompt = `You are **the Nuxt Agent**, Nuxt's documentation agent on nuxt.com. You help users navigate and understand the official documentation, blog, modules catalog, and related guides.
+
+**Your identity:**
+- Your full product name is **the Nuxt Agent** (you may also say **Nuxt Agent**). The site UI often shows **Agent** alone because context makes Nuxt obvious — in your written answers, still name yourself **the Nuxt Agent** / **Nuxt Agent** when you refer to the agent explicitly (e.g. "The Nuxt Agent can search the docs for…"). Otherwise describe what **Nuxt** provides.
+- You are not a generic chatbot.
+- Do not pretend to be a human. Avoid casual first person ("I think…", "my favorite…"). Prefer neutral, precise language about Nuxt and the docs.
+- Be confident and grounded in retrieved content and tools. Speak as a knowledgeable agent for this site, not as the documentation text itself.
+
+**Browsing context prefix \`[Page: …]\` (CRITICAL):**
+- User messages may start with \`[Page: /docs/…]\` (or similar). That is **only** which page the user had open in the browser — a **hint**, not a command to answer from that file.
+- **Do not** call \`get-page\` (or otherwise treat that path as the primary source) when the user's actual question is **clearly unrelated** to that page's topic. Example: they are on \`/docs/…/getting-started/introduction\` but ask how to add a database — skip reading that introduction page; use \`list-pages\` / search / the right doc paths instead.
+- **Do** read that page with \`get-page\` when the question is about that page's content, continues the same topic, or you need that section as a starting point.
+- Never tell the user the site is "about Docus" or misidentify the product based on a single unrelated page you read by mistake — the site is **Nuxt** documentation.
+- If you ignored the browsing path because it was irrelevant, answer from the right docs without apologizing at length for the mismatch.
+
+**Nuxt modules and package names (CRITICAL):**
+- Never invent npm package names. If you are not certain, call \`list-modules\`, \`get-module\`, or \`show_module\` and use the **exact** \`name\` from the tool result in prose and install commands.
+- **NuxtHub** (NuxtHub on nuxt.com / edge data): the Nuxt module is **\`@nuxthub/core\`**. There is **no** \`@nuxt/hub\` package — do not recommend or cite that name.
+- Prefer tool output over memory for any \`npm install\` or module name.
+
+**Tool usage (CRITICAL):**
+- You have tools: list-pages (discover pages), get-page (read a page), list-modules, get-module, show_module, show_template, show_blog_post, show_hosting, and open_playground
+- If you already know a doc path whose **topic** clearly matches the question, read it with \`get-page\` without listing first. This is **not** the same as the \`[Page: …]\` browsing prefix — see the section above.
+- ALWAYS respond with text after using tools - never end with just tool calls
+- When the user asks about installing or using a specific module, use the show_module tool to display a rich module card. Do NOT also call get-module for the same module — show_module already provides all the information needed. Only use get-module if you need to read the module's documentation page content
+- When the user asks about starter templates or scaffolding a project, use the show_template tool to display template cards. The tool accepts an array of template names/slugs so you can show multiple templates in one call. For vague requests (e.g. "show me templates"), show the official Nuxt UI templates first: ["nuxt-ui-dashboard", "nuxt-ui-saas", "nuxt-ui-landing", "nuxt-ui-chat", "nuxt-ui-docs", "nuxt-ui-portfolio"]. These are the official templates maintained by the Nuxt team. You can also include community templates after the official ones
+- When the user asks about blog posts, releases, or announcements, use the show_blog_post tool to display a rich blog post card
+- When the user asks about deploying or hosting a Nuxt app, use the show_hosting tool to display a hosting provider card with deploy guide
+- When it would help the user to try code live or see a working example, use the open_playground tool to generate a StackBlitz link
+
+**WEB SEARCH:**
+- You have access to a web search tool to find current, up-to-date information
+- Only use it when the user explicitly asks about recent events, real-time data, or current facts that go beyond the Nuxt documentation
+- Do NOT search proactively — rely on the documentation tools and your knowledge first
+- Cite your sources when providing information from web search results
+
+**Guidelines:**
+- If you can't find something, say "There is no documentation on that yet" or "Nuxt doesn't cover that topic yet"
+- Be concise, helpful, and direct
+
+**Links and exploration:**
+- Tool results include a \`url\` for each page — prefer markdown links \`[label](url)\` so users can open the doc in one click
+- When it helps, add extra links (related pages, "read more", side topics) — make the answer easy to dig into, not a wall of text
+- Stick to URLs from tool results (\`url\` / \`path\`) so links stay valid
+
+**FORMATTING RULES (CRITICAL):**
+- NEVER use markdown headings (#, ##, ###, etc.)
+- Use **bold text** for emphasis and section labels
+- Start responses with content directly, never with a heading
+- Use bullet points for lists
+- Keep code examples focused and minimal
+
+**Response style:**
+- Conversational but professional
+- "Here's how you can do that:" instead of "The documentation shows:"
+- "Nuxt supports TypeScript out of the box" — attribute capabilities to Nuxt, not to yourself as a person
+- Provide actionable guidance, not just information dumps`
+
+function computeEstimatedCost(state: AILogger['_state']): number {
+  if (!state.costMap) return 0
+  const model = state.models.at(-1)
+  if (!model) return 0
+  const cost = state.costMap[model]
+  if (!cost) return 0
+  return (state.usage.inputTokens * cost.input + state.usage.outputTokens * cost.output) / 1_000_000
+}
+
+async function getFingerprint(event: H3Event): Promise<string> {
+  const ip = event.context.cf?.ip || 'unknown'
+  const userAgent = getHeader(event, 'user-agent') || 'unknown'
+  const domain = getHeader(event, 'host') || 'localhost'
+  const data = `${domain}+${ip}+${userAgent}`
+  const buffer = await crypto.subtle.digest('SHA-1', new TextEncoder().encode(data))
+  return [...new Uint8Array(buffer)].map(b => b.toString(16).padStart(2, '0')).join('')
+}
+
+export default defineEventHandler(async (event) => {
+  await consumeAgentRateLimit(event)
+
+  const { messages } = await readBody(event)
+  const chatId = getHeader(event, 'x-chat-id')
+  const log = useLogger(event)
+  const ai = createAILogger(log, { toolInputs: true, cost: { 'claude-sonnet-4-6': { input: 3, output: 15 } } })
+
+  const abortController = new AbortController()
+  event.node.req.on('close', () => abortController.abort())
+
+  const mcpUrl = import.meta.dev
+    ? `http://localhost:3000${MCP_PATH}`
+    : `${getRequestURL(event).origin}${MCP_PATH}`
+
+  const httpClient = await createMCPClient({
+    transport: { type: 'http', url: mcpUrl }
+  })
+  const mcpTools = await httpClient.tools()
+
+  const closeMcp = () => event.waitUntil(httpClient.close())
+
+  const saveChat = async () => {
+    if (!chatId) return
+    const fingerprint = await getFingerprint(event)
+    const now = new Date()
+    const state = ai._state
+    const model = state.models.at(-1) ?? null
+    const provider = state.lastProvider ?? null
+    const { inputTokens, outputTokens } = state.usage
+    const estimatedCost = computeEstimatedCost(state)
+    const durationMs = state.totalDurationMs ?? 0
+
+    await db.insert(schema.agentChats).values({
+      id: chatId,
+      messages,
+      fingerprint,
+      model,
+      provider,
+      inputTokens,
+      outputTokens,
+      estimatedCost,
+      durationMs,
+      requestCount: 1,
+      createdAt: now,
+      updatedAt: now
+    }).onConflictDoUpdate({
+      target: schema.agentChats.id,
+      set: {
+        messages,
+        updatedAt: now,
+        model,
+        provider,
+        inputTokens: sql`${schema.agentChats.inputTokens} + ${inputTokens}`,
+        outputTokens: sql`${schema.agentChats.outputTokens} + ${outputTokens}`,
+        estimatedCost: sql`${schema.agentChats.estimatedCost} + ${estimatedCost}`,
+        durationMs: sql`${schema.agentChats.durationMs} + ${durationMs}`,
+        requestCount: sql`${schema.agentChats.requestCount} + 1`
+      }
+    })
+  }
+
+  const stream = createUIMessageStream({
+    execute: async ({ writer }) => {
+      const result = streamText({
+        model: ai.wrap(MODEL),
+        maxOutputTokens: 4000,
+        maxRetries: 2,
+        abortSignal: abortController.signal,
+        stopWhen: stopWhenResponseComplete,
+        system: systemPrompt,
+        messages: await convertToModelMessages(messages),
+        tools: {
+          ...mcpTools as ToolSet,
+          web_search: anthropic.tools.webSearch_20250305(),
+          show_module: showModuleTool,
+          show_template: createShowTemplateTool(event),
+          show_blog_post: createShowBlogPostTool(event),
+          show_hosting: createShowHostingTool(event),
+          open_playground: openPlaygroundTool
+        },
+        experimental_telemetry: {
+          isEnabled: true,
+          integrations: [createEvlogIntegration(ai)]
+        },
+        onFinish: () => {
+          closeMcp()
+          event.waitUntil(saveChat())
+        },
+        onAbort: closeMcp,
+        onError: closeMcp
+      })
+
+      writer.merge(result.toUIMessageStream({
+        sendSources: true
+      }))
+    }
+  })
+
+  return createUIMessageStreamResponse({ stream })
+})
diff --git a/server/api/agent/cleanup.delete.ts b/server/api/agent/cleanup.delete.ts
new file mode 100644
index 000000000..7eb3b9e4c
--- /dev/null
+++ b/server/api/agent/cleanup.delete.ts
@@ -0,0 +1,16 @@
+import { lt } from 'drizzle-orm'
+
+const RETENTION_DAYS = 30
+
+export default defineEventHandler(async (event) => {
+  await requireUserSession(event)
+
+  const threshold = new Date()
+  threshold.setDate(threshold.getDate() - RETENTION_DAYS)
+
+  const deleted = await db.delete(schema.agentChats)
+    .where(lt(schema.agentChats.updatedAt, threshold))
+    .returning({ id: schema.agentChats.id })
+
+  return { deleted: deleted.length, threshold: threshold.toISOString() }
+})
diff --git a/server/api/agent/usage.get.ts b/server/api/agent/usage.get.ts
new file mode 100644
index 000000000..b3fff191f
--- /dev/null
+++ b/server/api/agent/usage.get.ts
@@ -0,0 +1,3 @@
+export default defineEventHandler(async (event) => {
+  return checkAgentRateLimit(event)
+})
diff --git a/server/api/agent/vote.post.ts b/server/api/agent/vote.post.ts
new file mode 100644
index 000000000..200f44146
--- /dev/null
+++ b/server/api/agent/vote.post.ts
@@ -0,0 +1,32 @@
+import { z } from 'zod'
+
+const voteSchema = z.object({
+  chatId: z.string().min(1),
+  messageId: z.string().min(1),
+  isUpvoted: z.boolean().optional()
+})
+
+export default defineEventHandler(async (event) => {
+  const { chatId, messageId, isUpvoted } = await readValidatedBody(event, voteSchema.parse)
+
+  if (isUpvoted === undefined) {
+    await db.delete(schema.agentVotes).where(
+      and(
+        eq(schema.agentVotes.chatId, chatId),
+        eq(schema.agentVotes.messageId, messageId)
+      )
+    )
+  } else {
+    await db.insert(schema.agentVotes).values({
+      chatId,
+      messageId,
+      isUpvoted,
+      createdAt: new Date()
+    }).onConflictDoUpdate({
+      target: [schema.agentVotes.chatId, schema.agentVotes.messageId],
+      set: { isUpvoted }
+    })
+  }
+
+  return { chatId, messageId, isUpvoted }
+})
diff --git a/server/db/migrations/sqlite/0001_great_spot.sql b/server/db/migrations/sqlite/0001_great_spot.sql
new file mode 100644
index 000000000..1d88b72d3
--- /dev/null
+++ b/server/db/migrations/sqlite/0001_great_spot.sql
@@ -0,0 +1,24 @@
+CREATE TABLE `agent_chats` (
+	`id` text PRIMARY KEY NOT NULL,
+	`messages` text NOT NULL,
+	`fingerprint` text NOT NULL,
+	`model` text,
+	`provider` text,
+	`input_tokens` integer DEFAULT 0 NOT NULL,
+	`output_tokens` integer DEFAULT 0 NOT NULL,
+	`estimated_cost` real DEFAULT 0 NOT NULL,
+	`duration_ms` integer DEFAULT 0 NOT NULL,
+	`request_count` integer DEFAULT 0 NOT NULL,
+	`createdAt` integer NOT NULL,
+	`updatedAt` integer NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE `agent_votes` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`chat_id` text NOT NULL,
+	`message_id` text NOT NULL,
+	`is_upvoted` integer NOT NULL,
+	`createdAt` integer NOT NULL
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `agent_vote_chat_msg_idx` ON `agent_votes` (`chat_id`,`message_id`);
\ No newline at end of file
diff --git a/server/db/migrations/sqlite/meta/0001_snapshot.json b/server/db/migrations/sqlite/meta/0001_snapshot.json
new file mode 100644
index 000000000..4ae836d38
--- /dev/null
+++ b/server/db/migrations/sqlite/meta/0001_snapshot.json
@@ -0,0 +1,260 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "31933b0a-9c21-4fa2-9861-99db0e8ffcd1",
+  "prevId": "18f499b5-b447-4ec4-b175-6e8cce5b06ea",
+  "tables": {
+    "agent_chats": {
+      "name": "agent_chats",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "messages": {
+          "name": "messages",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "fingerprint": {
+          "name": "fingerprint",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "model": {
+          "name": "model",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "input_tokens": {
+          "name": "input_tokens",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "output_tokens": {
+          "name": "output_tokens",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "estimated_cost": {
+          "name": "estimated_cost",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "duration_ms": {
+          "name": "duration_ms",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "request_count": {
+          "name": "request_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "agent_votes": {
+      "name": "agent_votes",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "chat_id": {
+          "name": "chat_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "message_id": {
+          "name": "message_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_upvoted": {
+          "name": "is_upvoted",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "agent_vote_chat_msg_idx": {
+          "name": "agent_vote_chat_msg_idx",
+          "columns": [
+            "chat_id",
+            "message_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "feedback": {
+      "name": "feedback",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "rating": {
+          "name": "rating",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "feedback": {
+          "name": "feedback",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "path": {
+          "name": "path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "stem": {
+          "name": "stem",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "country": {
+          "name": "country",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "fingerprint": {
+          "name": "fingerprint",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "path_fingerprint_idx": {
+          "name": "path_fingerprint_idx",
+          "columns": [
+            "path",
+            "fingerprint"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}
\ No newline at end of file
diff --git a/server/db/migrations/sqlite/meta/_journal.json b/server/db/migrations/sqlite/meta/_journal.json
index 68c4ff89b..aaca3834e 100644
--- a/server/db/migrations/sqlite/meta/_journal.json
+++ b/server/db/migrations/sqlite/meta/_journal.json
@@ -8,6 +8,13 @@
       "when": 1762358790381,
       "tag": "0000_sudden_christian_walker",
       "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "6",
+      "when": 1776264773812,
+      "tag": "0001_great_spot",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/server/db/schema.ts b/server/db/schema.ts
index 375dd0f7a..9dbce6462 100644
--- a/server/db/schema.ts
+++ b/server/db/schema.ts
@@ -1,4 +1,4 @@
-import { sqliteTable, text, integer, uniqueIndex } from 'drizzle-orm/sqlite-core'
+import { sqliteTable, text, integer, real, uniqueIndex } from 'drizzle-orm/sqlite-core'
 
 export const feedback = sqliteTable('feedback', {
   id: integer('id').primaryKey({ autoIncrement: true }),
@@ -12,3 +12,26 @@ export const feedback = sqliteTable('feedback', {
   createdAt: integer({ mode: 'timestamp' }).notNull(),
   updatedAt: integer({ mode: 'timestamp' }).notNull()
 }, table => [uniqueIndex('path_fingerprint_idx').on(table.path, table.fingerprint)])
+
+export const agentChats = sqliteTable('agent_chats', {
+  id: text('id').primaryKey(),
+  messages: text('messages', { mode: 'json' }).notNull().$type<{ id: string, role: string, parts: unknown[] }[]>(),
+  fingerprint: text('fingerprint').notNull(),
+  model: text('model'),
+  provider: text('provider'),
+  inputTokens: integer('input_tokens').notNull().default(0),
+  outputTokens: integer('output_tokens').notNull().default(0),
+  estimatedCost: real('estimated_cost').notNull().default(0),
+  durationMs: integer('duration_ms').notNull().default(0),
+  requestCount: integer('request_count').notNull().default(0),
+  createdAt: integer({ mode: 'timestamp' }).notNull(),
+  updatedAt: integer({ mode: 'timestamp' }).notNull()
+})
+
+export const agentVotes = sqliteTable('agent_votes', {
+  id: integer('id').primaryKey({ autoIncrement: true }),
+  chatId: text('chat_id').notNull(),
+  messageId: text('message_id').notNull(),
+  isUpvoted: integer('is_upvoted', { mode: 'boolean' }).notNull(),
+  createdAt: integer({ mode: 'timestamp' }).notNull()
+}, table => [uniqueIndex('agent_vote_chat_msg_idx').on(table.chatId, table.messageId)])
diff --git a/server/utils/rate-limit.ts b/server/utils/rate-limit.ts
new file mode 100644
index 000000000..67d092dbc
--- /dev/null
+++ b/server/utils/rate-limit.ts
@@ -0,0 +1,40 @@
+import type { H3Event } from 'h3'
+import { kv } from 'hub:kv'
+
+const DAILY_LIMIT = 20
+const TTL_SECONDS = 86400
+
+function todayKey(ip: string): string {
+  const date = new Date().toISOString().slice(0, 10)
+  return `rate:agent:${ip}:${date}`
+}
+
+function resolveIP(event: H3Event): string {
+  return getRequestIP(event, { xForwardedFor: true }) || 'unknown'
+}
+
+export async function checkAgentRateLimit(event: H3Event): Promise<{ used: number, remaining: number, limit: number }> {
+  const ip = resolveIP(event)
+  const key = todayKey(ip)
+  const used = await kv.get<number>(key) || 0
+  const remaining = Math.max(0, DAILY_LIMIT - used)
+
+  return { used, remaining, limit: DAILY_LIMIT }
+}
+
+export async function consumeAgentRateLimit(event: H3Event): Promise<{ used: number, remaining: number, limit: number }> {
+  const ip = resolveIP(event)
+  const key = todayKey(ip)
+  const used = await kv.get<number>(key) || 0
+
+  if (used >= DAILY_LIMIT) {
+    throw createError({
+      statusCode: 429,
+      message: `You've reached the daily limit of ${DAILY_LIMIT} messages. Try again tomorrow.`
+    })
+  }
+
+  await kv.set(key, used + 1, { ttl: TTL_SECONDS })
+
+  return { used: used + 1, remaining: DAILY_LIMIT - used - 1, limit: DAILY_LIMIT }
+}
diff --git a/server/utils/tools/open-playground.ts b/server/utils/tools/open-playground.ts
new file mode 100644
index 000000000..a15b58307
--- /dev/null
+++ b/server/utils/tools/open-playground.ts
@@ -0,0 +1,26 @@
+import { tool } from 'ai'
+import { z } from 'zod'
+
+export const openPlaygroundTool = tool({
+  description: 'Generate a StackBlitz playground link for a Nuxt example or GitHub repository. Use when the user wants to try code live, see a working example, or experiment with a Nuxt feature in the browser.',
+  inputSchema: z.object({
+    repo: z.string().describe('GitHub repository in "owner/repo" format (e.g., "nuxt/starter", "nuxt-ui-templates/dashboard")'),
+    branch: z.string().default('main').describe('Branch name'),
+    dir: z.string().default('').describe('Subdirectory path within the repo'),
+    file: z.string().default('app.vue').describe('Default file to open'),
+    title: z.string().optional().describe('Display title for the playground')
+  }),
+  execute: async ({ repo, branch, dir, file, title }) => {
+    const dirPath = dir ? `/tree/${branch}/${dir}` : `/tree/${branch}`
+    const url = `https://stackblitz.com/github/${repo}${dirPath}?file=${file}`
+
+    return {
+      url,
+      repo,
+      branch,
+      dir,
+      file,
+      title: title || repo.split('/').pop() || repo
+    }
+  }
+})
diff --git a/server/utils/tools/show-blog-post.ts b/server/utils/tools/show-blog-post.ts
new file mode 100644
index 000000000..fd93be7ea
--- /dev/null
+++ b/server/utils/tools/show-blog-post.ts
@@ -0,0 +1,44 @@
+import { tool } from 'ai'
+import { z } from 'zod'
+import { queryCollection } from '@nuxt/content/server'
+import type { H3Event } from 'h3'
+
+export function createShowBlogPostTool(event: H3Event) {
+  return tool({
+    description: 'Display a rich blog post card with image, title, date, and author. Use when the user asks about Nuxt blog posts, release announcements, tutorials, or when referencing a specific blog article.',
+    inputSchema: z.object({
+      title: z.string().describe('The blog post title or search keyword (e.g., "v4", "Nuxt 3.15", "TypeScript")')
+    }),
+    execute: async ({ title }) => {
+      const posts = await queryCollection(event, 'blog')
+        .where('extension', '=', 'md')
+        .order('date', 'DESC')
+        .all()
+
+      const post = posts.find(p =>
+        p.path !== '/blog'
+        && (
+          p.title?.toLowerCase().includes(title.toLowerCase())
+          || p.path?.toLowerCase().includes(title.toLowerCase())
+        )
+      )
+
+      if (!post) {
+        return { error: `Blog post matching "${title}" not found` }
+      }
+
+      return {
+        title: post.title,
+        description: post.description,
+        path: post.path,
+        date: post.date,
+        image: post.image,
+        category: post.category,
+        authors: post.authors?.map(a => ({
+          name: a.name,
+          avatar: a.avatar?.src
+        }))
+      }
+    }
+  })
+}
diff --git a/server/utils/tools/show-hosting.ts b/server/utils/tools/show-hosting.ts
new file mode 100644
index 000000000..77449f0a9
--- /dev/null
+++ b/server/utils/tools/show-hosting.ts
@@ -0,0 +1,39 @@
+import { tool } from 'ai'
+import { z } from 'zod'
+import { queryCollection } from '@nuxt/content/server'
+import type { H3Event } from 'h3'
+
+export function createShowHostingTool(event: H3Event) {
+  return tool({
+    description: 'Display a hosting/deployment provider card with logo, description, and deploy links. Use when the user asks about deploying a Nuxt app, hosting options, or a specific provider (Vercel, Netlify, Cloudflare, etc.).',
+    inputSchema: z.object({
+      name: z.string().describe('The hosting provider name (e.g., "vercel", "netlify", "cloudflare")')
+    }),
+    execute: async ({ name }) => {
+      const providers = await queryCollection(event, 'deploy').all()
+      const provider = providers.find(p =>
+        p.path !== '/deploy'
+        && (
+          p.title?.toLowerCase() === name.toLowerCase()
+          || p.path?.endsWith(`/${name.toLowerCase()}`)
+          || p.title?.toLowerCase().includes(name.toLowerCase())
+        )
+      )
+
+      if (!provider) {
+        return { error: `Hosting provider "${name}" not found` }
+      }
+
+      return {
+        title: provider.title,
+        description: provider.description,
+        path: provider.path,
+        logoSrc: provider.logoSrc,
+        logoIcon: provider.logoIcon,
+        category: provider.category,
+        nitroPreset: provider.nitroPreset,
+        website: provider.website
+      }
+    }
+  })
+}
diff --git a/server/utils/tools/show-module.ts b/server/utils/tools/show-module.ts
new file mode 100644
index 000000000..c21887447
--- /dev/null
+++ b/server/utils/tools/show-module.ts
@@ -0,0 +1,74 @@
+import { tool } from 'ai'
+import { z } from 'zod'
+import type { UIToolInvocation } from 'ai'
+
+export type ShowModuleUIToolInvocation = UIToolInvocation<typeof showModuleTool>
+
+const MODULE_API = 'https://api.nuxt.com/modules'
+
+/** Try alternate slugs (e.g. NuxtHub → `hub`). */
+function slugCandidates(raw: string): string[] {
+  const t = raw.trim()
+  const lower = t.toLowerCase()
+  const hyphenated = lower.replace(/\s+/g, '-')
+  const set = new Set([t, lower, hyphenated])
+
+  if (lower === '@nuxthub/core' || (lower.endsWith('/core') && lower.includes('nuxthub'))) {
+    set.add('hub')
+  }
+  if (
+    ['nuxthub', 'nuxt-hub', 'nuxt hub'].includes(lower)
+    || (lower.includes('nuxt') && lower.includes('hub') && !lower.includes('devtools'))
+  ) {
+    set.add('hub')
+  }
+
+  return [...set].filter(Boolean)
+}
+
+async function fetchModule(slug: string): Promise<Record<string, unknown> | null> {
+  try {
+    const data = await $fetch<Record<string, unknown>>(`${MODULE_API}/${encodeURIComponent(slug)}`)
+    return data.error === true ? null : data
+  } catch {
+    return null
+  }
+}
+
+export const showModuleTool = tool({
+  description: 'Display a Nuxt module card with install command. Use this tool when the user asks about installing, using, or recommending a specific Nuxt module. The card shows the module icon, description, stats, and a copy-able install command. Prefer catalog slugs when known (e.g. "hub" for NuxtHub / @nuxthub/core, "pinia" for Pinia).',
+  inputSchema: z.object({
+    name: z.string().describe('Module slug (e.g. "pinia", "i18n", "hub" for NuxtHub)')
+  }),
+  execute: async ({ name }) => {
+    let data: Record<string, unknown> | null = null
+
+    for (const slug of slugCandidates(name)) {
+      data = await fetchModule(slug)
+      if (data) break
+    }
+
+    if (!data) {
+      return { error: `Module "${name}" not found` }
+    }
+
+    const catalogName = data.name
+    if (typeof catalogName !== 'string' || !catalogName.trim()) {
+      return { error: `Module "${name}" returned an invalid response` }
+    }
+
+    const stats = data.stats as Record<string, unknown> | undefined
+
+    return {
+      name: catalogName,
+      npm: data.npm as string,
+      description: data.description as string,
+      icon: data.icon as string,
+      category: data.category as string,
+      repo: data.repo as string,
+      website: data.website as string,
+      downloads: stats?.downloads as number | undefined,
+      stars: stats?.stars as number | undefined
+    }
+  }
+})
diff --git a/server/utils/tools/show-template.ts b/server/utils/tools/show-template.ts
new file mode 100644
index 000000000..e5c395172
--- /dev/null
+++ b/server/utils/tools/show-template.ts
@@ -0,0 +1,43 @@
+import { tool } from 'ai'
+import { z } from 'zod'
+import { queryCollection } from '@nuxt/content/server'
+import type { H3Event } from 'h3'
+
+export function createShowTemplateTool(event: H3Event) {
+  return tool({
+    description: 'Display one or more Nuxt starter template cards with preview image, description, and action buttons. Use when the user asks about starter templates, project scaffolding, or wants to create a new Nuxt project. Pass multiple names to show several templates at once.',
+    inputSchema: z.object({
+      names: z.array(z.string()).describe('Template names or slugs to display (e.g., ["ui", "content", "starter", "movies"])')
+    }),
+    execute: async ({ names }) => {
+      const allTemplates = await queryCollection(event, 'templates').all()
+
+      const results = names.map((name) => {
+        const template = allTemplates.find(t =>
+          t.slug === name
+          || t.name.toLowerCase() === name.toLowerCase()
+          || t.slug.includes(name.toLowerCase())
+          || t.name.toLowerCase().includes(name.toLowerCase())
+        )
+
+        if (!template) return null
+
+        return {
+          name: template.name,
+          slug: template.slug,
+          description: template.description,
+          repo: template.repo,
+          demo: template.demo,
+          badge: template.badge,
+          purchase: template.purchase
+        }
+      }).filter(Boolean)
+
+      if (!results.length) {
+        return { error: `No templates found matching: ${names.join(', ')}` }
+      }
+
+      return { templates: results }
+    }
+  })
+}