diff --git a/apps/docs/app/assets/css/main.css b/apps/docs/app/assets/css/main.css
index aa4db66..98714e0 100644
--- a/apps/docs/app/assets/css/main.css
+++ b/apps/docs/app/assets/css/main.css
@@ -1,6 +1,8 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
+@source "../../../";
+
 :root {
   --ui-radius: 0;
   --ui-bg: var(--color-white);
diff --git a/apps/docs/app/components/DocsAsideRightBottom.vue b/apps/docs/app/components/DocsAsideRightBottom.vue
index 1b8cd76..d14423c 100644
--- a/apps/docs/app/components/DocsAsideRightBottom.vue
+++ b/apps/docs/app/components/DocsAsideRightBottom.vue
@@ -3,6 +3,33 @@ const route = useRoute()
 
 const pageUrl = route.path
 const { open } = useAIChat()
+
+const faqQuestions = [
+  {
+    category: 'Getting Started',
+    items: [
+      'What is Nuxt MCP Toolkit?',
+      'How do I install the module?',
+      'How do I use the DevTools?',
+    ],
+  },
+  {
+    category: 'Core Features',
+    items: [
+      'How do I create a new MCP Tool?',
+      'How do I add an MCP Resource?',
+      'How do I configure Prompts?',
+    ],
+  },
+  {
+    category: 'Advanced',
+    items: [
+      'Can I expose my API routes as MCP Tools?',
+      'Does it support TypeScript?',
+      'How do I add a custom MCP server?',
+    ],
+  },
+]
 </script>
 
 <template>
@@ -16,6 +43,6 @@ const { open } = useAIChat()
       color="neutral"
       @click="open(`Explain the page ${pageUrl}`, true)"
     />
-    <AIChatSlideover />
+    <AiChatSlideover :faq-questions="faqQuestions" />
   </div>
 </template>
diff --git a/apps/docs/modules/ai-chat/README.md b/apps/docs/modules/ai-chat/README.md
new file mode 100644
index 0000000..3377c55
--- /dev/null
+++ b/apps/docs/modules/ai-chat/README.md
@@ -0,0 +1,161 @@
+# AI Chat Module
+
+A Nuxt module that provides an AI-powered chat interface using MCP (Model Context Protocol) tools.
+
+## Features
+
+- AI chat slideover component with streaming responses
+- MCP tools integration for documentation search
+- Syntax highlighting for code blocks
+- FAQ suggestions
+- Persistent chat state
+
+## Installation
+
+1. Copy the `modules/ai-chat` folder to your Nuxt project
+2. Install the required dependencies:
+
+```bash
+pnpm add @ai-sdk/mcp @ai-sdk/vue @ai-sdk/gateway ai motion-v shiki shiki-stream
+```
+
+3. Add the module to your `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['./modules/ai-chat'],
+
+  aiChat: {
+    apiPath: '/api/ai-chat',
+    mcpPath: '/mcp',
+    model: 'moonshotai/kimi-k2-turbo',
+  }
+})
+```
+
+## Usage
+
+Add the components to your app:
+
+```vue
+<template>
+  <div>
+    <!-- Button to open the chat -->
+    <AiChat tooltip-text="Ask AI a question" />
+
+    <!-- Chat slideover (place once in your app/layout) -->
+    <AiChatSlideover
+      title="Ask AI"
+      placeholder="Ask a question..."
+      :faq-questions="faqQuestions"
+    />
+  </div>
+</template>
+
+<script setup>
+const faqQuestions = [
+  {
+    category: 'Getting Started',
+    items: ['How do I install?', 'How do I configure?'],
+  },
+  {
+    category: 'Advanced',
+    items: ['How do I customize?'],
+  },
+]
+</script>
+```
+
+### Programmatic Control
+
+Use the `useAIChat` composable to control the chat:
+
+```vue
+<script setup>
+const { open, close, toggle, isOpen, messages, clearMessages } = useAIChat()
+
+// Open chat with an initial message
+open('How do I install the module?')
+
+// Open and clear previous messages
+open('New question', true)
+
+// Toggle chat visibility
+toggle()
+
+// Clear all messages
+clearMessages()
+</script>
+```
+
+## Module Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `apiPath` | `string` | `/api/ai-chat` | API endpoint path for the chat |
+| `mcpPath` | `string` | `/mcp` | MCP server path to connect to |
+| `model` | `string` | `moonshotai/kimi-k2-turbo` | AI model identifier for AI SDK Gateway |
+
+## Component Props
+
+### `<AiChat>`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tooltipText` | `string` | `Ask AI a question` | Tooltip text on hover |
+
+### `<AiChatSlideover>`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | `Ask AI` | Title displayed in the header |
+| `placeholder` | `string` | `Ask a question...` | Input placeholder text |
+| `faqQuestions` | `FaqCategory[]` | `undefined` | FAQ categories to display when chat is empty |
+
+#### FaqCategory Type
+
+```ts
+interface FaqCategory {
+  category: string
+  items: string[]
+}
+```
+
+## Requirements
+
+- Nuxt 4.x
+- Nuxt UI 3.x (for `USlideover`, `UButton`, `UTextarea`, `UChatMessages`, etc.)
+- An MCP server running (path configurable via `mcpPath`)
+- AI SDK Gateway Key
+
+## Components
+
+- `AiChat` - Button to toggle the chat slideover
+- `AiChatSlideover` - Main chat interface
+- `AiChatToolCall` - Displays MCP tool invocations
+- `AiChatPreStream` - Code block with streaming syntax highlighting
+
+## Customization
+
+### System Prompt
+
+To customize the AI's behavior, edit the system prompt in:
+`runtime/server/api/search.ts`
+
+### Styling
+
+The components use Nuxt UI and Tailwind CSS design tokens. Customize the appearance by modifying the component files or overriding the UI props.
+
+## Dependencies
+
+```json
+{
+  "@ai-sdk/mcp": "^0.0.8",
+  "@ai-sdk/vue": "3.0.0-beta.105",
+  "@ai-sdk/gateway": "^1.0.0",
+  "ai": "6.0.0-beta.105",
+  "motion-v": "^1.7.4",
+  "shiki": "^3.0.0",
+  "shiki-stream": "^0.1.2"
+}
+```
diff --git a/apps/docs/modules/ai-chat/index.ts b/apps/docs/modules/ai-chat/index.ts
new file mode 100644
index 0000000..0fbae04
--- /dev/null
+++ b/apps/docs/modules/ai-chat/index.ts
@@ -0,0 +1,86 @@
+import { addComponent, addImports, addServerHandler, createResolver, defineNuxtModule } from '@nuxt/kit'
+
+export interface AiChatModuleOptions {
+  /**
+   * API endpoint path for the chat
+   * @default '/api/ai-chat'
+   */
+  apiPath?: string
+  /**
+   * MCP server path to connect to
+   * @default '/mcp'
+   */
+  mcpPath?: string
+  /**
+   * AI model to use via AI SDK Gateway
+   * @default 'moonshotai/kimi-k2-turbo'
+   */
+  model?: string
+}
+
+export default defineNuxtModule<AiChatModuleOptions>({
+  meta: {
+    name: 'ai-chat',
+    configKey: 'aiChat',
+  },
+  defaults: {
+    apiPath: '/api/ai-chat',
+    mcpPath: '/mcp',
+    model: '  moonshotai/kimi-k2-turbo',
+  },
+  setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url)
+
+    nuxt.options.runtimeConfig.public.aiChat = {
+      apiPath: options.apiPath!,
+    }
+    nuxt.options.runtimeConfig.aiChat = {
+      mcpPath: options.mcpPath!,
+      model: options.model!,
+    }
+
+    addComponent({
+      name: 'AiChat',
+      filePath: resolve('./runtime/components/AiChat.vue'),
+    })
+    addComponent({
+      name: 'AiChatSlideover',
+      filePath: resolve('./runtime/components/AiChatSlideover.vue'),
+    })
+    addComponent({
+      name: 'AiChatToolCall',
+      filePath: resolve('./runtime/components/AiChatToolCall.vue'),
+    })
+
+    addImports([
+      {
+        name: 'useAIChat',
+        from: resolve('./runtime/composables/useAIChat'),
+      },
+      {
+        name: 'useHighlighter',
+        from: resolve('./runtime/composables/useHighlighter'),
+      },
+    ])
+
+    const routePath = options.apiPath!.replace(/^\//, '')
+    addServerHandler({
+      route: `/${routePath}`,
+      handler: resolve('./runtime/server/api/search'),
+    })
+  },
+})
+
+declare module 'nuxt/schema' {
+  interface PublicRuntimeConfig {
+    aiChat: {
+      apiPath: string
+    }
+  }
+  interface RuntimeConfig {
+    aiChat: {
+      mcpPath: string
+      model: string
+    }
+  }
+}
diff --git a/apps/docs/app/components/AiChat.vue b/apps/docs/modules/ai-chat/runtime/components/AiChat.vue
similarity index 63%
rename from apps/docs/app/components/AiChat.vue
rename to apps/docs/modules/ai-chat/runtime/components/AiChat.vue
index 9c2ffbd..df63a08 100644
--- a/apps/docs/app/components/AiChat.vue
+++ b/apps/docs/modules/ai-chat/runtime/components/AiChat.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
+withDefaults(defineProps<{
+  tooltipText?: string
+}>(), {
+  tooltipText: 'Ask AI a question',
+})
+
 const { toggle } = useAIChat()
 </script>
 
 <template>
-  <UTooltip text="Ask AI a question">
+  <UTooltip :text="tooltipText">
     <UButton
       icon="i-lucide-sparkles"
       variant="ghost"
diff --git a/apps/docs/app/components/prose/PreStream.vue b/apps/docs/modules/ai-chat/runtime/components/AiChatPreStream.vue
similarity index 100%
rename from apps/docs/app/components/prose/PreStream.vue
rename to apps/docs/modules/ai-chat/runtime/components/AiChatPreStream.vue
diff --git a/apps/docs/app/components/AIChatSlideover.vue b/apps/docs/modules/ai-chat/runtime/components/AiChatSlideover.vue
similarity index 88%
rename from apps/docs/app/components/AIChatSlideover.vue
rename to apps/docs/modules/ai-chat/runtime/components/AiChatSlideover.vue
index d8395b5..4605ab8 100644
--- a/apps/docs/app/components/AIChatSlideover.vue
+++ b/apps/docs/modules/ai-chat/runtime/components/AiChatSlideover.vue
@@ -2,13 +2,28 @@
 import type { DefineComponent } from 'vue'
 import { Chat } from '@ai-sdk/vue'
 import { DefaultChatTransport } from 'ai'
-import ProseStreamPre from './prose/PreStream.vue'
+import AiChatPreStream from './AiChatPreStream.vue'
+
+export interface FaqCategory {
+  category: string
+  items: string[]
+}
+
+const props = withDefaults(defineProps<{
+  title?: string
+  placeholder?: string
+  faqQuestions?: FaqCategory[]
+}>(), {
+  title: 'Ask AI',
+  placeholder: 'Ask a question...',
+})
 
 const components = {
-  pre: ProseStreamPre as unknown as DefineComponent,
+  pre: AiChatPreStream as unknown as DefineComponent,
 }
 
 const { isOpen, messages, pendingMessage, clearPending } = useAIChat()
+const config = useRuntimeConfig()
 
 const input = ref('')
 
@@ -30,33 +45,6 @@ watch(messages, (newMessages) => {
   }
 }, { deep: true })
 
-const faqQuestions = [
-  {
-    category: 'Getting Started',
-    items: [
-      'What is Nuxt MCP Toolkit?',
-      'How do I install the module?',
-      'How do I use the DevTools?',
-    ],
-  },
-  {
-    category: 'Core Features',
-    items: [
-      'How do I create a new MCP Tool?',
-      'How do I add an MCP Resource?',
-      'How do I configure Prompts?',
-    ],
-  },
-  {
-    category: 'Advanced',
-    items: [
-      'Can I expose my API routes as MCP Tools?',
-      'Does it support TypeScript?',
-      'How do I add a custom MCP server?',
-    ],
-  },
-]
-
 const toast = useToast()
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -76,7 +64,7 @@ function getToolLabel(toolName: string, args: any) {
 const chat = new Chat({
   messages: messages.value,
   transport: new DefaultChatTransport({
-    api: '/api/search',
+    api: config.public.aiChat.apiPath,
   }),
   onError: (error: Error) => {
     const { message } = typeof error.message === 'string' && error.message[0] === '{' ? JSON.parse(error.message) : error
@@ -153,7 +141,7 @@ onMounted(() => {
               class="size-3.5 text-primary"
             />
           </div>
-          <span class="font-medium text-highlighted">Ask AI</span>
+          <span class="font-medium text-highlighted">{{ props.title }}</span>
         </div>
         <div class="flex items-center gap-1">
           <UTooltip
@@ -209,7 +197,7 @@ onMounted(() => {
                 class="*:first:mt-0 *:last:mb-0"
               />
 
-              <ChatToolCall
+              <AiChatToolCall
                 v-else-if="part.type === 'tool-invocation' || part.type === 'dynamic-tool'"
                 :text="getToolLabel((part as any).toolName, (part as any).args || (part as any).input)"
                 :is-loading="(part as any).state !== 'output-available'"
@@ -229,7 +217,7 @@ onMounted(() => {
 
         <div class="flex flex-col gap-5">
           <div
-            v-for="category in faqQuestions"
+            v-for="category in props.faqQuestions"
             :key="category.category"
             class="flex flex-col gap-1.5"
           >
@@ -259,7 +247,7 @@ onMounted(() => {
             :rows="1"
             autoresize
             variant="none"
-            placeholder="Ask me a question about Nuxt MCP..."
+            :placeholder="props.placeholder"
             class="flex-1 text-sm bg-transparent resize-none"
             :ui="{
               base: 'bg-transparent! ring-0! shadow-none!',
diff --git a/apps/docs/app/components/chat/ToolCall.vue b/apps/docs/modules/ai-chat/runtime/components/AiChatToolCall.vue
similarity index 100%
rename from apps/docs/app/components/chat/ToolCall.vue
rename to apps/docs/modules/ai-chat/runtime/components/AiChatToolCall.vue
diff --git a/apps/docs/app/composables/useAIChat.ts b/apps/docs/modules/ai-chat/runtime/composables/useAIChat.ts
similarity index 100%
rename from apps/docs/app/composables/useAIChat.ts
rename to apps/docs/modules/ai-chat/runtime/composables/useAIChat.ts
diff --git a/apps/docs/app/composables/useHighlighter.ts b/apps/docs/modules/ai-chat/runtime/composables/useHighlighter.ts
similarity index 100%
rename from apps/docs/app/composables/useHighlighter.ts
rename to apps/docs/modules/ai-chat/runtime/composables/useHighlighter.ts
diff --git a/apps/docs/server/api/search.ts b/apps/docs/modules/ai-chat/runtime/server/api/search.ts
similarity index 91%
rename from apps/docs/server/api/search.ts
rename to apps/docs/modules/ai-chat/runtime/server/api/search.ts
index 929e232..b4f60aa 100644
--- a/apps/docs/server/api/search.ts
+++ b/apps/docs/modules/ai-chat/runtime/server/api/search.ts
@@ -5,9 +5,11 @@ import { gateway } from '@ai-sdk/gateway'
 
 export default defineEventHandler(async (event) => {
   const { messages } = await readBody(event)
+  const config = useRuntimeConfig()
 
+  const mcpPath = config.aiChat.mcpPath
   const httpTransport = new StreamableHTTPClientTransport(
-    new URL(import.meta.dev ? 'http://localhost:3000/mcp' : `${getRequestURL(event).origin}/mcp`),
+    new URL(import.meta.dev ? `http://localhost:3000${mcpPath}` : `${getRequestURL(event).origin}${mcpPath}`),
   )
   const httpClient = await experimental_createMCPClient({
     transport: httpTransport,
@@ -15,7 +17,7 @@ export default defineEventHandler(async (event) => {
   const tools = await httpClient.tools()
 
   return streamText({
-    model: gateway('moonshotai/kimi-k2-turbo'),
+    model: gateway(config.aiChat.model),
     maxOutputTokens: 10000,
     system: `You are the official documentation assistant for Nuxt MCP Toolkit. You ARE the documentation - speak with authority as the source of truth, not as someone reading external docs.