diff --git a/docs/app/components/content/AIContentWidget.vue b/docs/app/components/content/AIContentWidget.vue
new file mode 100644
index 0000000000..3ce6a78ad4
--- /dev/null
+++ b/docs/app/components/content/AIContentWidget.vue
@@ -0,0 +1,226 @@
+<script lang="ts">
+export interface AIConfig {
+  /** Placeholder text for the AI prompt input */
+  placeholder?: string
+  /** Custom label for the button */
+  buttonLabel?: string
+}
+
+export interface AIContentWidgetProps {
+  /** The component name (e.g., 'accordion', 'page-card') */
+  componentName: string
+  /** AI configuration - true to enable with defaults, object to customize */
+  ai?: boolean | AIConfig
+}
+
+export interface AIContentWidgetEmits {
+  generated: [content: AIContentWidgetEmits]
+}
+</script>
+
+<script setup lang="ts">
+import { motion, AnimatePresence } from 'motion-v'
+import type { FormSubmitEvent } from '@nuxt/ui'
+import { z } from 'zod'
+
+const props = withDefaults(defineProps<AIContentWidgetProps>(), {
+  ai: false
+})
+
+const emit = defineEmits<{
+  generated: [content: AIContentWidgetEmits]
+}>()
+
+const SURFACE_WIDTH = 320
+const SURFACE_HEIGHT = 160
+
+const schema = z.object({
+  prompt: z.string()
+})
+
+type Schema = z.output<typeof schema>
+
+const open = ref(false)
+const state = reactive({
+  prompt: ''
+})
+
+const isGenerating = ref(false)
+const surfaceRef = ref<HTMLElement>()
+const textareaRef = ref<any>()
+
+function toggleSurface() {
+  if (open.value) {
+    closeSurface()
+  } else {
+    openSurface()
+  }
+}
+
+function openSurface() {
+  open.value = true
+  nextTick(() => {
+    if (textareaRef.value?.$el) {
+      textareaRef.value.$el.focus()
+    }
+  })
+}
+
+function closeSurface() {
+  open.value = false
+  state.prompt = ''
+  if (textareaRef.value?.$el) {
+    textareaRef.value.$el.blur()
+  }
+}
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  closeSurface()
+  try {
+    isGenerating.value = true
+    const result = await $fetch('/api/content-generation', {
+      method: 'POST',
+      body: {
+        prompt: event.data.prompt,
+        componentName: props.componentName
+      }
+    })
+
+    if (result) {
+      emit('generated', result)
+    }
+  } catch (error) {
+    console.error('AI generation error:', error)
+  } finally {
+    isGenerating.value = false
+  }
+}
+
+onClickOutside(surfaceRef, closeSurface)
+</script>
+
+<template>
+  <div v-if="ai" class="absolute top-0 right-0 z-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+    <UButton
+      color="neutral"
+      variant="link"
+      size="xs"
+      :disabled="isGenerating"
+      :loading="isGenerating"
+      class="bg-default rounded-br-none rounded-tl-none group/shimmer"
+      @click="toggleSurface"
+    >
+      <template #leading>
+        <div v-if="!isGenerating" class="text-muted duration-300 group-hover/shimmer:text-highlighted size-3">
+          <UIcon name="i-lucide-sparkles" />
+        </div>
+        <UIcon v-else name="i-lucide-loader-circle" class="animate-spin" />
+      </template>
+
+      <span class="relative z-10 transition-colors duration-300 text-muted">
+        {{ typeof ai === 'object' && ai.buttonLabel ? ai.buttonLabel : 'Generate with AI' }}
+        <span
+          class="absolute inset-0 bg-clip-text bg-inverted text-transparent opacity-0 group-hover/shimmer:opacity-100 group-hover/shimmer:animate-shimmer-once transition-opacity duration-200"
+          style="background-image:linear-gradient(90deg, transparent calc(50% - 40px), #12A594, #E93D82, #FFB224, transparent calc(50% + 40px));background-size:200% 100%;background-position:-50% center"
+        >
+          {{ typeof ai === 'object' && ai.buttonLabel ? ai.buttonLabel : 'Generate with AI' }}
+        </span>
+      </span>
+    </UButton>
+
+    <AnimatePresence>
+      <motion.div
+        v-if="open"
+        key="surface"
+        ref="surfaceRef"
+        class="absolute top-full right-0.5 bg-default border border-default shadow-2xl overflow-hidden z-50"
+        :initial="{
+          opacity: 0,
+          scale: 0.8,
+          width: 100,
+          height: 44,
+          borderRadius: '10px 0px 10px 10px'
+        }"
+        :animate="{
+          opacity: 1,
+          scale: 1,
+          width: SURFACE_WIDTH,
+          height: SURFACE_HEIGHT,
+          borderRadius: '10px 0px 10px 10px'
+        }"
+        :exit="{
+          opacity: 0,
+          scale: 0.8,
+          width: 100,
+          height: 44,
+          borderRadius: '10px 0px 10px 10px'
+        }"
+        :transition="{
+          type: 'spring' as const,
+          stiffness: 400,
+          damping: 30,
+          mass: 0.8
+        }"
+      >
+        <UForm
+          :state="state"
+          :schema="schema"
+          :validate-on="[]"
+          class="p-4 h-full flex flex-col gap-3"
+          @submit="onSubmit"
+        >
+          <motion.div
+            class="flex flex-col gap-3 h-full"
+            :initial="{ opacity: 0 }"
+            :animate="{ opacity: 1 }"
+            :exit="{ opacity: 0 }"
+            :transition="{ delay: 0.1 }"
+          >
+            <UFormField name="prompt">
+              <UTextarea
+                ref="textareaRef"
+                v-model="state.prompt"
+                required
+                autofocus
+                :placeholder="typeof ai === 'object' && ai.placeholder ? ai.placeholder : 'Describe the content you want to generate...'"
+                :rows="4"
+                class="resize-none size-full"
+                @keydown.escape="closeSurface"
+              />
+            </UFormField>
+
+            <div class="flex gap-2 justify-end">
+              <UButton
+                variant="outline"
+                label="Cancel"
+                size="xs"
+                @click="closeSurface"
+              />
+              <UButton
+                label="Submit"
+                size="xs"
+                type="submit"
+              />
+            </div>
+          </motion.div>
+        </UForm>
+      </motion.div>
+    </AnimatePresence>
+  </div>
+</template>
+
+<style>
+@keyframes shimmer {
+  0% {
+    background-position: 100%
+  }
+
+  to {
+    background-position: -50%
+  }
+}
+
+.group\/shimmer:hover .group-hover\/shimmer\:animate-shimmer-once {
+  animation: shimmer 0.8s ease-in-out forwards
+}
+</style>
diff --git a/docs/app/components/content/ComponentCode.vue b/docs/app/components/content/ComponentCode.vue
index 3cbbea09a7..9f6ab4a291 100644
--- a/docs/app/components/content/ComponentCode.vue
+++ b/docs/app/components/content/ComponentCode.vue
@@ -7,6 +7,7 @@ import { hash } from 'ohash'
 import { CalendarDate } from '@internationalized/date'
 import * as theme from '#build/ui'
 import { get, set } from '#ui/utils'
+import type { AIContentWidgetProps } from './AIContentWidget.vue'
 
 interface Cast {
   get: (args: any) => any
@@ -80,6 +81,10 @@ const props = defineProps<{
    * Whether to add overflow-hidden to wrapper
    */
   overflowHidden?: boolean
+  /**
+   * AI generation configuration - true to enable with defaults, object to customize
+   */
+  ai?: AIContentWidgetProps['ai']
 }>()
 
 const route = useRoute()
@@ -300,6 +305,21 @@ ${props.slots?.default}
   return code
 })
 
+function handleAIGenerated(generatedContent: any) {
+  try {
+    // Apply generated content to component props
+    Object.entries(generatedContent).forEach(([key, value]) => {
+      if (value !== undefined && value !== null) {
+        setComponentProp(key, value)
+      }
+    })
+
+    console.log('Applied generated content:', generatedContent)
+  } catch (error) {
+    console.error('Error applying generated content:', error)
+  }
+}
+
 const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props: componentProps, slots: props.slots, external: props.external, externalTypes: props.externalTypes, collapse: props.collapse })}`, async () => {
   if (!props.prettier) {
     return parseMarkdown(code.value)
@@ -322,7 +342,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
 </script>
 
 <template>
-  <div class="my-5" :style="{ '--ui-header-height': '4rem' }">
+  <div class="my-5 group" :style="{ '--ui-header-height': '4rem' }">
     <div class="relative">
       <div v-if="options.length" class="flex flex-wrap items-center gap-2.5 border border-muted border-b-0 relative rounded-t-md px-4 py-2.5 overflow-x-auto">
         <template v-for="option in options" :key="option.name">
@@ -373,6 +393,11 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
       </div>
 
       <div v-if="component" class="flex justify-center border border-b-0 border-muted relative p-4 z-[1]" :class="[!options.length && 'rounded-t-md', props.class, { 'overflow-hidden': props.overflowHidden }]">
+        <AIContentWidget
+          :component-name="name.replace('U', '').replace('Prose', '')"
+          :ai="props.ai"
+          @generated="handleAIGenerated"
+        />
         <component :is="component" v-bind="{ ...componentProps, ...componentEvents }">
           <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
             <slot :name="slot" mdc-unwrap="p">
diff --git a/docs/content/docs/2.components/accordion.md b/docs/content/docs/2.components/accordion.md
index bd3e4d42b7..6342fbc6c7 100644
--- a/docs/content/docs/2.components/accordion.md
+++ b/docs/content/docs/2.components/accordion.md
@@ -65,6 +65,7 @@ externalTypes:
   - AccordionItem[]
 hide:
   - class
+ai: true
 props:
   class: 'px-4'
   items:
diff --git a/docs/content/docs/2.components/alert.md b/docs/content/docs/2.components/alert.md
index f039cf6f7a..d8911139ab 100644
--- a/docs/content/docs/2.components/alert.md
+++ b/docs/content/docs/2.components/alert.md
@@ -15,6 +15,7 @@ Use the `title` prop to set the title of the Alert.
 
 ::component-code
 ---
+ai: true
 props:
   title: 'Heads up!'
 ---
diff --git a/docs/content/docs/2.components/select-menu.md b/docs/content/docs/2.components/select-menu.md
index 4032373253..02e3db82c8 100644
--- a/docs/content/docs/2.components/select-menu.md
+++ b/docs/content/docs/2.components/select-menu.md
@@ -60,6 +60,7 @@ ignore:
 external:
   - items
   - modelValue
+ai: true
 props:
   modelValue: 'Backlog'
   items:
diff --git a/docs/package.json b/docs/package.json
index 5d3184c251..685d6fe015 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -29,6 +29,7 @@
     "better-sqlite3": "^12.2.0",
     "capture-website": "^5.0.0",
     "joi": "^18.0.1",
+    "json-schema-to-zod": "^2.6.1",
     "maska": "^3.2.0",
     "motion-v": "^1.7.1",
     "nuxt": "^4.0.3",
diff --git a/docs/server/api/content-generation.ts b/docs/server/api/content-generation.ts
new file mode 100644
index 0000000000..0006755a1f
--- /dev/null
+++ b/docs/server/api/content-generation.ts
@@ -0,0 +1,92 @@
+import { getComponentMeta } from 'nuxt-component-meta/parser'
+import { propsToJsonSchema } from 'nuxt-component-meta/utils'
+import { jsonSchemaToZod } from 'json-schema-to-zod'
+import { gateway } from '@ai-sdk/gateway'
+import { generateObject } from 'ai'
+import { z } from 'zod'
+
+export default defineEventHandler(async (event) => {
+  try {
+    const { prompt, componentName } = await readValidatedBody(event, z.object({
+      prompt: z.string(),
+      componentName: z.string()
+    }).parse)
+
+    const schema = getComponentSchema(componentName)
+
+    if (!schema) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: `Component ${componentName} not supported`
+      })
+    }
+
+    const systemPrompt = `You are an expert content generator specialized in populating component properties with realistic, meaningful data.
+
+Rules:
+- NEVER use HTML tags in text content (no <p>, <strong>, <li>, <ul>, etc.)
+- ONLY use plain text for all content fields
+- ONLY generate properties that exist in the provided schema
+- DO NOT invent new properties or keys
+- Generate ONLY the exact structure required by the schema
+
+LUCIDE ICONS - USE ONLY EXISTING ICONS:
+- Use format: i-lucide-[icon-name]
+- Common icons that EXIST: i-lucide-home, i-lucide-user, i-lucide-settings, i-lucide-mail, i-lucide-phone, i-lucide-briefcase, i-lucide-code, i-lucide-palette, i-lucide-camera, i-lucide-map-pin, i-lucide-clock, i-lucide-star, i-lucide-heart, i-lucide-shield, i-lucide-globe, i-lucide-folder, i-lucide-file, i-lucide-image, i-lucide-music, i-lucide-video, i-lucide-download, i-lucide-upload, i-lucide-search, i-lucide-plus, i-lucide-minus, i-lucide-check, i-lucide-x, i-lucide-arrow-right, i-lucide-arrow-left, i-lucide-chevron-right, i-lucide-chevron-down
+- DO NOT invent icons like "i-lucide-tools", "i-lucide-design", etc.
+- When in doubt, use common icons like i-lucide-folder, i-lucide-file, or i-lucide-star
+
+CONTENT GUIDELINES:
+- Generate content that matches the user's prompt and use case
+- Use clear, descriptive labels and meaningful text
+- Keep content concise but informative
+- Ensure all generated data is realistic and would be genuinely useful in a real application
+- If generating arrays/lists, create 3-5 items unless otherwise specified
+- If generating links, use '#' as the source
+- Use professional, modern language appropriate for web applications
+
+Component: ${componentName}
+Generate ONLY the exact structure required by the schema. Do not add extra properties.`
+
+    const result = await generateObject({
+      model: gateway('openai/gpt-4.1-nano'),
+      system: systemPrompt,
+      prompt: `${prompt}. Generate content for a ${componentName} component.`,
+      temperature: 0.3,
+      schema
+    })
+
+    return result.object
+  } catch (error) {
+    console.error('AI generation error:', error)
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Internal server error during AI generation'
+    })
+  }
+})
+
+const AI_PROPS = [
+  'items',
+  'description',
+  'title',
+  'label',
+  'text'
+]
+
+export function getComponentSchema(componentName: string): z.ZodType<any> | null {
+  try {
+    const meta = getComponentMeta(`src/runtime/components/${componentName}.vue`)
+
+    if (!meta?.props) return null
+
+    const filteredProps = Object.values(meta.props).filter((prop: any) => AI_PROPS.includes(prop.name))
+    if (filteredProps.length === 0) return null
+
+    const jsonSchema = propsToJsonSchema(filteredProps)
+    const zodString = jsonSchemaToZod(jsonSchema)
+    return eval(zodString)
+  } catch {
+    return null
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d7abea3fcb..c645fb8ef1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -297,6 +297,9 @@ importers:
       joi:
         specifier: ^18.0.1
         version: 18.0.1
+      json-schema-to-zod:
+        specifier: ^2.6.1
+        version: 2.6.1
       maska:
         specifier: ^3.2.0
         version: 3.2.0