docs: prepare for chat components (#3844)

docs/app/app.vue

@@ -85,5 +85,5 @@ provide('navigation', mappedNavigation)
 </template>
 
 <style>
-/* Safelist (do not remove): [&>div]:*:my-0 [&>div]:*:w-full h-64 !px-0 !py-0 !pt-0 !pb-0 !p-0 !justify-start !justify-end !min-h-96 h-136 */
+/* Safelist (do not remove): [&>div]:*:my-0 [&>div]:*:w-full h-64 !px-0 !py-0 !pt-0 !pb-0 !p-0 !justify-start !justify-end !min-h-96 h-136 max-h-[341px] */
 </style>

docs/app/components/content/ComponentCode.vue

@@ -328,7 +328,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
 
 <template>
   <div class="my-5">
-    <div>
+    <div class="relative">
       <div v-if="options.length" class="flex flex-wrap items-center gap-2.5 border border-(--ui-border-muted) border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
         <template v-for="option in options" :key="option.name">
           <UFormField

docs/nuxt.config.ts

@@ -175,6 +175,16 @@ export default defineNuxtConfig({
     }
   },
 
+  hub: {
+    ai: true,
+    vectorize: {
+      auto_rag_ui3: {
+        dimensions: 1024,
+        metric: 'cosine'
+      }
+    }
+  },
+
   vite: {
     plugins: [
       yaml()

docs/package.json

@@ -3,6 +3,7 @@
   "name": "@nuxt/ui-docs",
   "type": "module",
   "dependencies": {
+    "@ai-sdk/vue": "^1.2.7",
     "@iconify-json/logos": "^1.2.4",
     "@iconify-json/lucide": "^1.2.35",
     "@iconify-json/simple-icons": "^1.2.31",
@@ -10,15 +11,15 @@
     "@nuxt/content": "^3.4.0",
     "@nuxt/image": "^1.10.0",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@63da8be",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@6b838c4",
     "@nuxthub/core": "^0.8.23",
     "@nuxtjs/plausible": "^1.2.0",
     "@octokit/rest": "^21.1.1",
     "@rollup/plugin-yaml": "^4.1.2",
-    "@vueuse/nuxt": "^13.1.0",
-    "capture-website": "^4.2.0",
     "@vueuse/integrations": "^13.1.0",
-    "sortablejs": "^1.15.6",
+    "@vueuse/nuxt": "^13.1.0",
+    "ai": "^4.3.4",
+    "capture-website": "^4.2.0",
     "joi": "^17.13.3",
     "motion-v": "0.13.1",
     "nuxt": "^3.16.2",
@@ -27,9 +28,11 @@
     "nuxt-og-image": "^5.1.1",
     "prettier": "^3.5.3",
     "shiki-transformer-color-highlight": "^1.0.0",
+    "sortablejs": "^1.15.6",
     "superstruct": "^2.0.2",
     "ufo": "^1.6.1",
     "valibot": "^1.0.0",
+    "workers-ai-provider": "^0.3.0",
     "yup": "^1.6.1",
     "zod": "^3.24.2"
   },

docs/server/api/chat.ts

@@ -0,0 +1,22 @@
+import { streamText } from 'ai'
+import { createWorkersAI } from 'workers-ai-provider'
+
+export default defineEventHandler(async (event) => {
+  const { messages } = await readBody(event)
+
+  // Enable AI Gateway if defined in environment variables
+  const gateway = process.env.CLOUDFLARE_AI_GATEWAY_ID
+    ? {
+        id: process.env.CLOUDFLARE_AI_GATEWAY_ID,
+        cacheTtl: 60 * 60 * 24 // 24 hours
+      }
+    : undefined
+  const workersAI = createWorkersAI({ binding: hubAI(), gateway })
+
+  return streamText({
+    model: workersAI('@cf/meta/llama-3.2-3b-instruct'),
+    maxTokens: 10000,
+    system: 'You are a helpful assistant that can answer questions and help.',
+    messages
+  }).toDataStreamResponse()
+})