From 6289d3cdbd6903eb05011f0545ee45ca2dd27077 Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@epitech.eu>
Date: Fri, 5 Sep 2025 23:29:16 +0100
Subject: [PATCH 1/4] up

---
 .../components/content/AIContentGenerator.vue | 250 ++++++++++++++++++
 docs/app/components/content/ComponentCode.vue |  19 ++
 docs/server/api/content-generation.ts         |  59 +++++
 docs/shared/utils/components.ts               |  44 +++
 docs/shared/utils/index.ts                    |   1 +
 5 files changed, 373 insertions(+)
 create mode 100644 docs/app/components/content/AIContentGenerator.vue
 create mode 100644 docs/server/api/content-generation.ts
 create mode 100644 docs/shared/utils/components.ts
 create mode 100644 docs/shared/utils/index.ts

diff --git a/docs/app/components/content/AIContentGenerator.vue b/docs/app/components/content/AIContentGenerator.vue
new file mode 100644
index 0000000000..880fe5cd99
--- /dev/null
+++ b/docs/app/components/content/AIContentGenerator.vue
@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import { motion, AnimatePresence } from 'motion-v'
+import { hasComponentSchema } from '~~/shared/utils'
+
+interface Props {
+  /** The component name (e.g., 'accordion', 'page-card') */
+  componentName: string
+}
+
+interface AIGeneratedContent {
+  [key: string]: any
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  generated: [content: AIGeneratedContent]
+}>()
+
+const SURFACE_WIDTH = 320
+const SURFACE_HEIGHT = 160
+
+const isAIPromptOpen = ref(false)
+const aiPrompt = ref('')
+const isGenerating = ref(false)
+const aiError = ref<string | null>(null)
+
+const surfaceRef = ref<HTMLElement>()
+const textareaRef = ref<any>()
+
+const supportsAI = computed(() => hasComponentSchema(props.componentName))
+
+function toggleSurface() {
+  if (isGenerating.value) return
+
+  if (isAIPromptOpen.value) {
+    closeSurface()
+  } else {
+    openSurface()
+  }
+}
+
+function openSurface() {
+  isAIPromptOpen.value = true
+  nextTick(() => {
+    if (textareaRef.value?.$el) {
+      textareaRef.value.$el.focus()
+    }
+  })
+}
+
+function closeSurface() {
+  isAIPromptOpen.value = false
+  aiPrompt.value = ''
+  aiError.value = null
+  if (textareaRef.value?.$el) {
+    textareaRef.value.$el.blur()
+  }
+}
+
+async function generateWithAI() {
+  if (!aiPrompt.value.trim() || !supportsAI.value || isGenerating.value) return
+
+  const promptToSend = aiPrompt.value.trim()
+
+  closeSurface()
+  isGenerating.value = true
+  aiError.value = null
+
+  try {
+    const result = await $fetch('/api/content-generation', {
+      method: 'POST',
+      body: {
+        prompt: promptToSend,
+        componentName: props.componentName.toLowerCase()
+      }
+    })
+
+    if (result) {
+      emit('generated', result)
+    }
+  } catch (error) {
+    console.error('AI generation error:', error)
+    const errorMessage = 'An error occurred while generating content. Please try again.'
+    openSurface()
+    aiError.value = errorMessage
+  } finally {
+    isGenerating.value = false
+  }
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    closeSurface()
+  }
+  if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault()
+    generateWithAI()
+  }
+}
+
+onClickOutside(surfaceRef, closeSurface)
+</script>
+
+<template>
+  <div class="absolute top-0 right-0">
+    <UButton
+      v-if="supportsAI"
+      color="neutral"
+      variant="link"
+      size="xs"
+      :disabled="isGenerating"
+      :loading="isGenerating"
+      class="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">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="relative lucide lucide-sparkles"
+            aria-hidden="true"
+          >
+            <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" />
+            <path d="M20 2v4" />
+            <path d="M22 4h-4" />
+            <circle cx="4" cy="20" r="2" />
+          </svg>
+        </div>
+        <UIcon v-else name="i-lucide-loader-circle" class="animate-spin" />
+      </template>
+
+      <span class="relative z-10 transition-colors duration-300 text-muted">
+        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"
+        >
+          Generate with AI
+        </span>
+      </span>
+    </UButton>
+
+    <AnimatePresence>
+      <motion.div
+        v-if="isAIPromptOpen"
+        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
+        }"
+      >
+        <form
+          class="p-4 h-full flex flex-col gap-3"
+          @submit.prevent="generateWithAI"
+        >
+          <motion.div
+            class="flex flex-col gap-3 h-full"
+            :initial="{ opacity: 0 }"
+            :animate="{ opacity: 1 }"
+            :exit="{ opacity: 0 }"
+            :transition="{ delay: 0.1 }"
+          >
+            <div>
+              <UTextarea
+                ref="textareaRef"
+                v-model="aiPrompt"
+                autofocus
+                placeholder="Describe the content you want to generate..."
+                :rows="4"
+                class="resize-none size-full"
+                @keydown="handleKeyDown"
+              />
+            </div>
+
+            <UAlert
+              v-if="aiError"
+              color="error"
+              variant="soft"
+              :description="aiError"
+            />
+
+            <div class="flex gap-2 justify-end">
+              <UButton
+                variant="outline"
+                label="Cancel"
+                size="xs"
+                @click="closeSurface"
+              />
+              <UButton
+                :disabled="!aiPrompt.trim() || isGenerating"
+                :loading="isGenerating"
+                label="Submit"
+                size="xs"
+                type="submit"
+              />
+            </div>
+          </motion.div>
+        </form>
+      </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 7b9d4f4550..789299d070 100644
--- a/docs/app/components/content/ComponentCode.vue
+++ b/docs/app/components/content/ComponentCode.vue
@@ -300,6 +300,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 })}`, async () => {
   if (!props.prettier) {
     return parseMarkdown(code.value)
@@ -373,6 +388,10 @@ 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 }]">
+        <AIContentGenerator
+          :component-name="name.replace('U', '').replace('Prose', '')"
+          @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/server/api/content-generation.ts b/docs/server/api/content-generation.ts
new file mode 100644
index 0000000000..5fd9bb3ebc
--- /dev/null
+++ b/docs/server/api/content-generation.ts
@@ -0,0 +1,59 @@
+import { gateway } from '@ai-sdk/gateway'
+import { generateObject } from 'ai'
+import { getComponentSchema } from '~~/shared/utils'
+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: `No schema found for component: ${componentName}`
+      })
+    }
+
+    const systemPrompt = createSystemPrompt(componentName)
+    const userPrompt = `${prompt}\n\nPlease generate appropriate content for a ${componentName} component.`
+
+    const result = await generateObject({
+      model: gateway('openai/gpt-4o-mini'),
+      system: systemPrompt,
+      prompt: userPrompt,
+      temperature: 0.7,
+      schema
+    })
+
+    return result.object
+  } catch (error) {
+    console.error('AI generation error:', error)
+
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Internal server error during AI generation'
+    })
+  }
+})
+
+function createSystemPrompt(componentName: string): string {
+  return `You are an expert UI/UX designer and developer. Generate realistic, useful, and contextually appropriate content for Nuxt UI components.
+
+Instructions:
+- Generate content that matches the user's prompt and use case
+- Use clear, descriptive labels and meaningful text
+- Choose appropriate colors, variants, and sizes based on semantic meaning
+- For icons, use Lucide icons with the format: i-lucide-icon-name
+- 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
+- Use professional, modern language appropriate for web applications
+
+Component: ${componentName}
+Generate content that fits the schema requirements and the user's specific request.`
+}
diff --git a/docs/shared/utils/components.ts b/docs/shared/utils/components.ts
new file mode 100644
index 0000000000..280e6b1e0c
--- /dev/null
+++ b/docs/shared/utils/components.ts
@@ -0,0 +1,44 @@
+import { z } from 'zod'
+
+const componentSchemas = {
+  accordion: z.object({
+    items: z.array(
+      z.object({
+        label: z.string().describe('The title/header of the accordion item'),
+        content: z.string().describe('The main content text for this accordion section'),
+        icon: z.string().optional().describe('Optional icon name (e.g., i-lucide-user)')
+      })
+    ).describe('Array of accordion items to display')
+  }),
+
+  alert: z.object({
+    title: z.string().describe('The alert title'),
+    description: z.string().describe('The alert description/content'),
+    color: z.enum(['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral']).optional().describe('Alert color theme'),
+    variant: z.enum(['solid', 'outline', 'soft', 'subtle']).optional().describe('Alert visual variant'),
+    icon: z.string().optional().describe('Optional icon name for the alert')
+  })
+} as const
+
+/**
+ * Get the schema for a specific component by name
+ */
+export function getComponentSchema(componentName: string) {
+  const normalizedName = componentName.replace(/^U/, '').toLowerCase()
+  return componentSchemas[normalizedName as keyof typeof componentSchemas] || null
+}
+
+/**
+ * Check if a component has an AI schema defined
+ */
+export function hasComponentSchema(componentName: string): boolean {
+  const normalizedName = componentName.replace(/^U/, '').toLowerCase()
+  return normalizedName in componentSchemas
+}
+
+/**
+ * Get available component names with schemas
+ */
+export function getAvailableComponents(): string[] {
+  return Object.keys(componentSchemas)
+}
diff --git a/docs/shared/utils/index.ts b/docs/shared/utils/index.ts
new file mode 100644
index 0000000000..cb64ac1b52
--- /dev/null
+++ b/docs/shared/utils/index.ts
@@ -0,0 +1 @@
+export * from './components'

From 32bd7d3ebff30dc1e0f947d926e52462b5880b8b Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@epitech.eu>
Date: Tue, 9 Sep 2025 21:51:25 +0100
Subject: [PATCH 2/4] up

---
 .../components/content/AIContentGenerator.vue |  3 +-
 docs/package.json                             |  1 +
 docs/server/api/content-generation.ts         | 51 +++++++++--------
 docs/shared/utils/components.ts               | 57 +++++++------------
 pnpm-lock.yaml                                |  3 +
 5 files changed, 51 insertions(+), 64 deletions(-)

diff --git a/docs/app/components/content/AIContentGenerator.vue b/docs/app/components/content/AIContentGenerator.vue
index 880fe5cd99..0d6e27323b 100644
--- a/docs/app/components/content/AIContentGenerator.vue
+++ b/docs/app/components/content/AIContentGenerator.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { motion, AnimatePresence } from 'motion-v'
-import { hasComponentSchema } from '~~/shared/utils'
 
 interface Props {
   /** The component name (e.g., 'accordion', 'page-card') */
@@ -28,7 +27,7 @@ const aiError = ref<string | null>(null)
 const surfaceRef = ref<HTMLElement>()
 const textareaRef = ref<any>()
 
-const supportsAI = computed(() => hasComponentSchema(props.componentName))
+const supportsAI = computed(() => true)// hasComponentSchema(props.componentName))
 
 function toggleSurface() {
   if (isGenerating.value) return
diff --git a/docs/package.json b/docs/package.json
index d873db7c48..daa3af4521 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -29,6 +29,7 @@
     "better-sqlite3": "^12.2.0",
     "capture-website": "^4.2.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
index 5fd9bb3ebc..e35066129a 100644
--- a/docs/server/api/content-generation.ts
+++ b/docs/server/api/content-generation.ts
@@ -1,8 +1,9 @@
 import { gateway } from '@ai-sdk/gateway'
 import { generateObject } from 'ai'
-import { getComponentSchema } from '~~/shared/utils'
 import { z } from 'zod'
 
+export const maxDuration = 30
+
 export default defineEventHandler(async (event) => {
   try {
     const { prompt, componentName } = await readValidatedBody(event, z.object({
@@ -15,45 +16,45 @@ export default defineEventHandler(async (event) => {
     if (!schema) {
       throw createError({
         statusCode: 400,
-        statusMessage: `No schema found for component: ${componentName}`
+        statusMessage: `Component ${componentName} not supported`
       })
     }
 
-    const systemPrompt = createSystemPrompt(componentName)
-    const userPrompt = `${prompt}\n\nPlease generate appropriate content for a ${componentName} component.`
+    const systemPrompt = `You are an expert UI/UX designer and developer. Generate realistic, useful content for Nuxt UI components.
+
+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
+- For icons, use Lucide icons with the format: i-lucide-icon-name
+- Keep text content clean and readable without markup
+
+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
+- 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-4o-mini'),
+      model: gateway('openai/gpt-4.1-nano'),
       system: systemPrompt,
-      prompt: userPrompt,
-      temperature: 0.7,
+      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'
     })
   }
 })
-
-function createSystemPrompt(componentName: string): string {
-  return `You are an expert UI/UX designer and developer. Generate realistic, useful, and contextually appropriate content for Nuxt UI components.
-
-Instructions:
-- Generate content that matches the user's prompt and use case
-- Use clear, descriptive labels and meaningful text
-- Choose appropriate colors, variants, and sizes based on semantic meaning
-- For icons, use Lucide icons with the format: i-lucide-icon-name
-- 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
-- Use professional, modern language appropriate for web applications
-
-Component: ${componentName}
-Generate content that fits the schema requirements and the user's specific request.`
-}
diff --git a/docs/shared/utils/components.ts b/docs/shared/utils/components.ts
index 280e6b1e0c..170ded1cee 100644
--- a/docs/shared/utils/components.ts
+++ b/docs/shared/utils/components.ts
@@ -1,44 +1,27 @@
-import { z } from 'zod'
+import { getComponentMeta } from 'nuxt-component-meta/parser'
+import { propsToJsonSchema } from 'nuxt-component-meta/utils'
+import { jsonSchemaToZod } from 'json-schema-to-zod'
+import type { z } from 'zod'
 
-const componentSchemas = {
-  accordion: z.object({
-    items: z.array(
-      z.object({
-        label: z.string().describe('The title/header of the accordion item'),
-        content: z.string().describe('The main content text for this accordion section'),
-        icon: z.string().optional().describe('Optional icon name (e.g., i-lucide-user)')
-      })
-    ).describe('Array of accordion items to display')
-  }),
+const AI_PROPS = ['items', 'description', 'title', 'label', 'content', 'text', 'name']
 
-  alert: z.object({
-    title: z.string().describe('The alert title'),
-    description: z.string().describe('The alert description/content'),
-    color: z.enum(['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral']).optional().describe('Alert color theme'),
-    variant: z.enum(['solid', 'outline', 'soft', 'subtle']).optional().describe('Alert visual variant'),
-    icon: z.string().optional().describe('Optional icon name for the alert')
-  })
-} as const
+export function getComponentSchema(componentName: string): z.ZodType<any> | null {
+  try {
+    const meta = getComponentMeta(`src/runtime/components/${componentName}.vue`)
 
-/**
- * Get the schema for a specific component by name
- */
-export function getComponentSchema(componentName: string) {
-  const normalizedName = componentName.replace(/^U/, '').toLowerCase()
-  return componentSchemas[normalizedName as keyof typeof componentSchemas] || null
-}
+    if (!meta?.props) return null
 
-/**
- * Check if a component has an AI schema defined
- */
-export function hasComponentSchema(componentName: string): boolean {
-  const normalizedName = componentName.replace(/^U/, '').toLowerCase()
-  return normalizedName in componentSchemas
+    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
+  }
 }
 
-/**
- * Get available component names with schemas
- */
-export function getAvailableComponents(): string[] {
-  return Object.keys(componentSchemas)
+export function hasComponentSchema(componentName: string): boolean {
+  return getComponentSchema(componentName) !== null
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0a6fa3dead..8e2d8dfcaa 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

From e4ec34cf02c1ec568e5a876381ce0e24b0c2f192 Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@epitech.eu>
Date: Sat, 13 Sep 2025 11:48:40 +0100
Subject: [PATCH 3/4] update model

---
 docs/server/api/content-generation.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/server/api/content-generation.ts b/docs/server/api/content-generation.ts
index 15f9cc69e9..bdf836073c 100644
--- a/docs/server/api/content-generation.ts
+++ b/docs/server/api/content-generation.ts
@@ -48,7 +48,7 @@ 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'),
+      model: gateway('google/gemini-2.5-flash-lite'),
       system: systemPrompt,
       prompt: `${prompt}. Generate content for a ${componentName} component.`,
       temperature: 0.3,

From 2ea3a419e6629fbea565802015cdb3b82d0d23e0 Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@epitech.eu>
Date: Wed, 17 Sep 2025 18:24:22 +0100
Subject: [PATCH 4/4] up

---
 docs/app/components/content/AIContentWidget.vue | 3 ++-
 docs/server/api/content-generation.ts           | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/app/components/content/AIContentWidget.vue b/docs/app/components/content/AIContentWidget.vue
index 6a8456722d..3ce6a78ad4 100644
--- a/docs/app/components/content/AIContentWidget.vue
+++ b/docs/app/components/content/AIContentWidget.vue
@@ -35,7 +35,7 @@ const SURFACE_WIDTH = 320
 const SURFACE_HEIGHT = 160
 
 const schema = z.object({
-  prompt: z.string().min(5, 'Please describe what content you want to generate')
+  prompt: z.string()
 })
 
 type Schema = z.output<typeof schema>
@@ -180,6 +180,7 @@ onClickOutside(surfaceRef, closeSurface)
               <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"
diff --git a/docs/server/api/content-generation.ts b/docs/server/api/content-generation.ts
index 15f9cc69e9..0006755a1f 100644
--- a/docs/server/api/content-generation.ts
+++ b/docs/server/api/content-generation.ts
@@ -42,6 +42,7 @@ CONTENT GUIDELINES:
 - 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}