From 792ccf98792a33416d1ccf3351578e103f771faa Mon Sep 17 00:00:00 2001
From: peoray <peoray@yahoo.com>
Date: Wed, 3 Dec 2025 01:03:03 +0100
Subject: [PATCH 1/3] feat: introduce ChatGPT, Claude, and Grok demo examples
 and update introduction docs page

---
 apps/www/components/ElementsDemo.vue          |  60 ++
 apps/www/content/1.overview/1.Introduction.md |  65 +-
 .../3.components/1.chatbot/prompt-input.md    |  58 +-
 apps/www/plugins/ai-elements.ts               |   2 +
 .../src/prompt-input/PromptInputSubmit.vue    |   3 +
 packages/examples/package.json                |   3 +-
 packages/examples/src/demo-chatgpt.vue        | 660 +++++++++++++++
 packages/examples/src/demo-claude.vue         | 682 ++++++++++++++++
 packages/examples/src/demo-grok.vue           | 751 ++++++++++++++++++
 packages/examples/src/index.ts                |   3 +
 pnpm-lock.yaml                                |  86 +-
 11 files changed, 2224 insertions(+), 149 deletions(-)
 create mode 100644 apps/www/components/ElementsDemo.vue
 create mode 100644 packages/examples/src/demo-chatgpt.vue
 create mode 100644 packages/examples/src/demo-claude.vue
 create mode 100644 packages/examples/src/demo-grok.vue

diff --git a/apps/www/components/ElementsDemo.vue b/apps/www/components/ElementsDemo.vue
new file mode 100644
index 0000000..789cba8
--- /dev/null
+++ b/apps/www/components/ElementsDemo.vue
@@ -0,0 +1,60 @@
+<script setup>
+import { Toaster } from '@repo/shadcn-vue/components/ui/sonner'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@repo/shadcn-vue/components/ui/tabs'
+import 'vue-sonner/style.css'
+
+const tabs = [
+  {
+    name: 'ChatGPT',
+    alt: 'OpenAI',
+    componentName: 'ChatGPTExample',
+  },
+  {
+    name: 'Claude',
+    alt: 'Anthropic',
+    componentName: 'ClaudeExample',
+  },
+  {
+    name: 'Grok',
+    alt: 'X AI',
+    componentName: 'GrokExample',
+  },
+]
+
+const defaultTab = tabs[0].name
+</script>
+
+<template>
+  <Toaster />
+
+  <div class="my-4 w-full rounded-lg border">
+    <Tabs :default-value="defaultTab">
+      <TabsList class="w-full justify-start rounded-none border-b bg-muted/50 p-0">
+        <TabsTrigger
+          v-for="tab in tabs"
+          :key="tab.name"
+          :value="tab.name"
+          class="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-background"
+        >
+          {{ tab.name }}
+        </TabsTrigger>
+      </TabsList>
+
+      <TabsContent
+        v-for="tab in tabs"
+        :key="tab.name"
+        :value="tab.name"
+        class="m-0 p-0"
+      >
+        <div class="">
+          <ComponentViewer :component-name="tab.componentName" />
+        </div>
+      </TabsContent>
+    </Tabs>
+  </div>
+</template>
diff --git a/apps/www/content/1.overview/1.Introduction.md b/apps/www/content/1.overview/1.Introduction.md
index 1a313ac..f8c53ae 100644
--- a/apps/www/content/1.overview/1.Introduction.md
+++ b/apps/www/content/1.overview/1.Introduction.md
@@ -1,60 +1,47 @@
 ---
 title: Introduction
-description:
+description: What is AI Elements and why you should use it.
 icon: lucide:info
 ---
 
 [AI Elements Vue](https://github.com/vuepont/ai-elements-vue) is the Vue port of [AI-Elements](https://github.com/vercel/ai-elements), a component library and custom registry built on top of [shadcn-vue](https://shadcn-vue.com/) to help you build AI-native applications faster. It provides pre-built components like conversations, messages and more.
 
-You can install it with:
+Installing AI Elements Vue is straightforward and can be done in a couple of ways. You can use the dedicated CLI command for the fastest setup, or integrate via the standard shadcn-vue CLI if you’ve already adopted shadcn’s workflow.
 
-:pm-x{command="ai-elements-vue@latest"}
+:::tabs{variant="card"}
+  ::div{label="AI Elements Vue"}
+  ```sh
+  npx ai-elements-vue@latest
+  ```
+  ::
+  ::div{label="shadcn-vue CLI"}
 
-## Components
-
-:::ComponentLoader{label="Message" componentName="Message"}
+  ```sh
+  npx shadcn-vue@latest add https://registry.ai-elements-vue.com/all.json
+  ```
+  ::
 :::
 
-:::ComponentLoader{label="Conversation" componentName="Conversation"}
-:::
+## Quick Start
 
-:::ComponentLoader{label="PromptInput" componentName="PromptInput"}
-:::
-
-:::ComponentLoader{label="Image" componentName="Image"}
-:::
+Here are some basic examples of what you can achieve using components from AI Elements.
 
-:::ComponentLoader{label="Loader" componentName="Loader"}
+:::ElementsDemo
 :::
 
-:::ComponentLoader{label="Suggestion" componentName="Suggestion"}
-:::
+## Prerequisites
 
-:::ComponentLoader{label="Shimmer" componentName="Shimmer"}
-:::
+Before installing AI Elements, make sure your environment meets the following requirements:
 
-:::ComponentLoader{label="OpenInChat" componentName="OpenInChat"}
-:::
+- [Node.js](https://nodejs.org/en/download/), version 18 or later
+- A [Vue.js](https://vuejs.org/) or [Nuxt.js](https://nuxt.com/) project with the [AI SDK](https://ai-sdk.dev/) installed.
+- [shadcn-vue](https://shadcn-vue.com/) installed in your project. If you don't have it installed, running any install command will automatically install it for you.
+- We also highly recommend using the [AI Gateway](https://vercel.com/docs/ai-gateway) and adding `AI_GATEWAY_API_KEY` to your `env.local` so you don't have to use an API key from every provider. AI Gateway also gives $5 in usage per month so you can experiment with models. You can obtain an API key [here](https://vercel.com/d?to=%2F%5Bteam%5D%2F%7E%2Fai%2Fapi-keys&title=Get%20your%20AI%20Gateway%20key).
 
-:::ComponentLoader{label="Task" componentName="Task"}
-:::
+## Installing Components
 
-:::ComponentLoader{label="Sources" componentName="Sources"}
-:::
+You can install AI Elements Vue components using either the AI Elements Vue CLI or the shadcn-vue CLI. Both achieve the same result: adding the selected component’s code and any needed dependencies to your project.
 
-:::ComponentLoader{label="Plan" componentName="Plan"}
-:::
-
-:::ComponentLoader{label="Queue" componentName="Queue"}
-:::
-
-:::ComponentLoader{label="ChainOfThought" componentName="ChainOfThought"}
-:::
-
-:::ComponentLoader{label="InlineCitation" componentName="InlineCitation"}
-:::
-
-:::ComponentLoader{label="CodeBlock" componentName="CodeBlock"}
-:::
+The CLI will download the component’s code and integrate it into your project’s directory (usually under your components folder). By default, AI Elements components are added to the `@/components/ai-elements/` directory (or whatever folder you’ve configured in your shadcn-vue components settings).
 
-View the [source code](https://github.com/vuepont/ai-elements-vue) for all components on GitHub.
+After running the command, you should see a confirmation in your terminal that the files were added. You can then proceed to use the component in your code.
diff --git a/apps/www/content/3.components/1.chatbot/prompt-input.md b/apps/www/content/3.components/1.chatbot/prompt-input.md
index 7d450f7..26aaa66 100644
--- a/apps/www/content/3.components/1.chatbot/prompt-input.md
+++ b/apps/www/content/3.components/1.chatbot/prompt-input.md
@@ -272,57 +272,63 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 
 ```vue [PromptInputButton.vue] height=300 collapse
 <script setup lang="ts">
+// import type { InputGroupButtonVariants } from '@repo/shadcn-vue/components/ui/input-group'
+import type { ChatStatus } from 'ai'
 import type { HTMLAttributes } from 'vue'
 import { InputGroupButton } from '@repo/shadcn-vue/components/ui/input-group'
 import { cn } from '@repo/shadcn-vue/lib/utils'
-import { computed, useSlots } from 'vue'
+import { CornerDownLeftIcon, Loader2Icon, SquareIcon, XIcon } from 'lucide-vue-next'
+import { computed } from 'vue'
 
 type InputGroupButtonProps = InstanceType<typeof InputGroupButton>['$props']
 
 interface Props extends /* @vue-ignore */ InputGroupButtonProps {
   class?: HTMLAttributes['class']
+  status?: ChatStatus
   variant?: InputGroupButtonProps['variant']
   size?: InputGroupButtonProps['size']
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  variant: 'ghost',
+  variant: 'default',
+  size: 'icon-sm',
 })
 
-const slots = useSlots()
-
-const computedSize = computed(() => {
-  if (props.size)
-    return props.size
-
-  const slotNodes = slots.default?.()
-
-  if (!slotNodes)
-    return 'icon-sm'
-
-  const validChildren = slotNodes.filter((node) => {
-    if (node.type === Comment)
-      return false
-    if (node.type === Text && !node.children?.toString().trim())
-      return false
-    return true
-  })
+const icon = computed(() => {
+  if (props.status === 'submitted') {
+    return Loader2Icon
+  }
+  else if (props.status === 'streaming') {
+    return SquareIcon
+  }
+  else if (props.status === 'error') {
+    return XIcon
+  }
+  return CornerDownLeftIcon
+})
 
-  return validChildren.length > 1 ? 'sm' : 'icon-sm'
+const iconClass = computed(() => {
+  if (props.status === 'submitted') {
+    return 'size-4 animate-spin'
+  }
+  return 'size-4'
 })
 
-const { size, variant, class: _, ...restProps } = props
+const { status, size, variant, class: _, ...restProps } = props
 </script>
 
 <template>
   <InputGroupButton
-    type="button"
-    :size="computedSize"
-    :class="cn($props.class)"
+    aria-label="Submit"
+    :class="cn(props.class)"
+    :size="size"
     :variant="variant"
+    type="submit"
     v-bind="restProps"
   >
-    <slot />
+    <slot>
+      <component :is="icon" :class="iconClass" />
+    </slot>
   </InputGroupButton>
 </template>
 ```
diff --git a/apps/www/plugins/ai-elements.ts b/apps/www/plugins/ai-elements.ts
index c2e6eff..51f024e 100644
--- a/apps/www/plugins/ai-elements.ts
+++ b/apps/www/plugins/ai-elements.ts
@@ -2,12 +2,14 @@ import type { NuxtApp } from 'nuxt/app'
 import * as Components from '@repo/examples'
 import ComponentLoader from '@/components/ComponentLoader.vue'
 import ComponentViewer from '@/components/ComponentViewer.vue'
+import ElementsDemo from '@/components/ElementsDemo.vue'
 
 export default defineNuxtPlugin((nuxtApp: NuxtApp) => {
   const { vueApp } = nuxtApp
 
   vueApp.component('ComponentLoader', ComponentLoader)
   vueApp.component('ComponentViewer', ComponentViewer)
+  vueApp.component('ElementsDemo', ElementsDemo)
 
   Object.entries(Components).forEach(([name, component]) => {
     vueApp.component(name, component)
diff --git a/packages/elements/src/prompt-input/PromptInputSubmit.vue b/packages/elements/src/prompt-input/PromptInputSubmit.vue
index 274009c..2f67071 100644
--- a/packages/elements/src/prompt-input/PromptInputSubmit.vue
+++ b/packages/elements/src/prompt-input/PromptInputSubmit.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+// import type { InputGroupButtonVariants } from '@repo/shadcn-vue/components/ui/input-group'
 import type { ChatStatus } from 'ai'
 import type { HTMLAttributes } from 'vue'
 import { InputGroupButton } from '@repo/shadcn-vue/components/ui/input-group'
@@ -11,6 +12,8 @@ type InputGroupButtonProps = InstanceType<typeof InputGroupButton>['$props']
 interface Props extends /* @vue-ignore */ InputGroupButtonProps {
   class?: HTMLAttributes['class']
   status?: ChatStatus
+  variant?: InputGroupButtonProps['variant']
+  size?: InputGroupButtonProps['size']
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/packages/examples/package.json b/packages/examples/package.json
index ec118cf..7fa78d3 100644
--- a/packages/examples/package.json
+++ b/packages/examples/package.json
@@ -12,7 +12,8 @@
     "ai": "^5.0.60",
     "lucide-vue-next": "^0.544.0",
     "nanoid": "^5.1.6",
-    "vue": "^3.5.22"
+    "vue": "^3.5.22",
+    "vue-sonner": "^2.0.9"
   },
   "devDependencies": {
     "typescript": "^5.9.3"
diff --git a/packages/examples/src/demo-chatgpt.vue b/packages/examples/src/demo-chatgpt.vue
new file mode 100644
index 0000000..2911b8a
--- /dev/null
+++ b/packages/examples/src/demo-chatgpt.vue
@@ -0,0 +1,660 @@
+<!-- eslint-disable no-console -->
+<script setup lang="ts">
+import type { PromptInputMessage } from '@repo/elements/prompt-input'
+import type { ToolUIPart } from 'ai'
+import {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+} from '@repo/elements/conversation'
+import {
+  Message,
+  MessageBranch,
+  MessageBranchContent,
+  MessageBranchNext,
+  MessageBranchPage,
+  MessageBranchPrevious,
+  MessageBranchSelector,
+  MessageContent,
+  MessageResponse,
+} from '@repo/elements/message'
+import {
+  PromptInput,
+  PromptInputButton,
+  PromptInputFooter,
+
+  PromptInputTextarea,
+  PromptInputTools,
+} from '@repo/elements/prompt-input'
+import {
+  Reasoning,
+  ReasoningContent,
+  ReasoningTrigger,
+} from '@repo/elements/reasoning'
+import {
+  Source,
+  Sources,
+  SourcesContent,
+  SourcesTrigger,
+} from '@repo/elements/sources'
+import { Suggestion, Suggestions } from '@repo/elements/suggestion'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@repo/shadcn-vue/components/ui/dropdown-menu'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import {
+  AudioWaveformIcon,
+  BarChartIcon,
+  BoxIcon,
+  CameraIcon,
+  CodeSquareIcon,
+  FileIcon,
+  GlobeIcon,
+  GraduationCapIcon,
+  ImageIcon,
+  NotepadTextIcon,
+  PaperclipIcon,
+  ScreenShareIcon,
+} from 'lucide-vue-next'
+import { nanoid } from 'nanoid'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { toast } from 'vue-sonner'
+
+interface MessageType {
+  key: string
+  from: 'user' | 'assistant'
+  sources?: { href: string, title: string }[]
+  versions: {
+    id: string
+    content: string
+  }[]
+  reasoning?: {
+    content: string
+    duration: number
+  }
+  tools?: {
+    name: string
+    description: string
+    status: ToolUIPart['state']
+    parameters: Record<string, unknown>
+    result: string | undefined
+    error: string | undefined
+  }[]
+  isReasoningComplete?: boolean
+  isContentComplete?: boolean
+  isReasoningStreaming?: boolean
+}
+
+const mockMessages: MessageType[] = [
+  {
+    key: nanoid(),
+    from: 'user',
+    versions: [
+      {
+        id: nanoid(),
+        content: 'Can you explain how to use React hooks effectively?',
+      },
+    ],
+  },
+  {
+    key: nanoid(),
+    from: 'assistant',
+    sources: [
+      {
+        href: 'https://react.dev/reference/react',
+        title: 'React Documentation',
+      },
+      {
+        href: 'https://react.dev/reference/react-dom',
+        title: 'React DOM Documentation',
+      },
+    ],
+    tools: [
+      {
+        name: 'mcp',
+        description: 'Searching React documentation',
+        status: 'input-available',
+        parameters: {
+          query: 'React hooks best practices',
+          source: 'react.dev',
+        },
+        result: `{
+  "query": "React hooks best practices",
+  "results": [
+    {
+      "title": "Rules of Hooks",
+      "url": "https://react.dev/warnings/invalid-hook-call-warning",
+      "snippet": "Hooks must be called at the top level of your React function components or custom hooks. Don't call hooks inside loops, conditions, or nested functions."
+    },
+    {
+      "title": "useState Hook",
+      "url": "https://react.dev/reference/react/useState",
+      "snippet": "useState is a React Hook that lets you add state to your function components. It returns an array with two values: the current state and a function to update it."
+    },
+    {
+      "title": "useEffect Hook",
+      "url": "https://react.dev/reference/react/useEffect",
+      "snippet": "useEffect lets you synchronize a component with external systems. It runs after render and can be used to perform side effects like data fetching."
+    }
+  ]
+}`,
+        error: undefined,
+      },
+    ],
+    versions: [
+      {
+        id: nanoid(),
+        content: `# React Hooks Best Practices
+
+React hooks are a powerful feature that let you use state and other React features without writing classes. Here are some tips for using them effectively:
+
+## Rules of Hooks
+
+1. **Only call hooks at the top level** of your component or custom hooks
+2. **Don't call hooks inside loops, conditions, or nested functions**
+
+## Common Hooks
+
+- **useState**: For local component state
+- **useEffect**: For side effects like data fetching
+- **useContext**: For consuming context
+- **useReducer**: For complex state logic
+- **useCallback**: For memoizing functions
+- **useMemo**: For memoizing values
+
+## Example of useState and useEffect
+
+\`\`\`jsx
+function ProfilePage({ userId }) {
+  const [user, setUser] = useState(null);
+  
+  useEffect(() => {
+    // This runs after render and when userId changes
+    fetchUser(userId).then(userData => {
+      setUser(userData);
+    });
+  }, [userId]);
+  
+  return user ? <Profile user={user} /> : <Loading />;
+}
+\`\`\`
+
+Would you like me to explain any specific hook in more detail?`,
+      },
+    ],
+  },
+  {
+    key: nanoid(),
+    from: 'user',
+    versions: [
+      {
+        id: nanoid(),
+        content:
+          'Yes, could you explain useCallback and useMemo in more detail? When should I use one over the other?',
+      },
+      {
+        id: nanoid(),
+        content:
+          'I\'m particularly interested in understanding the performance implications of useCallback and useMemo. Could you break down when each is most appropriate?',
+      },
+      {
+        id: nanoid(),
+        content:
+          'Thanks for the overview! Could you dive deeper into the specific use cases where useCallback and useMemo make the biggest difference in React applications?',
+      },
+    ],
+  },
+  {
+    key: nanoid(),
+    from: 'assistant',
+    reasoning: {
+      content: `The user is asking for a detailed explanation of useCallback and useMemo. I should provide a clear and concise explanation of each hook's purpose and how they differ.
+      
+The useCallback hook is used to memoize functions to prevent unnecessary re-renders of child components that receive functions as props.
+
+The useMemo hook is used to memoize values to avoid expensive recalculations on every render.
+
+Both hooks help with performance optimization, but they serve different purposes.`,
+      duration: 10,
+    },
+    versions: [
+      {
+        id: nanoid(),
+        content: `## useCallback vs useMemo
+
+Both hooks help with *performance optimization*, but they serve different purposes:
+
+### useCallback
+
+\`useCallback\` memoizes **functions** to prevent unnecessary re-renders of child components that receive functions as props.
+
+\`\`\`jsx
+// Without useCallback - a new function is created on every render
+const handleClick = () => {
+  console.log(count);
+};
+
+// With useCallback - the function is only recreated when dependencies change
+const handleClick = useCallback(() => {
+  console.log(count);
+}, [count]);
+\`\`\`
+
+### useMemo
+
+\`useMemo\` memoizes **values** to avoid expensive recalculations on every render.
+
+\`\`\`jsx
+// Without useMemo - expensive calculation runs on every render
+const sortedList = expensiveSort(items);
+
+// With useMemo - calculation only runs when items change
+const sortedList = useMemo(() => expensiveSort(items), [items]);
+\`\`\`
+
+### When to use which?
+
+- Use **useCallback** when:
+  - Passing callbacks to optimized child components that rely on reference equality
+  - Working with event handlers that you pass to child components
+
+- Use **useMemo** when:
+  - You have computationally expensive calculations
+  - You want to avoid recreating objects that are used as dependencies for other hooks
+
+### Performance Note
+
+Don't overuse these hooks! They come with their own overhead. Only use them when you have identified a genuine performance issue.
+
+### ~~Deprecated Methods~~
+
+Note that ~~class-based lifecycle methods~~ like \`componentDidMount\` are now replaced by the \`useEffect\` hook in modern React development.`,
+      },
+    ],
+  },
+]
+
+const suggestions = [
+  { icon: BarChartIcon, text: 'Analyze data', color: '#76d0eb' },
+  { icon: BoxIcon, text: 'Surprise me', color: '#76d0eb' },
+  { icon: NotepadTextIcon, text: 'Summarize text', color: '#ea8444' },
+  { icon: CodeSquareIcon, text: 'Code', color: '#6c71ff' },
+  { icon: GraduationCapIcon, text: 'Get advice', color: '#76d0eb' },
+  { icon: null, text: 'More' },
+]
+
+const mockMessageResponses = [
+  'That\'s a great question! Let me help you understand this concept better. The key thing to remember is that proper implementation requires careful consideration of the underlying principles and best practices in the field.',
+  'I\'d be happy to explain this topic in detail. From my understanding, there are several important factors to consider when approaching this problem. Let me break it down step by step for you.',
+  'This is an interesting topic that comes up frequently. The solution typically involves understanding the core concepts and applying them in the right context. Here\'s what I recommend...',
+  'Great choice of topic! This is something that many developers encounter. The approach I\'d suggest is to start with the fundamentals and then build up to more complex scenarios.',
+  'That\'s definitely worth exploring. From what I can see, the best way to handle this is to consider both the theoretical aspects and practical implementation details.',
+]
+
+const text = ref<string>('')
+const useWebSearch = ref<boolean>(false)
+const useMicrophone = ref<boolean>(false)
+const status = ref<'submitted' | 'streaming' | 'ready' | 'error'>('ready')
+const messages = ref<MessageType[]>([])
+const streamingMessageId = ref<string | null>(null)
+
+async function streamReasoning(messageKey: string, versionId: string, reasoningContent: string) {
+  const words = reasoningContent.split(' ')
+  let currentContent = ''
+
+  for (let i = 0; i < words.length; i++) {
+    currentContent += (i > 0 ? ' ' : '') + words[i]
+
+    // Find and update the specific message directly
+    const msg = messages.value.find(m => m.key === messageKey)
+    if (msg && msg.reasoning) {
+      msg.reasoning.content = currentContent
+    }
+
+    await new Promise(resolve =>
+      setTimeout(resolve, Math.random() * 30 + 20),
+    )
+  }
+
+  // Mark reasoning as complete
+  const msg = messages.value.find(m => m.key === messageKey)
+  if (msg) {
+    msg.isReasoningComplete = true
+    msg.isReasoningStreaming = false
+  }
+}
+
+async function streamContent(messageKey: string, versionId: string, content: string) {
+  const words = content.split(' ')
+  let currentContent = ''
+
+  for (let i = 0; i < words.length; i++) {
+    currentContent += (i > 0 ? ' ' : '') + words[i]
+
+    const msg = messages.value.find(m => m.key === messageKey)
+    if (msg) {
+      const version = msg.versions.find(v => v.id === versionId)
+      if (version) {
+        version.content = currentContent
+      }
+    }
+
+    await new Promise(resolve =>
+      setTimeout(resolve, Math.random() * 50 + 25),
+    )
+  }
+
+  // Mark content as complete
+  const msg = messages.value.find(m => m.key === messageKey)
+  if (msg) {
+    msg.isContentComplete = true
+  }
+}
+
+async function streamMessageResponse(messageKey: string, versionId: string, content: string, reasoning?: { content: string, duration: number }) {
+  status.value = 'streaming'
+  streamingMessageId.value = versionId
+
+  // First stream the reasoning if it exists
+  if (reasoning) {
+    await streamReasoning(messageKey, versionId, reasoning.content)
+    await new Promise(resolve => setTimeout(resolve, 500)) // Pause between reasoning and content
+  }
+
+  // Then stream the content
+  await streamContent(messageKey, versionId, content)
+
+  status.value = 'ready'
+  streamingMessageId.value = null
+}
+
+async function streamMessage(message: MessageType) {
+  if (message.from === 'user') {
+    messages.value.push(message)
+    return
+  }
+
+  // Add empty assistant message with reasoning structure
+  const newMessage: MessageType = {
+    ...message,
+    versions: message.versions.map(v => ({ ...v, content: '' })),
+    reasoning: message.reasoning
+      ? { ...message.reasoning, content: '' }
+      : undefined,
+    isReasoningComplete: false,
+    isContentComplete: false,
+    isReasoningStreaming: !!message.reasoning,
+  }
+
+  messages.value.push(newMessage)
+
+  // Get the first version for streaming
+  const firstVersion = message.versions[0]
+  if (!firstVersion)
+    return
+
+  // Stream the response
+  await streamMessageResponse(
+    newMessage.key,
+    firstVersion.id,
+    firstVersion.content,
+    message.reasoning,
+  )
+}
+
+function addUserMessage(content: string) {
+  const userMessage: MessageType = {
+    key: `user-${Date.now()}`,
+    from: 'user',
+    versions: [
+      {
+        id: `user-${Date.now()}`,
+        content,
+      },
+    ],
+  }
+
+  messages.value.push(userMessage)
+
+  setTimeout(() => {
+    const assistantMessageKey = `assistant-${Date.now()}`
+    const assistantMessageId = `version-${Date.now()}`
+    const randomMessageResponse
+      = mockMessageResponses[Math.floor(Math.random() * mockMessageResponses.length)]
+
+    // Create reasoning for some responses
+    const shouldHaveReasoning = Math.random() > 0.5
+    const reasoning = shouldHaveReasoning
+      ? {
+          content:
+            'Let me think about this question carefully. I need to provide a comprehensive and helpful response that addresses the user\'s needs while being clear and concise.',
+          duration: 3,
+        }
+      : undefined
+
+    const assistantMessage: MessageType = {
+      key: assistantMessageKey,
+      from: 'assistant',
+      versions: [
+        {
+          id: assistantMessageId,
+          content: '',
+        },
+      ],
+      reasoning: reasoning ? { ...reasoning, content: '' } : undefined,
+      isReasoningComplete: false,
+      isContentComplete: false,
+      isReasoningStreaming: !!reasoning,
+    }
+
+    messages.value.push(assistantMessage)
+    streamMessageResponse(
+      assistantMessageKey,
+      assistantMessageId,
+      randomMessageResponse,
+      reasoning,
+    )
+  }, 500)
+}
+
+function handleSubmit(message: PromptInputMessage) {
+  const hasText = Boolean(message.text)
+  const hasAttachments = Boolean(message.files?.length)
+
+  if (!(hasText || hasAttachments)) {
+    return
+  }
+
+  status.value = 'submitted'
+  addUserMessage(message.text || 'Sent with attachments')
+  text.value = ''
+}
+
+function handleFileAction(action: string) {
+  console.log('hello')
+  toast.success('File action', {
+    description: action,
+  })
+}
+
+function handleSuggestionClick(suggestion: string) {
+  status.value = 'submitted'
+  addUserMessage(suggestion)
+}
+
+let initTimer: any
+
+onMounted(() => {
+  // Reset state on mount to ensure fresh component
+  messages.value = []
+
+  const processMessages = async () => {
+    for (let i = 0; i < mockMessages.length; i++) {
+      await streamMessage(mockMessages[i])
+
+      if (i < mockMessages.length - 1) {
+        await new Promise(resolve => setTimeout(resolve, 1000))
+      }
+    }
+  }
+
+  // Small delay to ensure state is reset before starting
+  initTimer = setTimeout(() => {
+    processMessages()
+  }, 100)
+})
+
+onUnmounted(() => {
+  clearTimeout(initTimer)
+})
+</script>
+
+<template>
+  <div class="relative flex size-full flex-col divide-y overflow-hidden">
+    <div class="h-[498px] overflow-y-scroll">
+      <Conversation>
+        <ConversationContent>
+          <template v-for="message in messages" :key="message.key">
+            <MessageBranch :default-branch="0">
+              <MessageBranchContent>
+                <template v-for="version in message.versions" :key="`${message.key}-${version.id}`">
+                  <Message :from="message.from">
+                    <div>
+                      <Sources v-if="message.sources?.length">
+                        <SourcesTrigger :count="message.sources.length" />
+                        <SourcesContent>
+                          <Source
+                            v-for="source in message.sources"
+                            :key="source.href"
+                            :href="source.href"
+                            :title="source.title"
+                          />
+                        </SourcesContent>
+                      </Sources>
+
+                      <Reasoning
+                        v-if="message.reasoning"
+                        :duration="message.reasoning.duration"
+                        :is-streaming="message.isReasoningStreaming"
+                      >
+                        <ReasoningTrigger />
+                        <ReasoningContent :content="message.reasoning.content" />
+                      </Reasoning>
+
+                      <MessageContent
+                        v-if="message.from === 'user' || message.isReasoningComplete || !message.reasoning"
+                        :class="cn(
+                          'group-[.is-user]:rounded-[24px] group-[.is-user]:bg-secondary group-[.is-user]:text-foreground',
+                          'group-[.is-assistant]:bg-transparent group-[.is-assistant]:p-0 group-[.is-assistant]:text-foreground',
+                        )"
+                      >
+                        <MessageResponse>{{ version.content }}</MessageResponse>
+                      </MessageContent>
+                    </div>
+                  </Message>
+                </template>
+              </MessageBranchContent>
+
+              <MessageBranchSelector
+                v-if="message.versions.length > 1"
+                class="px-0"
+                :from="message.from"
+              >
+                <MessageBranchPrevious />
+                <MessageBranchPage />
+                <MessageBranchNext />
+              </MessageBranchSelector>
+            </MessageBranch>
+          </template>
+        </ConversationContent>
+        <ConversationScrollButton />
+      </Conversation>
+    </div>
+
+    <div class="grid shrink-0 gap-4 p-4">
+      <PromptInput
+        class="divide-y-0 rounded-[28px]"
+        @submit="handleSubmit"
+      >
+        <PromptInputTextarea
+          v-model="text"
+          class="px-5 md:text-base"
+          placeholder="Ask anything"
+        />
+
+        <PromptInputFooter class="p-2.5">
+          <PromptInputTools>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <PromptInputButton
+                  class="!rounded-full border font-medium"
+                  variant="outline"
+                >
+                  <PaperclipIcon :size="16" />
+                  <span>Attach</span>
+                </PromptInputButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem @click="handleFileAction('upload-file')">
+                  <FileIcon class="mr-2" :size="16" />
+                  Upload file
+                </DropdownMenuItem>
+                <DropdownMenuItem @click="handleFileAction('upload-photo')">
+                  <ImageIcon class="mr-2" :size="16" />
+                  Upload photo
+                </DropdownMenuItem>
+                <DropdownMenuItem @click="handleFileAction('take-screenshot')">
+                  <ScreenShareIcon class="mr-2" :size="16" />
+                  Take screenshot
+                </DropdownMenuItem>
+                <DropdownMenuItem @click="handleFileAction('take-photo')">
+                  <CameraIcon class="mr-2" :size="16" />
+                  Take photo
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <PromptInputButton
+              class="rounded-full border font-medium"
+              variant="outline"
+              @click="useWebSearch = !useWebSearch"
+            >
+              <GlobeIcon :size="16" />
+              <span>Search</span>
+            </PromptInputButton>
+          </PromptInputTools>
+
+          <PromptInputButton
+            class="rounded-full font-medium text-foreground"
+            variant="secondary"
+            @click="useMicrophone = !useMicrophone"
+          >
+            <AudioWaveformIcon :size="16" />
+            <span>Voice</span>
+          </PromptInputButton>
+        </PromptInputFooter>
+      </PromptInput>
+
+      <Suggestions class="px-4">
+        <Suggestion
+          v-for="item in suggestions"
+          :key="item.text"
+          class="font-normal"
+          :suggestion="item.text"
+          @click="handleSuggestionClick(item.text)"
+        >
+          <component
+            :is="item.icon"
+            v-if="item.icon"
+            :size="16"
+            :style="{ color: item.color }"
+          />
+          {{ item.text }}
+        </Suggestion>
+      </Suggestions>
+    </div>
+  </div>
+</template>
diff --git a/packages/examples/src/demo-claude.vue b/packages/examples/src/demo-claude.vue
new file mode 100644
index 0000000..413530c
--- /dev/null
+++ b/packages/examples/src/demo-claude.vue
@@ -0,0 +1,682 @@
+<script setup lang="ts">
+import type { PromptInputMessage } from '@repo/elements/prompt-input'
+import type { ToolUIPart } from 'ai'
+import {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+} from '@repo/elements/conversation'
+import {
+  Message,
+  MessageBranch,
+  MessageBranchContent,
+  MessageBranchNext,
+  MessageBranchPage,
+  MessageBranchPrevious,
+  MessageBranchSelector,
+  MessageContent,
+  MessageResponse,
+} from '@repo/elements/message'
+import {
+  ModelSelector,
+  ModelSelectorContent,
+  ModelSelectorEmpty,
+  ModelSelectorGroup,
+  ModelSelectorInput,
+  ModelSelectorItem,
+  ModelSelectorList,
+  ModelSelectorLogo,
+  ModelSelectorLogoGroup,
+  ModelSelectorName,
+  ModelSelectorTrigger,
+} from '@repo/elements/model-selector'
+import {
+  PromptInput,
+  PromptInputButton,
+  PromptInputFooter,
+
+  PromptInputSubmit,
+  PromptInputTextarea,
+  PromptInputTools,
+} from '@repo/elements/prompt-input'
+import {
+  Reasoning,
+  ReasoningContent,
+  ReasoningTrigger,
+} from '@repo/elements/reasoning'
+import {
+  Source,
+  Sources,
+  SourcesContent,
+  SourcesTrigger,
+} from '@repo/elements/sources'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@repo/shadcn-vue/components/ui/dropdown-menu'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import {
+  ArrowUpIcon,
+  CameraIcon,
+  CheckIcon,
+  FileIcon,
+  ImageIcon,
+  PlusIcon,
+  ScreenShareIcon,
+  Settings2Icon,
+} from 'lucide-vue-next'
+import { nanoid } from 'nanoid'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { toast } from 'vue-sonner'
+
+// --- Types ---
+interface MessageType {
+  key: string
+  from: 'user' | 'assistant'
+  sources?: { href: string, title: string }[]
+  versions: {
+    id: string
+    content: string
+  }[]
+  reasoning?: {
+    content: string
+    duration: number
+  }
+  tools?: {
+    name: string
+    description: string
+    status: ToolUIPart['state']
+    parameters: Record<string, unknown>
+    result: string | undefined
+    error: string | undefined
+  }[]
+  isReasoningComplete?: boolean
+  isContentComplete?: boolean
+  isReasoningStreaming?: boolean
+}
+
+// --- Mock Data ---
+const mockMessages: MessageType[] = [
+  {
+    key: nanoid(),
+    from: 'user',
+    versions: [
+      {
+        id: nanoid(),
+        content: 'Can you explain how to use React hooks effectively?',
+      },
+    ],
+  },
+  {
+    key: nanoid(),
+    from: 'assistant',
+    sources: [
+      {
+        href: 'https://react.dev/reference/react',
+        title: 'React Documentation',
+      },
+      {
+        href: 'https://react.dev/reference/react-dom',
+        title: 'React DOM Documentation',
+      },
+    ],
+    tools: [
+      {
+        name: 'mcp',
+        description: 'Searching React documentation',
+        status: 'input-available' as ToolUIPart['state'],
+        parameters: {
+          query: 'React hooks best practices',
+          source: 'react.dev',
+        },
+        result: `{
+  "query": "React hooks best practices",
+  "results": [
+    {
+      "title": "Rules of Hooks",
+      "url": "https://react.dev/warnings/invalid-hook-call-warning",
+      "snippet": "Hooks must be called at the top level of your React function components or custom hooks. Don't call hooks inside loops, conditions, or nested functions."
+    },
+    {
+      "title": "useState Hook",
+      "url": "https://react.dev/reference/react/useState",
+      "snippet": "useState is a React Hook that lets you add state to your function components. It returns an array with two values: the current state and a function to update it."
+    },
+    {
+      "title": "useEffect Hook",
+      "url": "https://react.dev/reference/react/useEffect",
+      "snippet": "useEffect lets you synchronize a component with external systems. It runs after render and can be used to perform side effects like data fetching."
+    }
+  ]
+}`,
+        error: undefined,
+      },
+    ],
+    versions: [
+      {
+        id: nanoid(),
+        content: `# React Hooks Best Practices
+
+React hooks are a powerful feature that let you use state and other React features without writing classes. Here are some tips for using them effectively:
+
+## Rules of Hooks
+
+1. **Only call hooks at the top level** of your component or custom hooks
+2. **Don't call hooks inside loops, conditions, or nested functions**
+
+## Common Hooks
+
+- **useState**: For local component state
+- **useEffect**: For side effects like data fetching
+- **useContext**: For consuming context
+- **useReducer**: For complex state logic
+- **useCallback**: For memoizing functions
+- **useMemo**: For memoizing values
+
+## Example of useState and useEffect
+
+\`\`\`jsx
+function ProfilePage({ userId }) {
+  const [user, setUser] = useState(null);
+  
+  useEffect(() => {
+    // This runs after render and when userId changes
+    fetchUser(userId).then(userData => {
+      setUser(userData);
+    });
+  }, [userId]);
+  
+  return user ? <Profile user={user} /> : <Loading />;
+}
+\`\`\`
+
+Would you like me to explain any specific hook in more detail?`,
+      },
+    ],
+  },
+  {
+    key: nanoid(),
+    from: 'user',
+    versions: [
+      {
+        id: nanoid(),
+        content:
+          'Yes, could you explain useCallback and useMemo in more detail? When should I use one over the other?',
+      },
+      {
+        id: nanoid(),
+        content:
+          'I\'m particularly interested in understanding the performance implications of useCallback and useMemo. Could you break down when each is most appropriate?',
+      },
+      {
+        id: nanoid(),
+        content:
+          'Thanks for the overview! Could you dive deeper into the specific use cases where useCallback and useMemo make the biggest difference in React applications?',
+      },
+    ],
+  },
+  {
+    key: nanoid(),
+    from: 'assistant',
+    reasoning: {
+      content: `The user is asking for a detailed explanation of useCallback and useMemo. I should provide a clear and concise explanation of each hook's purpose and how they differ.
+      
+The useCallback hook is used to memoize functions to prevent unnecessary re-renders of child components that receive functions as props.
+
+The useMemo hook is used to memoize values to avoid expensive recalculations on every render.
+
+Both hooks help with performance optimization, but they serve different purposes.`,
+      duration: 10,
+    },
+    versions: [
+      {
+        id: nanoid(),
+        content: `## useCallback vs useMemo
+
+Both hooks help with _performance optimization_, but they serve different purposes:
+
+### useCallback
+
+\`useCallback\` memoizes **functions** to prevent unnecessary re-renders of child components that receive functions as props.
+
+\`\`\`jsx
+// Without useCallback - a new function is created on every render
+const handleClick = () => {
+  console.log(count);
+};
+
+// With useCallback - the function is only recreated when dependencies change
+const handleClick = useCallback(() => {
+  console.log(count);
+}, [count]);
+\`\`\`
+
+### useMemo
+
+\`useMemo\` memoizes __values__ to avoid expensive recalculations on every render.
+
+\`\`\`jsx
+// Without useMemo - expensive calculation runs on every render
+const sortedList = expensiveSort(items);
+
+// With useMemo - calculation only runs when items change
+const sortedList = useMemo(() => expensiveSort(items), [items]);
+\`\`\`
+
+### When to use which?
+
+- Use **useCallback** when:
+  - Passing callbacks to optimized child components that rely on reference equality
+  - Working with event handlers that you pass to child components
+
+- Use **useMemo** when:
+  - You have computationally expensive calculations
+  - You want to avoid recreating objects that are used as dependencies for other hooks
+
+### Performance Note
+
+Don't overuse these hooks! They come with their own overhead. Only use them when you have identified a genuine performance issue.
+
+### ~~Common Mistakes~~
+
+Avoid these ~~anti-patterns~~ when using hooks:
+- ~~Calling hooks conditionally~~ - Always call hooks at the top level
+- Using \`useEffect\` without proper dependency arrays`,
+      },
+    ],
+  },
+]
+
+const models = [
+  {
+    id: 'claude-opus-4-20250514',
+    name: 'Claude 4 Opus',
+    chef: 'Anthropic',
+    chefSlug: 'anthropic',
+    providers: ['anthropic', 'azure', 'google', 'amazon-bedrock'],
+  },
+  {
+    id: 'claude-sonnet-4-20250514',
+    name: 'Claude 4 Sonnet',
+    chef: 'Anthropic',
+    chefSlug: 'anthropic',
+    providers: ['anthropic', 'azure', 'google', 'amazon-bedrock'],
+  },
+  {
+    id: 'claude-3-haiku',
+    name: 'Claude 3 Haiku',
+    chef: 'Anthropic',
+    chefSlug: 'anthropic',
+    providers: ['anthropic', 'azure', 'google', 'amazon-bedrock'],
+  },
+]
+
+const mockMessageResponses = [
+  'That\'s a great question! Let me help you understand this concept better. The key thing to remember is that proper implementation requires careful consideration of the underlying principles.',
+  'I\'d be happy to explain this topic in detail. From my understanding, there are several important factors to consider when approaching this problem.',
+  'This is an interesting topic that comes up frequently. The solution typically involves understanding the core concepts and applying them in the right context.',
+  'Great choice of topic! This is something that many developers encounter. The approach I\'d suggest is to start with the fundamentals.',
+  'That\'s definitely worth exploring. From what I can see, the best way to handle this is to consider both the theoretical aspects and practical implementation details.',
+]
+
+// --- State ---
+const model = ref<string>(models[0].id)
+const modelSelectorOpen = ref(false)
+const text = ref<string>('')
+const status = ref<'submitted' | 'streaming' | 'ready' | 'error'>('ready')
+const messages = ref<MessageType[]>([])
+const streamingMessageId = ref<string | null>(null)
+
+const selectedModelData = computed(() => models.find(m => m.id === model.value))
+
+// --- Streaming Logic ---
+
+async function streamReasoning(messageKey: string, versionId: string, reasoningContent: string) {
+  const words = reasoningContent.split(' ')
+  let currentContent = ''
+
+  for (let i = 0; i < words.length; i++) {
+    currentContent += (i > 0 ? ' ' : '') + words[i]
+
+    // Vue Reactivity allows direct mutation
+    const msg = messages.value.find(m => m.key === messageKey)
+    if (msg && msg.reasoning) {
+      msg.reasoning.content = currentContent
+    }
+
+    await new Promise(resolve => setTimeout(resolve, Math.random() * 30 + 20))
+  }
+
+  const msg = messages.value.find(m => m.key === messageKey)
+  if (msg) {
+    msg.isReasoningComplete = true
+    msg.isReasoningStreaming = false
+  }
+}
+
+async function streamContent(messageKey: string, versionId: string, content: string) {
+  const words = content.split(' ')
+  let currentContent = ''
+
+  for (let i = 0; i < words.length; i++) {
+    currentContent += (i > 0 ? ' ' : '') + words[i]
+
+    const msg = messages.value.find(m => m.key === messageKey)
+    if (msg) {
+      const version = msg.versions.find(v => v.id === versionId)
+      if (version)
+        version.content = currentContent
+    }
+
+    await new Promise(resolve => setTimeout(resolve, Math.random() * 50 + 25))
+  }
+
+  const msg = messages.value.find(m => m.key === messageKey)
+  if (msg)
+    msg.isContentComplete = true
+}
+
+async function streamMessageResponse(messageKey: string, versionId: string, content: string, reasoning?: { content: string, duration: number }) {
+  status.value = 'streaming'
+  streamingMessageId.value = versionId
+
+  // Stream reasoning first
+  if (reasoning) {
+    await streamReasoning(messageKey, versionId, reasoning.content)
+    await new Promise(resolve => setTimeout(resolve, 500))
+  }
+
+  // Stream content
+  await streamContent(messageKey, versionId, content)
+
+  status.value = 'ready'
+  streamingMessageId.value = null
+}
+
+async function streamMessage(message: MessageType) {
+  if (message.from === 'user') {
+    messages.value.push(message)
+    return
+  }
+
+  // Prepare empty assistant message
+  const newMessage: MessageType = {
+    ...message,
+    versions: message.versions.map(v => ({ ...v, content: '' })),
+    reasoning: message.reasoning
+      ? { ...message.reasoning, content: '' }
+      : undefined,
+    isReasoningComplete: false,
+    isContentComplete: false,
+    isReasoningStreaming: !!message.reasoning,
+  }
+
+  messages.value.push(newMessage)
+
+  const firstVersion = message.versions[0]
+  if (!firstVersion)
+    return
+
+  await streamMessageResponse(
+    newMessage.key,
+    firstVersion.id,
+    firstVersion.content,
+    message.reasoning,
+  )
+}
+
+function addUserMessage(content: string) {
+  const userMessage: MessageType = {
+    key: `user-${Date.now()}`,
+    from: 'user',
+    versions: [{ id: `user-${Date.now()}`, content }],
+  }
+
+  messages.value.push(userMessage)
+
+  setTimeout(() => {
+    const assistantMessageKey = `assistant-${Date.now()}`
+    const assistantMessageId = `version-${Date.now()}`
+    const randomMessageResponse
+      = mockMessageResponses[Math.floor(Math.random() * mockMessageResponses.length)]
+
+    const shouldHaveReasoning = Math.random() > 0.5
+    const reasoning = shouldHaveReasoning
+      ? {
+          content:
+            'Let me think about this question carefully. I need to provide a comprehensive and helpful response.',
+          duration: 3,
+        }
+      : undefined
+
+    const assistantMessage: MessageType = {
+      key: assistantMessageKey,
+      from: 'assistant',
+      versions: [{ id: assistantMessageId, content: '' }],
+      reasoning: reasoning ? { ...reasoning, content: '' } : undefined,
+      isReasoningComplete: false,
+      isContentComplete: false,
+      isReasoningStreaming: !!reasoning,
+    }
+
+    messages.value.push(assistantMessage)
+    streamMessageResponse(
+      assistantMessageKey,
+      assistantMessageId,
+      randomMessageResponse,
+      reasoning,
+    )
+  }, 500)
+}
+
+function handleSubmit(message: PromptInputMessage) {
+  const hasText = Boolean(message.text)
+  const hasAttachments = Boolean(message.files?.length)
+
+  if (!(hasText || hasAttachments))
+    return
+
+  status.value = 'submitted'
+  addUserMessage(message.text || 'Sent with attachments')
+  text.value = ''
+}
+
+function handleFileAction(action: string) {
+  toast.success('File action', {
+    description: action,
+  })
+}
+
+// --- Lifecycle ---
+let initTimer: any
+
+onMounted(() => {
+  messages.value = []
+
+  const processMessages = async () => {
+    for (let i = 0; i < mockMessages.length; i++) {
+      await streamMessage(mockMessages[i])
+      if (i < mockMessages.length - 1) {
+        await new Promise(resolve => setTimeout(resolve, 1000))
+      }
+    }
+  }
+
+  initTimer = setTimeout(() => {
+    processMessages()
+  }, 100)
+})
+
+onUnmounted(() => {
+  clearTimeout(initTimer)
+})
+</script>
+
+<template>
+  <div class="relative flex size-full flex-col divide-y overflow-hidden bg-[#faf9f5] dark:bg-background">
+    <div class="h-[498px] overflow-y-scroll">
+      <Conversation>
+        <ConversationContent>
+          <template v-for="message in messages" :key="message.key">
+            <MessageBranch :default-branch="0">
+              <MessageBranchContent>
+                <template v-for="version in message.versions" :key="`${message.key}-${version.id}`">
+                  <Message
+                    class="flex-row-reverse"
+                    :from="message.from"
+                  >
+                    <div>
+                      <Sources v-if="message.sources?.length">
+                        <SourcesTrigger :count="message.sources.length" />
+                        <SourcesContent>
+                          <Source
+                            v-for="source in message.sources"
+                            :key="source.href"
+                            :href="source.href"
+                            :title="source.title"
+                          />
+                        </SourcesContent>
+                      </Sources>
+
+                      <Reasoning
+                        v-if="message.reasoning"
+                        :duration="message.reasoning.duration"
+                        :is-streaming="message.isReasoningStreaming"
+                      >
+                        <ReasoningTrigger />
+                        <ReasoningContent :content="message.reasoning.content" />
+                      </Reasoning>
+
+                      <MessageContent
+                        v-if="message.from === 'user' || message.isReasoningComplete || !message.reasoning"
+                        :class="cn(
+                          'group-[.is-user]:bg-[#f0eee6] group-[.is-user]:text-foreground dark:group-[.is-user]:bg-muted',
+                          'group-[.is-assistant]:bg-transparent group-[.is-assistant]:p-0 group-[.is-assistant]:font-serif group-[.is-assistant]:text-foreground',
+                        )"
+                      >
+                        <MessageResponse>{{ version.content }}</MessageResponse>
+                      </MessageContent>
+                    </div>
+                  </Message>
+                </template>
+              </MessageBranchContent>
+
+              <MessageBranchSelector
+                v-if="message.versions.length > 1"
+                :from="message.from"
+              >
+                <MessageBranchPrevious />
+                <MessageBranchPage />
+                <MessageBranchNext />
+              </MessageBranchSelector>
+            </MessageBranch>
+          </template>
+        </ConversationContent>
+        <ConversationScrollButton />
+      </Conversation>
+    </div>
+    <div class="grid shrink-0 gap-4 p-4">
+      <PromptInput
+        class="divide-y-0 bg-card overflow-hidden rounded-md"
+        @submit="handleSubmit"
+      >
+        <PromptInputTextarea
+          v-model="text"
+          class="md:text-base"
+          placeholder="Reply to Claude..."
+        />
+
+        <PromptInputFooter>
+          <PromptInputTools>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <PromptInputButton variant="outline">
+                  <PlusIcon :size="16" />
+                  <span class="sr-only">Add attachment</span>
+                </PromptInputButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem @click="handleFileAction('upload-file')">
+                  <FileIcon class="mr-2" :size="16" />
+                  Upload file
+                </DropdownMenuItem>
+                <DropdownMenuItem @click="handleFileAction('upload-photo')">
+                  <ImageIcon class="mr-2" :size="16" />
+                  Upload photo
+                </DropdownMenuItem>
+                <DropdownMenuItem @click="handleFileAction('take-screenshot')">
+                  <ScreenShareIcon class="mr-2" :size="16" />
+                  Take screenshot
+                </DropdownMenuItem>
+                <DropdownMenuItem @click="handleFileAction('take-photo')">
+                  <CameraIcon class="mr-2" :size="16" />
+                  Take photo
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <PromptInputButton variant="outline">
+              <Settings2Icon :size="16" />
+              <span class="sr-only">Settings</span>
+            </PromptInputButton>
+          </PromptInputTools>
+
+          <div class="flex items-center gap-2">
+            <ModelSelector v-model:open="modelSelectorOpen">
+              <ModelSelectorTrigger as-child>
+                <PromptInputButton class="font-serif">
+                  <ModelSelectorLogo
+                    v-if="selectedModelData?.chefSlug"
+                    :provider="selectedModelData.chefSlug"
+                  />
+                  <ModelSelectorName v-if="selectedModelData?.name">
+                    {{ selectedModelData.name }}
+                  </ModelSelectorName>
+                </PromptInputButton>
+              </ModelSelectorTrigger>
+              <ModelSelectorContent class="font-serif">
+                <ModelSelectorInput placeholder="Search models..." />
+                <ModelSelectorList>
+                  <ModelSelectorEmpty>No models found.</ModelSelectorEmpty>
+                  <ModelSelectorGroup heading="Anthropic">
+                    <ModelSelectorItem
+                      v-for="m in models"
+                      :key="m.id"
+                      :value="m.id"
+                      @select="() => {
+                        model = m.id;
+                        modelSelectorOpen = false;
+                      }"
+                    >
+                      <ModelSelectorLogo :provider="m.chefSlug" />
+                      <ModelSelectorName>{{ m.name }}</ModelSelectorName>
+                      <ModelSelectorLogoGroup>
+                        <ModelSelectorLogo
+                          v-for="provider in m.providers"
+                          :key="provider"
+                          :provider="provider"
+                        />
+                      </ModelSelectorLogoGroup>
+
+                      <CheckIcon v-if="model === m.id" class="ml-auto size-4" />
+                      <div v-else class="ml-auto size-4" />
+                    </ModelSelectorItem>
+                  </ModelSelectorGroup>
+                </ModelSelectorList>
+              </ModelSelectorContent>
+            </ModelSelector>
+
+            <PromptInputSubmit
+              class="bg-[#c96442]"
+              :disabled="!text.trim() || status === 'streaming'"
+              :status="status"
+            >
+              <ArrowUpIcon :size="16" />
+            </PromptInputSubmit>
+          </div>
+        </PromptInputFooter>
+      </PromptInput>
+    </div>
+  </div>
+</template>
diff --git a/packages/examples/src/demo-grok.vue b/packages/examples/src/demo-grok.vue
new file mode 100644
index 0000000..e38eacb
--- /dev/null
+++ b/packages/examples/src/demo-grok.vue
@@ -0,0 +1,751 @@
+<script setup lang="ts">
+import type { PromptInputMessage } from '@repo/elements/prompt-input'
+import type { ToolUIPart } from 'ai'
+import {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+} from '@repo/elements/conversation'
+
+import {
+  Message,
+  MessageBranch,
+  MessageBranchContent,
+  MessageBranchNext,
+  MessageBranchPage,
+  MessageBranchPrevious,
+  MessageBranchSelector,
+  MessageContent,
+  MessageResponse,
+} from '@repo/elements/message'
+import {
+  ModelSelector,
+  ModelSelectorContent,
+  ModelSelectorEmpty,
+  ModelSelectorGroup,
+  ModelSelectorInput,
+  ModelSelectorItem,
+  ModelSelectorList,
+  ModelSelectorLogo,
+  ModelSelectorLogoGroup,
+  ModelSelectorName,
+  ModelSelectorTrigger,
+} from '@repo/elements/model-selector'
+import {
+  PromptInput,
+  PromptInputButton,
+  PromptInputFooter,
+  PromptInputTextarea,
+  PromptInputTools,
+} from '@repo/elements/prompt-input'
+import {
+  Reasoning,
+  ReasoningContent,
+  ReasoningTrigger,
+} from '@repo/elements/reasoning'
+import {
+  Source,
+  Sources,
+  SourcesContent,
+  SourcesTrigger,
+} from '@repo/elements/sources'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@repo/shadcn-vue/components/ui/dropdown-menu'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import {
+  AudioWaveformIcon,
+  CameraIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  FileIcon,
+  ImageIcon,
+  LightbulbIcon,
+  PaperclipIcon,
+  ScreenShareIcon,
+  SearchIcon,
+} from 'lucide-vue-next'
+import { nanoid } from 'nanoid'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { toast } from 'vue-sonner'
+
+// ------------------ Types ------------------
+interface MessageType {
+  key: string
+  from: 'user' | 'assistant'
+  sources?: { href: string, title: string }[]
+  versions: {
+    id: string
+    content: string
+  }[]
+  reasoning?: {
+    content: string
+    duration: number
+  }
+  tools?: {
+    name: string
+    description: string
+    status: ToolUIPart['state']
+    parameters: Record<string, unknown>
+    result: string | undefined
+    error: string | undefined
+  }[]
+  isReasoningComplete?: boolean
+  isContentComplete?: boolean
+  isReasoningStreaming?: boolean
+}
+
+// ------------------ Mock data ------------------
+const models = [
+  {
+    id: 'grok-3',
+    name: 'Grok-3',
+    chef: 'xAI',
+    chefSlug: 'xai',
+    providers: ['xai'],
+  },
+  {
+    id: 'grok-2-1212',
+    name: 'Grok-2-1212',
+    chef: 'xAI',
+    chefSlug: 'xai',
+    providers: ['xai'],
+  },
+]
+
+const mockMessages: MessageType[] = [
+  {
+    key: nanoid(),
+    from: 'user',
+    versions: [
+      {
+        id: nanoid(),
+        content: 'Can you explain how to use React hooks effectively?',
+      },
+    ],
+  },
+  {
+    key: nanoid(),
+    from: 'assistant',
+    sources: [
+      {
+        href: 'https://react.dev/reference/react',
+        title: 'React Documentation',
+      },
+      {
+        href: 'https://react.dev/reference/react-dom',
+        title: 'React DOM Documentation',
+      },
+    ],
+    tools: [
+      {
+        name: 'mcp',
+        description: 'Searching React documentation',
+        status: 'input-available' as ToolUIPart['state'],
+        parameters: {
+          query: 'React hooks best practices',
+          source: 'react.dev',
+        },
+        result: `{
+  "query": "React hooks best practices",
+  "results": [
+    {
+      "title": "Rules of Hooks",
+      "url": "https://react.dev/warnings/invalid-hook-call-warning",
+      "snippet": "Hooks must be called at the top level of your React function components or custom hooks. Don't call hooks inside loops, conditions, or nested functions."
+    },
+    {
+      "title": "useState Hook",
+      "url": "https://react.dev/reference/react/useState",
+      "snippet": "useState is a React Hook that lets you add state to your function components. It returns an array with two values: the current state and a function to update it."
+    },
+    {
+      "title": "useEffect Hook",
+      "url": "https://react.dev/reference/react/useEffect",
+      "snippet": "useEffect lets you synchronize a component with external systems. It runs after render and can be used to perform side effects like data fetching."
+    }
+  ]
+}`,
+        error: undefined,
+      },
+    ],
+    versions: [
+      {
+        id: nanoid(),
+        content: `# React Hooks Best Practices
+
+React hooks are a powerful feature that let you use state and other React features without writing classes. Here are some tips for using them effectively:
+
+## Rules of Hooks
+
+1. **Only call hooks at the top level** of your component or custom hooks
+2. **Don't call hooks inside loops, conditions, or nested functions**
+
+## Common Hooks
+
+- **useState**: For local component state
+- **useEffect**: For side effects like data fetching
+- **useContext**: For consuming context
+- **useReducer**: For complex state logic
+- **useCallback**: For memoizing functions
+- **useMemo**: For memoizing values
+
+## Example of useState and useEffect
+
+\`\`\`jsx
+function ProfilePage({ userId }) {
+  const [user, setUser] = useState(null);
+  
+  useEffect(() => {
+    // This runs after render and when userId changes
+    fetchUser(userId).then(userData => {
+      setUser(userData);
+    });
+  }, [userId]);
+  
+  return user ? <Profile user={user} /> : <Loading />;
+}
+\`\`\`
+
+Would you like me to explain any specific hook in more detail?`,
+      },
+    ],
+  },
+  {
+    key: nanoid(),
+    from: 'user',
+    versions: [
+      {
+        id: nanoid(),
+        content:
+          'Yes, could you explain useCallback and useMemo in more detail? When should I use one over the other?',
+      },
+      {
+        id: nanoid(),
+        content:
+          'I\'m particularly interested in understanding the performance implications of useCallback and useMemo. Could you break down when each is most appropriate?',
+      },
+      {
+        id: nanoid(),
+        content:
+          'Thanks for the overview! Could you dive deeper into the specific use cases where useCallback and useMemo make the biggest difference in React applications?',
+      },
+    ],
+  },
+  {
+    key: nanoid(),
+    from: 'assistant',
+    reasoning: {
+      content: `The user is asking for a detailed explanation of useCallback and useMemo. I should provide a clear and concise explanation of each hook's purpose and how they differ.
+      
+The useCallback hook is used to memoize functions to prevent unnecessary re-renders of child components that receive functions as props.
+
+The useMemo hook is used to memoize values to avoid expensive recalculations on every render.
+
+Both hooks help with performance optimization, but they serve different purposes.`,
+      duration: 10,
+    },
+    versions: [
+      {
+        id: nanoid(),
+        content: `## useCallback vs useMemo
+
+Both hooks help with **performance optimization**, but they serve _different purposes_:
+
+### useCallback
+
+\`useCallback\` memoizes __functions__ to prevent unnecessary re-renders of child components that receive functions as props.
+
+\`\`\`jsx
+// Without useCallback - a new function is created on every render
+const handleClick = () => {
+  console.log(count);
+};
+
+// With useCallback - the function is only recreated when dependencies change
+const handleClick = useCallback(() => {
+  console.log(count);
+}, [count]);
+\`\`\`
+
+### useMemo
+
+\`useMemo\` memoizes *values* to avoid expensive recalculations on every render.
+
+\`\`\`jsx
+// Without useMemo - expensive calculation runs on every render
+const sortedList = expensiveSort(items);
+
+// With useMemo - calculation only runs when items change
+const sortedList = useMemo(() => expensiveSort(items), [items]);
+\`\`\`
+
+### When to use which?
+
+- Use **useCallback** when:
+  - Passing callbacks to optimized child components that rely on reference equality
+  - Working with event handlers that you pass to child components
+
+- Use **useMemo** when:
+  - You have computationally expensive calculations
+  - You want to avoid recreating objects that are used as dependencies for other hooks
+
+### Performance Note
+
+Don't overuse these hooks! They come with their own overhead. Only use them when you have identified a genuine performance issue.
+
+### ~~Legacy Patterns~~
+
+Remember that these ~~outdated approaches~~ should be avoided:
+- ~~Class components for simple state~~ - Use \`useState\` instead
+- ~~Manual event listener cleanup~~ - Let \`useEffect\` handle it`,
+      },
+    ],
+  },
+]
+
+const mockMessageResponses = [
+  'That\'s a great question! Let me help you understand this concept better. The key thing to remember is that proper implementation requires careful consideration of the underlying principles and best practices in the field.',
+  'I\'d be happy to explain this topic in detail. From my understanding, there are several important factors to consider when approaching this problem. Let me break it down step by step for you.',
+  'This is an interesting topic that comes up frequently. The solution typically involves understanding the core concepts and applying them in the right context. Here\'s what I recommend...',
+  'Great choice of topic! This is something that many developers encounter. The approach I\'d suggest is to start with the fundamentals and then build up to more complex scenarios.',
+  'That\'s definitely worth exploring. From what I can see, the best way to handle this is to consider both the theoretical aspects and practical implementation details.',
+]
+
+// ------------------ Reactive state ------------------
+const model = ref<string>(models[0].id)
+const modelSelectorOpen = ref(false)
+const text = ref<string>('')
+const useWebSearch = ref<boolean>(false)
+const useMicrophone = ref<boolean>(false)
+const status = ref<'submitted' | 'streaming' | 'ready' | 'error'>('ready')
+const messages = ref<MessageType[]>([])
+const streamingMessageId = ref<string | null>(null)
+
+const selectedModelData = computed(() => models.find(m => m.id === model.value))
+
+const timers: (number | NodeJS.Timeout)[] = []
+
+// ------------------ Streaming helpers ------------------
+function sleep(ms: number) {
+  return new Promise((resolve) => {
+    const t = window.setTimeout(resolve, ms)
+    timers.push(t)
+  })
+}
+
+async function streamReasoning(messageKey: string, versionId: string, reasoningContent: string) {
+  const words = reasoningContent.split(' ')
+  let currentContent = ''
+
+  for (let i = 0; i < words.length; i++) {
+    currentContent += (i > 0 ? ' ' : '') + words[i]
+
+    messages.value = messages.value.map((msg) => {
+      if (msg.key === messageKey) {
+        return {
+          ...msg,
+          reasoning: msg.reasoning ? { ...msg.reasoning, content: currentContent } : undefined,
+        }
+      }
+      return msg
+    })
+
+    await sleep(Math.random() * 30 + 20)
+  }
+
+  messages.value = messages.value.map((msg) => {
+    if (msg.key === messageKey) {
+      return {
+        ...msg,
+        isReasoningComplete: true,
+        isReasoningStreaming: false,
+      }
+    }
+    return msg
+  })
+}
+
+async function streamContent(messageKey: string, versionId: string, content: string) {
+  const words = content.split(' ')
+  let currentContent = ''
+
+  for (let i = 0; i < words.length; i++) {
+    currentContent += (i > 0 ? ' ' : '') + words[i]
+
+    messages.value = messages.value.map((msg) => {
+      if (msg.key === messageKey) {
+        return {
+          ...msg,
+          versions: msg.versions.map(v => (v.id === versionId ? { ...v, content: currentContent } : v)),
+        }
+      }
+      return msg
+    })
+
+    await sleep(Math.random() * 50 + 25)
+  }
+
+  messages.value = messages.value.map((msg) => {
+    if (msg.key === messageKey) {
+      return { ...msg, isContentComplete: true }
+    }
+    return msg
+  })
+}
+
+async function streamMessageResponse(
+  messageKey: string,
+  versionId: string,
+  content: string,
+  reasoning?: { content: string, duration: number },
+) {
+  status.value = 'streaming'
+  streamingMessageId.value = versionId
+
+  if (reasoning) {
+    await streamReasoning(messageKey, versionId, reasoning.content)
+    await sleep(500)
+  }
+
+  await streamContent(messageKey, versionId, content)
+
+  status.value = 'ready'
+  streamingMessageId.value = null
+}
+
+async function streamMessage(message: MessageType) {
+  if (message.from === 'user') {
+    messages.value = [...messages.value, message]
+    return
+  }
+
+  const newMessage: MessageType = {
+    ...message,
+    versions: message.versions.map(v => ({ ...v, content: '' })),
+    reasoning: message.reasoning ? { ...message.reasoning, content: '' } : undefined,
+    isReasoningComplete: false,
+    isContentComplete: false,
+    isReasoningStreaming: !!message.reasoning,
+  }
+
+  messages.value = [...messages.value, newMessage]
+
+  const firstVersion = message.versions[0]
+  if (!firstVersion)
+    return
+
+  await streamMessageResponse(newMessage.key, firstVersion.id, firstVersion.content, message.reasoning)
+}
+
+function addUserMessage(content: string) {
+  const userMessage: MessageType = {
+    key: `user-${Date.now()}`,
+    from: 'user',
+    versions: [
+      {
+        id: `user-${Date.now()}`,
+        content,
+      },
+    ],
+  }
+
+  messages.value = [...messages.value, userMessage]
+
+  const timer = setTimeout(() => {
+    const assistantMessageKey = `assistant-${Date.now()}`
+    const assistantMessageId = `version-${Date.now()}`
+    const randomMessageResponse = mockMessageResponses[Math.floor(Math.random() * mockMessageResponses.length)]
+
+    const shouldHaveReasoning = Math.random() > 0.5
+    const reasoning = shouldHaveReasoning
+      ? {
+          content:
+            'Let me think about this question carefully. I need to provide a comprehensive and helpful response that addresses the user\'s needs while being clear and concise.',
+          duration: 3,
+        }
+      : undefined
+
+    const assistantMessage: MessageType = {
+      key: assistantMessageKey,
+      from: 'assistant',
+      versions: [
+        {
+          id: assistantMessageId,
+          content: '',
+        },
+      ],
+      reasoning: reasoning ? { ...reasoning, content: '' } : undefined,
+      isReasoningComplete: false,
+      isContentComplete: false,
+      isReasoningStreaming: !!reasoning,
+    }
+
+    messages.value = [...messages.value, assistantMessage]
+    streamMessageResponse(
+      assistantMessageKey,
+      assistantMessageId,
+      randomMessageResponse,
+      reasoning,
+    )
+  }, 500)
+  timers.push(timer)
+}
+
+onMounted(() => {
+  messages.value = []
+
+  const processMessages = async () => {
+    for (let i = 0; i < mockMessages.length; i++) {
+      await streamMessage(mockMessages[i])
+
+      if (i < mockMessages.length - 1) {
+        await sleep(1000)
+      }
+    }
+  }
+
+  const timer = setTimeout(() => {
+    processMessages()
+  }, 100)
+  timers.push(timer)
+})
+
+onBeforeUnmount(() => {
+  timers.forEach(t => clearTimeout(t))
+  messages.value = []
+})
+
+function handleSubmit(message: PromptInputMessage) {
+  const hasText = !!message.text
+  const hasAttachments = !!message.files?.length
+
+  if (!hasText && !hasAttachments) {
+    return
+  }
+
+  status.value = 'submitted'
+  addUserMessage(message.text || 'Sent with attachments')
+  text.value = ''
+}
+
+function handleFileAction(action: string) {
+  toast.success('File action', {
+    description: action,
+  })
+}
+</script>
+
+<template>
+  <div class="relative flex size-full flex-col divide-y overflow-hidden bg-secondary">
+    <div class="h-[498px] overflow-y-scroll">
+      <Conversation>
+        <ConversationContent>
+          <template
+            v-for="message in messages"
+            :key="message.key"
+          >
+            <MessageBranch :default-branch="0">
+              <MessageBranchContent>
+                <template
+                  v-for="version in message.versions"
+                  :key="`${message.key}-${version.id}`"
+                >
+                  <Message :from="message.from">
+                    <div>
+                      <Sources v-if="message.sources?.length">
+                        <SourcesTrigger :count="message.sources.length" />
+                        <SourcesContent>
+                          <template
+                            v-for="source in message.sources"
+                            :key="source.href"
+                          >
+                            <Source
+                              :href="source.href"
+                              :title="source.title"
+                            />
+                          </template>
+                        </SourcesContent>
+                      </Sources>
+                      <Reasoning
+                        v-if="message.reasoning"
+                        :duration="message.reasoning.duration"
+                        :is-streaming="message.isReasoningStreaming"
+                      >
+                        <ReasoningTrigger />
+                        <ReasoningContent :content="message.reasoning.content" />
+                      </Reasoning>
+                      <MessageContent
+                        v-if="message.from === 'user' || message.isReasoningComplete || !message.reasoning"
+                        :class="cn(
+                          'group-[.is-user]:rounded-[24px] group-[.is-user]:rounded-br-sm group-[.is-user]:border group-[.is-user]:bg-background group-[.is-user]:text-foreground',
+                          'group-[.is-assistant]:bg-transparent group-[.is-assistant]:p-0 group-[.is-assistant]:text-foreground',
+                        )"
+                      >
+                        <MessageResponse :content="version.content" />
+                      </MessageContent>
+                    </div>
+                  </Message>
+                </template>
+              </MessageBranchContent>
+              <MessageBranchSelector
+                v-if="message.versions.length > 1"
+                class="px-0"
+                :from="message.from"
+              >
+                <MessageBranchPrevious />
+                <MessageBranchPage />
+                <MessageBranchNext />
+              </MessageBranchSelector>
+            </MessageBranch>
+          </template>
+        </ConversationContent>
+        <ConversationScrollButton />
+      </Conversation>
+    </div>
+    <div class="grid shrink-0 gap-4 p-4">
+      <PromptInput
+        class="divide-y-0 rounded-[28px]"
+        @submit="handleSubmit"
+      >
+        <PromptInputTextarea
+          v-model="text"
+          class="px-5 md:text-base"
+          placeholder="How can Grok help?"
+        />
+        <PromptInputFooter class="p-2.5">
+          <PromptInputTools>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <PromptInputButton
+                  class="!rounded-full border text-foreground"
+                  variant="outline"
+                >
+                  <PaperclipIcon :size="16" />
+                  <span class="sr-only">Attach</span>
+                </PromptInputButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem @click="handleFileAction('upload-file')">
+                  <FileIcon
+                    class="mr-2"
+                    :size="16"
+                  />
+                  Upload file
+                </DropdownMenuItem>
+                <DropdownMenuItem @click="handleFileAction('upload-photo')">
+                  <ImageIcon
+                    class="mr-2"
+                    :size="16"
+                  />
+                  Upload photo
+                </DropdownMenuItem>
+                <DropdownMenuItem @click="handleFileAction('take-screenshot')">
+                  <ScreenShareIcon
+                    class="mr-2"
+                    :size="16"
+                  />
+                  Take screenshot
+                </DropdownMenuItem>
+                <DropdownMenuItem @click="handleFileAction('take-photo')">
+                  <CameraIcon
+                    class="mr-2"
+                    :size="16"
+                  />
+                  Take photo
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <div class="flex items-center rounded-full border">
+              <PromptInputButton
+                class="!rounded-l-full text-foreground"
+                variant="ghost"
+                @click="useWebSearch = !useWebSearch"
+              >
+                <SearchIcon :size="16" />
+                <span>DeepSearch</span>
+              </PromptInputButton>
+              <div class="h-full w-px bg-border" />
+              <PromptInputButton
+                class="rounded-r-full"
+                size="icon-sm"
+                variant="ghost"
+              >
+                <ChevronDownIcon :size="16" />
+              </PromptInputButton>
+            </div>
+            <PromptInputButton
+              class="!rounded-full text-foreground"
+              variant="outline"
+            >
+              <LightbulbIcon :size="16" />
+              <span>Think</span>
+            </PromptInputButton>
+          </PromptInputTools>
+          <div class="flex items-center gap-2">
+            <ModelSelector v-model:open="modelSelectorOpen">
+              <ModelSelectorTrigger as-child>
+                <PromptInputButton>
+                  <ModelSelectorLogo
+                    v-if="selectedModelData?.chefSlug"
+                    :provider="selectedModelData.chefSlug"
+                  />
+                  <ModelSelectorName v-if="selectedModelData?.name">
+                    {{ selectedModelData.name }}
+                  </ModelSelectorName>
+                </PromptInputButton>
+              </ModelSelectorTrigger>
+              <ModelSelectorContent>
+                <ModelSelectorInput placeholder="Search models..." />
+                <ModelSelectorList>
+                  <ModelSelectorEmpty>No models found.</ModelSelectorEmpty>
+                  <ModelSelectorGroup heading="xAI">
+                    <template
+                      v-for="m in models"
+                      :key="m.id"
+                    >
+                      <ModelSelectorItem
+                        :value="m.id"
+                        @select="() => { model = m.id; modelSelectorOpen = false; }"
+                      >
+                        <ModelSelectorLogo :provider="m.chefSlug" />
+                        <ModelSelectorName>{{ m.name }}</ModelSelectorName>
+                        <ModelSelectorLogoGroup>
+                          <template
+                            v-for="provider in m.providers"
+                            :key="provider"
+                          >
+                            <ModelSelectorLogo :provider="provider" />
+                          </template>
+                        </ModelSelectorLogoGroup>
+                        <CheckIcon
+                          v-if="model === m.id"
+                          class="ml-auto size-4"
+                        />
+                        <div
+                          v-else
+                          class="ml-auto size-4"
+                        />
+                      </ModelSelectorItem>
+                    </template>
+                  </ModelSelectorGroup>
+                </ModelSelectorList>
+              </ModelSelectorContent>
+            </ModelSelector>
+            <PromptInputButton
+              class="rounded-full bg-foreground font-medium text-background"
+              variant="default"
+              @click="useMicrophone = !useMicrophone"
+            >
+              <AudioWaveformIcon :size="16" />
+              <span class="sr-only">Voice</span>
+            </PromptInputButton>
+          </div>
+        </PromptInputFooter>
+      </PromptInput>
+    </div>
+  </div>
+</template>
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index 4d1e205..a0caa75 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -9,6 +9,9 @@ export { default as ConfirmationRequest } from './confirmation-request.vue'
 export { default as Confirmation } from './confirmation.vue'
 export { default as Context } from './context.vue'
 export { default as Conversation } from './conversation.vue'
+export { default as ChatGPTExample } from './demo-chatgpt.vue'
+export { default as ClaudeExample } from './demo-claude.vue'
+export { default as GrokExample } from './demo-grok.vue'
 export { default as Image } from './image.vue'
 export { default as InlineCitation } from './inline-citation.vue'
 export { default as LoaderCustomStyling } from './loader-custom-styling.vue'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ec2245a..4c4ce50 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -199,6 +199,9 @@ importers:
       vue:
         specifier: ^3.5.22
         version: 3.5.22(typescript@5.9.3)
+      vue-sonner:
+        specifier: ^2.0.9
+        version: 2.0.9(@nuxt/kit@4.2.1(magicast@0.3.5))(@nuxt/schema@4.1.2)(nuxt@4.1.2(@parcel/watcher@2.5.1)(@types/node@24.6.2)(@vue/compiler-sfc@3.5.22)(db0@0.3.4)(eslint@9.37.0(jiti@2.6.1))(ioredis@5.8.0)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.4)(stylus@0.57.0)(terser@5.44.0)(typescript@5.9.3)(vite@7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(stylus@0.57.0)(terser@5.44.0)(yaml@2.8.1))(vue-tsc@3.1.0(typescript@5.9.3))(yaml@2.8.1))
     devDependencies:
       typescript:
         specifier: ^5.9.3
@@ -1343,84 +1346,72 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-arm64-gnu@0.87.0':
     resolution: {integrity: sha512-tf2Shom09AaSmu7U1hYYcEFF/cd+20HtmQ8eyGsRkqD5bqUj6lDu8TNSU9FWZ9tcZ83NzyFMwXZWHyeeIIbpxw==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-arm64-musl@0.78.0':
     resolution: {integrity: sha512-q4x8hLW9JyHVS+AtKSt6Z4W+S+fXSCARBnizzW9mtND47atRiJzChOInlZUBgQhyDy3KQFt51aKIEDJpwysoEw==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-minify/binding-linux-arm64-musl@0.87.0':
     resolution: {integrity: sha512-pgWeYfSprtpnJVea9Q5eI6Eo80lDGlMw2JdcSMXmShtBjEhBl6bvDNHlV+6kNfh7iT65y/uC6FR8utFrRghu8A==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-minify/binding-linux-riscv64-gnu@0.78.0':
     resolution: {integrity: sha512-ajBxhoqW04KUI/fWewBf71WB2xdjce9VgF9rbLfQOBgCeCcyHMh+VKYjxBuWQamWrcABqt8Z5OIiRth9qt6CIg==}
     engines: {node: '>=14.0.0'}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-riscv64-gnu@0.87.0':
     resolution: {integrity: sha512-O1QPczlT+lqNZVeKOdFxxL+s1RIlnixaJYFLrcqDcRyn82MGKLz7sAenBTFRQoIfLnSxtMGL6dqHOefYkQx7Cg==}
     engines: {node: '>=14.0.0'}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-s390x-gnu@0.78.0':
     resolution: {integrity: sha512-H6B+h4Q3w/AtAr7EWScvDevxPKQPlhijMmSiMYRMkbTYwJPlUsBXyVj39Atdd1BIjCx8rYGvGxl/PhxPkdCjXQ==}
     engines: {node: '>=14.0.0'}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-s390x-gnu@0.87.0':
     resolution: {integrity: sha512-tcwt3ZUWOKfNLXN2edxFVHMlIuPvbuyMaKmRopgljSCfFcNHWhfTNlxlvmECRNhuQ91EcGwte6F1dwoeMCNd7A==}
     engines: {node: '>=14.0.0'}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-x64-gnu@0.78.0':
     resolution: {integrity: sha512-5vSPG67PVTwrzSPbXLofJtdSlb/lWyn36WElonLwecAtZX7v7KDhX0aUHqKSBsQ0qnJaYnhv5o0uUHudNZwq8g==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-x64-gnu@0.87.0':
     resolution: {integrity: sha512-Xf4AXF14KXUzSnfgTcFLFSM0TykJhFw14+xwNvlAb6WdqXAKlMrz9joIAezc8dkW1NNscCVTsqBUPJ4RhvCM1Q==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-minify/binding-linux-x64-musl@0.78.0':
     resolution: {integrity: sha512-Iq7eeZkGFUbyo7zRrAIP6rNAH+lIft9VJQUbDhhnTIMJWLUZx9JkSmM+0NBRfxPeurxbzO3EToDZ2cCYtVEU0Q==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-minify/binding-linux-x64-musl@0.87.0':
     resolution: {integrity: sha512-LIqvpx9UihEW4n9QbEljDnfUdAWqhr6dRqmzSFwVAeLZRUECluLCDdsdwemrC/aZkvnisA4w0LFcFr3HmeTLJg==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-minify/binding-wasm32-wasi@0.78.0':
     resolution: {integrity: sha512-Bj2l/A6e32mZ2aPRDmlkDClMkbPe+dCWl4enPY+PCZNkhLLfLfcMFemCCWO44rdWCOCehWiP8Tr3QEe3yTR7kA==}
@@ -1605,168 +1596,144 @@ packages:
     engines: {node: '>=20.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-arm64-gnu@0.87.0':
     resolution: {integrity: sha512-fcnnsfcyLamJOMVKq+BQ8dasb8gRnZtNpCUfZhaEFAdXQ7J2RmZreFzlygcn80iti0V7c5LejcjHbF4IdK3GAw==}
     engines: {node: '>=20.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-arm64-gnu@0.93.0':
     resolution: {integrity: sha512-NoB7BJmwVGrcS/J5XXn362lBsIyeTqZF70rCFij3/XwQ2kcELfGMALY9AUulFYauLTY2AG4vcmctJQxn9Lj85g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-arm64-gnu@0.95.0':
     resolution: {integrity: sha512-0LzebARTU0ROfD6pDK4h1pFn+09meErCZ0MA2TaW08G72+GNneEsksPufOuI+9AxVSRa+jKE3fu0wavvhZgSkg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-arm64-musl@0.78.0':
     resolution: {integrity: sha512-VBdPB2N37A+M49zPV8ziiFywlgE3VX3AnR+zT1cIdQyKDoFM3uGPtjmtRe1qw6KhFF5YtxInzb0v3E3VkSdhuQ==}
     engines: {node: '>=20.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-parser/binding-linux-arm64-musl@0.87.0':
     resolution: {integrity: sha512-tBPkSPgRSSbmrje8CUovISi/Hj/tWjZJ3n/qnrjx2B+u86hWtwLsngtPDQa5d4seSyDaHSx6tNEUcH7+g5Ee0Q==}
     engines: {node: '>=20.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-parser/binding-linux-arm64-musl@0.93.0':
     resolution: {integrity: sha512-s+nraJJR9SuHsgsr42nbOBpAsaSAE6MhK7HGbz01svLJzDsk3Ylh9cbVUPLaS3gOlTq5WC6VjPBkQuInLo0hvQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-parser/binding-linux-arm64-musl@0.95.0':
     resolution: {integrity: sha512-Pvi1lGe/G+mJZ3hUojMP/aAHAzHA25AEtVr8/iuz7UV72t/15NOgJYr9kELMUMNjPqpr3vKUgXTFmTtAxp11Qw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-parser/binding-linux-riscv64-gnu@0.78.0':
     resolution: {integrity: sha512-743OajvLP/fJm2d2da4/vqLMfki6XxfXizbUfPzEAXJMH0vEjf63s4gf55SBuy6hpmXOdCW5k4L6AoS+E89qtw==}
     engines: {node: '>=20.0.0'}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-riscv64-gnu@0.87.0':
     resolution: {integrity: sha512-z4UKGM4wv2wEAQAlx2pBq6+pDJw5J/5oDEXqW6yBSLbWLjLDo4oagmRSE3+giOWteUa+0FVJ+ypq4iYxBkYSWg==}
     engines: {node: '>=20.0.0'}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-riscv64-gnu@0.93.0':
     resolution: {integrity: sha512-oNIQb/7HGxVNeVgtkoqNcDS1hjfxArLDuMI72V+Slp67yfBdxgvfmM2JSWE7kGR5gyiZQeTjRbG89VrRwPDtww==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-riscv64-gnu@0.95.0':
     resolution: {integrity: sha512-pUEVHIOVNDfhk4sTlLhn6mrNENhE4/dAwemxIfqpcSyBlYG0xYZND1F3jjR2yWY6DakXZ6VSuDbtiv1LPNlOLw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-s390x-gnu@0.78.0':
     resolution: {integrity: sha512-z3HVOr6F1PpKAxzwwG9NKfFmCCMMI8MbmxZ3l+UKKViFD9NlJYKx+Afye3SgHHTkYKEm3POgmmR4Aq3kKMP7sQ==}
     engines: {node: '>=20.0.0'}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-s390x-gnu@0.87.0':
     resolution: {integrity: sha512-6W1ENe/nZtr2TBnrEzmdGEraEAdZOiH3YoUNNeQWuqwLkmpoHTJJdclieToPe/l2IKJ4WL3FsSLSGHE8yt/OEg==}
     engines: {node: '>=20.0.0'}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-s390x-gnu@0.93.0':
     resolution: {integrity: sha512-YyzhzAoq5WpRtAGOngpJUu+4jKagSbknORejmpeW48vu8/+XjrVZFc/1Qe4i72EsPzLorDwCxWVkU8VftpM4iA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-s390x-gnu@0.95.0':
     resolution: {integrity: sha512-5+olaepHTE3J/+w7g0tr3nocvv5BKilAJnzj4L8tWBCLEZbL6olJcGVoldUO+3cgg1SO1xJywP5BuLhT0mDUDw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-gnu@0.78.0':
     resolution: {integrity: sha512-qJULpZeRsN0mfxasPh8EzzE7lsEEMEEtcprgw8QetB5l1Urz4gzKyeKdqs1vuxBl9o0s+WHSiowH2YqFMALs/g==}
     engines: {node: '>=20.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-gnu@0.87.0':
     resolution: {integrity: sha512-s3kB/Ii3X3IOZ27Iu7wx2zYkIcDO22Emu32SNC6kkUSy09dPBc1yaW14TnAkPMe/rvtuzR512JPWj3iGpl+Dng==}
     engines: {node: '>=20.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-gnu@0.93.0':
     resolution: {integrity: sha512-UMXsE6c0MIlvtqDe5t5K8qwC6HqNb3wmy8zKxONo42dIx0WAhVV9ydG2Xlznt1/RhD6nLLtHVaq4yWJXRjUxcg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-gnu@0.95.0':
     resolution: {integrity: sha512-8huzHlK/N98wrnYKxIcYsK8ZGBWomQchu/Mzi6m+CtbhjWOv9DmK0jQ2fUWImtluQVpTwS0uZT06d3g7XIkJrA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-musl@0.78.0':
     resolution: {integrity: sha512-ctEL662Oe9Gaqf/48lsVZzAMcAcXIWsddZy59kGH7592rJBaXxmQhkOnnVEeJF25k4JMbCCdYwGsgI7WtC+Fdg==}
     engines: {node: '>=20.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-parser/binding-linux-x64-musl@0.87.0':
     resolution: {integrity: sha512-3+M9hfrZSDi4+Uy4Ll3rtOuVG3IHDQlj027jgtmAAHJK1eqp4CQfC7rrwE+LFUqUwX+KD2GwlxR+eHyyEf5Gbg==}
     engines: {node: '>=20.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-parser/binding-linux-x64-musl@0.93.0':
     resolution: {integrity: sha512-0Vd0yFUq129VW+Cpcj/gJOqub4EMN5hUWnVk8UfAvUZ+lxZBFeXbYNI5483SLwzvw5umzlMmkKpYWw5OTwYFaA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-parser/binding-linux-x64-musl@0.95.0':
     resolution: {integrity: sha512-bWnrLfGDcx/fab0+UQnFbVFbiykof/btImbYf+cI2pU/1Egb2x+OKSmM5Qt0nEUiIpM5fgJmYXxTopybSZOKYA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-parser/binding-wasm32-wasi@0.78.0':
     resolution: {integrity: sha512-Pq0uT2CuN3J7Tv3KLuO7Sh4C7zTuqdJl0IDg3zB5keKx0BSbaEWewJL2CUNYUlG8txf+sMpUV+bkAIS5MEcKAw==}
@@ -1961,126 +1928,108 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-arm64-gnu@0.87.0':
     resolution: {integrity: sha512-BxFkIcso2V1+FCDoU+KctxvJzSQVSnEZ5EEQ8O3Up9EoFVQRnZ8ktXvqYj2Oqvc4IYPskLPsKUgc9gdK8wGhUg==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-arm64-gnu@0.95.0':
     resolution: {integrity: sha512-NLdrFuEHlmbiC1M1WESFV4luUcB/84GXi+cbnRXhgMjIW/CThRVJ989eTJy59QivkVlLcJSKTiKiKCt0O6TTlQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-arm64-musl@0.78.0':
     resolution: {integrity: sha512-dr9J1uRo6ssDtuqx7s9GeePEDXlQOf4jk8/Tke9x5PCSJim5goMebEoAikuPf0jMhMNc05Kow0eOPLX1EmwsFQ==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-transform/binding-linux-arm64-musl@0.87.0':
     resolution: {integrity: sha512-MZ1/TNaebhXK73j1UDfwyBFnAy0tT3n6otOkhlt1vlJwqboUS/D7E/XrCZmAuHIfVPxAXRPovkl7kfxLB43SKw==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-transform/binding-linux-arm64-musl@0.95.0':
     resolution: {integrity: sha512-GL0ffCPW8JlFI0/jeSgCY665yDdojHxA0pbYG+k8oEHOWCYZUZK9AXL+r0oerNEWYJ8CRB+L5Yq87ZtU/YUitw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-transform/binding-linux-riscv64-gnu@0.78.0':
     resolution: {integrity: sha512-ALNvBi1l+17moTS2BtVZRxR0D1BGyR7iddNUJkHxEegvNzHyGJTZ60b0IXdvpCTH+CKUNsM40KxCVdzHca6VJQ==}
     engines: {node: '>=14.0.0'}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-riscv64-gnu@0.87.0':
     resolution: {integrity: sha512-JCWE6n4Hicu0FVbvmLdH/dS8V6JykOUsbrbDYm6JwFlHr4eFTTlS2B+mh5KPOxcdeOlv/D/XRnvMJ6WGYs25EA==}
     engines: {node: '>=14.0.0'}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-riscv64-gnu@0.95.0':
     resolution: {integrity: sha512-tbH7LaClSmN3YFVo1UjMSe7D6gkb5f+CMIbj9i873UUZomVRmAjC4ygioObfzM+sj/tX0WoTXx5L1YOfQkHL6Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-s390x-gnu@0.78.0':
     resolution: {integrity: sha512-s0r4cz6zZqr7SqfoUinn27B/mp1aiFVUsbsI4vomc7DtZkLpBSnSOAomZBlb0OSLbR9n2YPXm1033XR5W+ezWg==}
     engines: {node: '>=14.0.0'}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-s390x-gnu@0.87.0':
     resolution: {integrity: sha512-n2NTgM+3PqFagJV9UXRDNOmYesF+TO9SF9FeHqwVmW893ayef9KK+vfWAAhvOYHXYaKWT5XoHd87ODD7nruyhw==}
     engines: {node: '>=14.0.0'}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-s390x-gnu@0.95.0':
     resolution: {integrity: sha512-8jMqiURWa0iTiPMg7BWaln89VdhhWzNlPyKM90NaFVVhBIKCr2UEhrQWdpBw/E9C8uWf/4VabBEhfPMK+0yS4w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-x64-gnu@0.78.0':
     resolution: {integrity: sha512-nH9y61/1oyCQfUjtKHEnnMPBJZOhH+G2QqSAD7sCH35Iz78UA+bKVjHnlfnhBedy1xWCNwlboNclaBTHYAgNeA==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-x64-gnu@0.87.0':
     resolution: {integrity: sha512-ZOKW3wx0bW2O7jGdOzr8DyLZqX2C36sXvJdsHj3IueZZ//d/NjLZqEiUKz+q0JlERHtCVKShQ5PLaCx7NpuqNg==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-x64-gnu@0.95.0':
     resolution: {integrity: sha512-D5ULJ2uWipsTgfvHIvqmnGkCtB3Fyt2ZN7APRjVO+wLr+HtmnaWddKsLdrRWX/m/6nQ2xQdoQekdJrokYK9LtQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-transform/binding-linux-x64-musl@0.78.0':
     resolution: {integrity: sha512-Yo+pmsW49QNo4F4RoqOhfRxN9851Td/nc93ESQbzav9vhriipPRvZRVusG5t126inAgjlprFbOet5TXSWKd92A==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-transform/binding-linux-x64-musl@0.87.0':
     resolution: {integrity: sha512-eIspx/JqkVMPK1CAYEOo2J8o49s4ZTf+32MSMUknIN2ZS1fvRmWS0D/xFFaLP/9UGhdrXRIPbn/iSYEA8JnV/g==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-transform/binding-linux-x64-musl@0.95.0':
     resolution: {integrity: sha512-DmCGU+FzRezES5wVAGVimZGzYIjMOapXbWpxuz8M8p3nMrfdBEQ5/tpwBp2vRlIohhABy4vhHJByl4c64ENCGQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-transform/binding-wasm32-wasi@0.78.0':
     resolution: {integrity: sha512-djA47tsuUwNPHqcxre+EMD/wBBaP+TP6kQt2ioC6XElRldHCEGBUsVidrS5rgN4O7SyKx/DuJ528locJKTDSPw==}
@@ -2162,42 +2111,36 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.1':
     resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.1':
     resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.1':
     resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.1':
     resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.1':
     resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-wasm@2.5.1':
     resolution: {integrity: sha512-RJxlQQLkaMMIuWRozy+z2vEqbaQlCuaCgVZIUCzQLYggY22LZbP5Y1+ia+FD724Ids9e+XIyOLXLrLgQSHIthw==}
@@ -2282,28 +2225,24 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@resvg/resvg-js-linux-arm64-musl@2.6.2':
     resolution: {integrity: sha512-3h3dLPWNgSsD4lQBJPb4f+kvdOSJHa5PjTYVsWHxLUzH4IFTJUAnmuWpw4KqyQ3NA5QCyhw4TWgxk3jRkQxEKg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@resvg/resvg-js-linux-x64-gnu@2.6.2':
     resolution: {integrity: sha512-IVUe+ckIerA7xMZ50duAZzwf1U7khQe2E0QpUxu5MBJNao5RqC0zwV/Zm965vw6D3gGFUl7j4m+oJjubBVoftw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@resvg/resvg-js-linux-x64-musl@2.6.2':
     resolution: {integrity: sha512-UOf83vqTzoYQO9SZ0fPl2ZIFtNIz/Rr/y+7X8XRX1ZnBYsQ/tTb+cj9TE+KHOdmlTFBxhYzVkP2lRByCzqi4jQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@resvg/resvg-js-win32-arm64-msvc@2.6.2':
     resolution: {integrity: sha512-7C/RSgCa+7vqZ7qAbItfiaAWhyRSoD4l4BQAbVDqRRsRgY+S+hgS3in0Rxr7IorKUpGE69X48q6/nOAuTJQxeQ==}
@@ -2452,67 +2391,56 @@ packages:
     resolution: {integrity: sha512-xRiOu9Of1FZ4SxVbB0iEDXc4ddIcjCv2aj03dmW8UrZIW7aIQ9jVJdLBIhxBI+MaTnGAKyvMwPwQnoOEvP7FgQ==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.52.4':
     resolution: {integrity: sha512-FbhM2p9TJAmEIEhIgzR4soUcsW49e9veAQCziwbR+XWB2zqJ12b4i/+hel9yLiD8pLncDH4fKIPIbt5238341Q==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.52.4':
     resolution: {integrity: sha512-4n4gVwhPHR9q/g8lKCyz0yuaD0MvDf7dV4f9tHt0C73Mp8h38UCtSCSE6R9iBlTbXlmA8CjpsZoujhszefqueg==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.52.4':
     resolution: {integrity: sha512-u0n17nGA0nvi/11gcZKsjkLj1QIpAuPFQbR48Subo7SmZJnGxDpspyw2kbpuoQnyK+9pwf3pAoEXerJs/8Mi9g==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.52.4':
     resolution: {integrity: sha512-0G2c2lpYtbTuXo8KEJkDkClE/+/2AFPdPAbmaHoE870foRFs4pBrDehilMcrSScrN/fB/1HTaWO4bqw+ewBzMQ==}
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.52.4':
     resolution: {integrity: sha512-teSACug1GyZHmPDv14VNbvZFX779UqWTsd7KtTM9JIZRDI5NUwYSIS30kzI8m06gOPB//jtpqlhmraQ68b5X2g==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.52.4':
     resolution: {integrity: sha512-/MOEW3aHjjs1p4Pw1Xk4+3egRevx8Ji9N6HUIA1Ifh8Q+cg9dremvFCUbOX2Zebz80BwJIgCBUemjqhU5XI5Eg==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.52.4':
     resolution: {integrity: sha512-1HHmsRyh845QDpEWzOFtMCph5Ts+9+yllCrREuBR/vg2RogAQGGBRC8lDPrPOMnrdOJ+mt1WLMOC2Kao/UwcvA==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.52.4':
     resolution: {integrity: sha512-seoeZp4L/6D1MUyjWkOMRU6/iLmCU2EjbMTyAG4oIOs1/I82Y5lTeaxW0KBfkUdHAWN7j25bpkt0rjnOgAcQcA==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.52.4':
     resolution: {integrity: sha512-Wi6AXf0k0L7E2gteNsNHUs7UMwCIhsCTs6+tqQ5GPwVRWMaflqGec4Sd8n6+FNFDw9vGcReqk2KzBDhCa1DLYg==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.52.4':
     resolution: {integrity: sha512-dtBZYjDmCQ9hW+WgEkaffvRRCKm767wWhxsFW3Lw86VXz/uJRuD438/XvbZT//B96Vs8oTA8Q4A0AfHbrxP9zw==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-openharmony-arm64@4.52.4':
     resolution: {integrity: sha512-1ox+GqgRWqaB1RnyZXL8PD6E5f7YyRUJYnCqKpNzxzP0TkaUh112NDrR9Tt+C8rJ4x5G9Mk8PQR3o7Ku2RKqKA==}
@@ -2658,28 +2586,24 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.14':
     resolution: {integrity: sha512-ISZjT44s59O8xKsPEIesiIydMG/sCXoMBCqsphDm/WcbnuWLxxb+GcvSIIA5NjUw6F8Tex7s5/LM2yDy8RqYBQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.14':
     resolution: {integrity: sha512-02c6JhLPJj10L2caH4U0zF8Hji4dOeahmuMl23stk0MU1wfd1OraE7rOloidSF8W5JTHkFdVo/O7uRUJJnUAJg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.14':
     resolution: {integrity: sha512-TNGeLiN1XS66kQhxHG/7wMeQDOoL0S33x9BgmydbrWAb9Qw0KYdd8o1ifx4HOGDWhVmJ+Ul+JQ7lyknQFilO3Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.14':
     resolution: {integrity: sha512-uZYAsaW/jS/IYkd6EWPJKW/NlPNSkWkBlaeVBi/WsFQNP05/bzkebUL8FH1pdsqx4f2fH/bWFcUABOM9nfiJkQ==}
@@ -5724,28 +5648,24 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.1:
     resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.1:
     resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.1:
     resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.1:
     resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}

From 9fa0c026830c35c5f9b9e16f13c4dc530c70e615 Mon Sep 17 00:00:00 2001
From: peoray <peoray@yahoo.com>
Date: Wed, 3 Dec 2025 01:32:11 +0100
Subject: [PATCH 2/3] chore(docs): add new usage and troubleshooting guides
 while removing the setup guide

---
 apps/www/content/1.overview/1.Introduction.md |  8 ++-
 apps/www/content/1.overview/2.setup.md        | 26 ---------
 .../1.overview/{3.usage.md => 2.usage.md}     | 28 ++++++----
 .../content/1.overview/3.troubleshooting.md   | 53 +++++++++++++++++++
 4 files changed, 78 insertions(+), 37 deletions(-)
 delete mode 100644 apps/www/content/1.overview/2.setup.md
 rename apps/www/content/1.overview/{3.usage.md => 2.usage.md} (64%)
 create mode 100644 apps/www/content/1.overview/3.troubleshooting.md

diff --git a/apps/www/content/1.overview/1.Introduction.md b/apps/www/content/1.overview/1.Introduction.md
index f8c53ae..a506075 100644
--- a/apps/www/content/1.overview/1.Introduction.md
+++ b/apps/www/content/1.overview/1.Introduction.md
@@ -1,6 +1,6 @@
 ---
 title: Introduction
-description: What is AI Elements and why you should use it.
+description: What is AI Elements Vue and why you should use it.
 icon: lucide:info
 ---
 
@@ -24,7 +24,7 @@ Installing AI Elements Vue is straightforward and can be done in a couple of way
 
 ## Quick Start
 
-Here are some basic examples of what you can achieve using components from AI Elements.
+Here are some basic examples of what you can achieve using components from AI Elements Vue.
 
 :::ElementsDemo
 :::
@@ -38,6 +38,10 @@ Before installing AI Elements, make sure your environment meets the following re
 - [shadcn-vue](https://shadcn-vue.com/) installed in your project. If you don't have it installed, running any install command will automatically install it for you.
 - We also highly recommend using the [AI Gateway](https://vercel.com/docs/ai-gateway) and adding `AI_GATEWAY_API_KEY` to your `env.local` so you don't have to use an API key from every provider. AI Gateway also gives $5 in usage per month so you can experiment with models. You can obtain an API key [here](https://vercel.com/d?to=%2F%5Bteam%5D%2F%7E%2Fai%2Fapi-keys&title=Get%20your%20AI%20Gateway%20key).
 
+  ::alert{type="info" icon="lucide:info"}
+    AI Elements is built targeting Vue 3 and Tailwind CSS 4.
+  ::
+
 ## Installing Components
 
 You can install AI Elements Vue components using either the AI Elements Vue CLI or the shadcn-vue CLI. Both achieve the same result: adding the selected component’s code and any needed dependencies to your project.
diff --git a/apps/www/content/1.overview/2.setup.md b/apps/www/content/1.overview/2.setup.md
deleted file mode 100644
index 82ea0c0..0000000
--- a/apps/www/content/1.overview/2.setup.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: Setup
-description:
-icon: lucide:play
----
-
-Installing AI Elements is straightforward and can be done in a couple of ways. You can use the dedicated CLI command for the fastest setup, or integrate via the standard shadcn-vue CLI if you’ve already adopted shadcn’s workflow.
-
-:pm-x{command="ai-elements-vue@latest"}
-
-## Prerequisites
-
-Before installing AI Elements, make sure your environment meets the following requirements:
-
-- [Node.js](https://nodejs.org/en/download/), version 18 or later
-- A [Vue.js](https://vuejs.org/) or [Nuxt.js](https://nuxt.com/) project with the [AI SDK](https://ai-sdk.dev/) installed.
-- [shadcn-vue](https://shadcn-vue.com/) installed in your project. In practice, this means you have already initialized shadcn-vue in your project (for example by running `npx shadcn-vue@latest init` and configuring Tailwind CSS). AI Elements currently supports only the CSS Variables mode of shadcn-vue for theming.
-- We also highly recommend using the [AI Gateway](https://vercel.com/docs/ai-gateway) and adding `AI_GATEWAY_API_KEY` to your `env.local` so you don't have to use an API key from every provider. AI Gateway also gives $5 in usage per month so you can experiment with models. You can obtain an API key [here](https://vercel.com/d?to=%2F%5Bteam%5D%2F%7E%2Fai%2Fapi-keys&title=Get%20your%20AI%20Gateway%20key).
-
-## Installing Components
-
-You can install AI Elements Vue components using either the AI Elements Vue CLI or the shadcn-vue CLI. Both achieve the same result: adding the selected component’s code and any needed dependencies to your project.
-
-The CLI will download the component’s code and integrate it into your project’s directory (usually under your components folder). By default, AI Elements components are added to the `@/components/ai-elements/` directory (or whatever folder you’ve configured in your shadcn-vue components settings).
-
-After running the command, you should see a confirmation in your terminal that the files were added. You can then proceed to use the component in your code.
diff --git a/apps/www/content/1.overview/3.usage.md b/apps/www/content/1.overview/2.usage.md
similarity index 64%
rename from apps/www/content/1.overview/3.usage.md
rename to apps/www/content/1.overview/2.usage.md
index 197cae6..19d0089 100644
--- a/apps/www/content/1.overview/3.usage.md
+++ b/apps/www/content/1.overview/2.usage.md
@@ -1,6 +1,6 @@
 ---
 title: Usage
-description:
+description: Learn how to use AI Elements Vue components in your application.
 icon: lucide:book
 ---
 
@@ -13,8 +13,7 @@ After installing AI Elements Vue components, you can use them in your applicatio
 ```vue [ConversationExample.vue]
 <script setup lang="ts">
 import { useChat } from '@ai-sdk/vue'
-import { Message, MessageContent } from '@/components/ai-elements/message'
-import { Response } from '@/components/ai-elements/response'
+import { Message, MessageContent, MessageResponse } from '@/components/ai-elements/message'
 
 const { messages } = useChat()
 </script>
@@ -22,21 +21,32 @@ const { messages } = useChat()
 <template>
   <div>
     <Message
-      v-for="(m, index) in messages"
+      v-for="(msg, index) in messages"
       :key="index"
-      :from="m.role"
+      :from="msg.role"
     >
       <MessageContent>
-        <Response v-for="(p, i) in m.parts" :key="i">
-          {{ p.type === 'text' ? p.text : '' }}
-        </Response>
+        <template
+          v-for="(part, i) in msg.parts"
+        >
+          <MessageResponse
+            v-if="part.type === 'text'"
+            :key="`${msg.role}-${i}`"
+          >
+            {{ part.text }}
+          </MessageResponse>
+        </template>
       </MessageContent>
     </Message>
   </div>
 </template>
 ```
 
-In the example above, we import the `Message` component from our AI Elements Vue directory and include it in a Vue SFC template. Then we compose it with `MessageContent` and `Response`. Since the code lives in your project, you can open and customize the component files directly.
+In the example above, we import the `Message` component from our AI Elements Vue directory and include it in a Vue SFC template. Then we compose it with `MessageContent` and `MessageResponse` subcomponents. You can style or configure the component just as you would if you wrote it yourself – since the code lives in your project, you can even open the component file to see how it works or make custom modifications.
+
+## Extensibility
+
+All AI Elements Vue components take as many primitive attributes as possible. For example, the `Message` component extends `HTMLAttributes`, so you can pass any props that a `div` supports. This makes it easy to extend the component with your own styles or functionality.
 
 ## Customization
 
diff --git a/apps/www/content/1.overview/3.troubleshooting.md b/apps/www/content/1.overview/3.troubleshooting.md
new file mode 100644
index 0000000..20e61ae
--- /dev/null
+++ b/apps/www/content/1.overview/3.troubleshooting.md
@@ -0,0 +1,53 @@
+---
+title: Troubleshooting
+description: What to do if you run into issues with AI Elements Vue.
+icon: lucide:wrench
+---
+
+## Why are my components not styled?
+
+Make sure your project is configured correctly for shadcn-vue in Tailwind 4 - this means having a `globals.css file that imports Tailwind and includes the shadcn-vue base styles.
+
+## I ran the AI Elements Vue CLI but nothing was added to my project
+
+Double-check that:
+
+- Your current working directory is the root of your project (where `package.json` lives).
+- Your `components.json` file (if using shadcn-vue style config) is set up correctly.
+- You’re using the latest version of the AI Elements Vue CLI:
+
+```sh [Terminal]
+npx ai-elements-vue@latest
+```
+
+If all else fails, feel free to open an [issue on GitHub](https://github.com/vuepont/ai-elements-vue/issues).
+
+## Theme switching doesn’t work — my app stays in light mode
+
+Ensure your app is using the same data-theme system that shadcn-vue and AI Elements Vue expect. The default implementation toggles a data-theme attribute on the `<html>` element. Make sure your tailwind.config.js is using class or data- selectors accordingly:
+
+## The component imports fail with “module not found”
+
+Check the file exists. If it does, make sure your `tsconfig.json` has a proper paths alias for @/ i.e.
+
+```json [tsconfig.json]
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}
+```
+
+## My AI coding assistant can't access AI Elements components
+
+1. Verify your config file syntax is valid JSON.
+2. Check that the file path is correct for your AI tool.
+3. Restart your coding assistant after making changes.
+4. Ensure you have a stable internet connection.
+
+## Still stuck?
+
+If none of these answers help, open an [issue on GitHub](https://github.com/vuepont/ai-elements-vue/issues) and someone will be happy to assist.

From 1fdf9fb1ebea7f48ba233188ab8cac10f18d1dda Mon Sep 17 00:00:00 2001
From: peoray <peoray@yahoo.com>
Date: Wed, 3 Dec 2025 04:17:26 +0100
Subject: [PATCH 3/3] chore(docs): update components documentation pages

---
 apps/www/components/layout/PrevNextButton.vue |  33 +++
 .../1.chatbot/chain-of-thought.md             |  56 +---
 .../3.components/1.chatbot/checkpoint.md      |   8 +-
 .../3.components/1.chatbot/confirmation.md    |  26 +-
 .../content/3.components/1.chatbot/context.md |  32 +--
 .../3.components/1.chatbot/conversation.md    |  18 +-
 .../3.components/1.chatbot/inline-citation.md | 243 ++++++++++++++----
 .../content/3.components/1.chatbot/message.md | 139 ++++++++--
 .../3.components/1.chatbot/model-selector.md  |  34 +--
 .../content/3.components/1.chatbot/plan.md    |  48 +---
 .../3.components/1.chatbot/prompt-input.md    |  88 +++----
 .../content/3.components/1.chatbot/queue.md   |  40 +--
 .../3.components/1.chatbot/reasoning.md       |  22 +-
 .../content/3.components/1.chatbot/shimmer.md |  24 +-
 .../content/3.components/1.chatbot/sources.md |  28 +-
 .../3.components/1.chatbot/suggestion.md      |  22 +-
 .../content/3.components/1.chatbot/task.md    |  39 +--
 .../content/3.components/1.chatbot/tool.md    |  20 +-
 .../content/3.components/2.workflow/canvas.md |   6 +-
 .../3.components/2.workflow/connection.md     |   6 +-
 .../3.components/2.workflow/controls.md       |   6 +-
 .../content/3.components/2.workflow/edge.md   |   6 +-
 .../content/3.components/2.workflow/node.md   |   6 +-
 .../content/3.components/2.workflow/panel.md  |   6 +-
 .../3.components/2.workflow/toolbar.md        |   6 +-
 .../3.components/3.vibe-coding/artifact.md    |   8 +-
 .../3.components/3.vibe-coding/web-preview.md |  26 +-
 .../4.documentation/open-in-chat.md           |  30 +--
 .../3.components/5.utilities/code-block.md    |  29 +--
 .../content/3.components/5.utilities/image.md | 119 ++++++++-
 .../3.components/5.utilities/loader.md        |  24 +-
 packages/examples/src/chain-of-thought.vue    |   2 +-
 32 files changed, 674 insertions(+), 526 deletions(-)
 create mode 100644 apps/www/components/layout/PrevNextButton.vue

diff --git a/apps/www/components/layout/PrevNextButton.vue b/apps/www/components/layout/PrevNextButton.vue
new file mode 100644
index 0000000..a7f0a0f
--- /dev/null
+++ b/apps/www/components/layout/PrevNextButton.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineProps<{
+  prevNext: any
+  side: 'left' | 'right'
+}>()
+</script>
+
+<template>
+  <NuxtLinkLocale
+    v-if="prevNext && prevNext._path"
+    :to="prevNext._path"
+    class="basis-1/3"
+  >
+    <div class="hover:bg-muted/50 mb-4 space-y-2 rounded-lg border p-4 transition-all">
+      <div class="flex flex-row gap-3">
+        <div v-if="side === 'left'" class="flex size-6 min-w-6">
+          <Icon name="lucide:arrow-left" size="20" class="mx-auto self-center" />
+        </div>
+        <span class="w-full space-y-2 self-center" :class="[side === 'left' ? 'text-left' : 'text-right']">
+          <div class="text-lg font-semibold">
+            {{ prevNext.title }}
+          </div>
+          <!-- <div v-if="prevNext.description" class="text-muted-foreground text-sm">
+            {{ prevNext.description }}
+          </div> -->
+        </span>
+        <div v-if="side === 'right'" class="ml-auto flex size-6 min-w-6">
+          <Icon name="lucide:arrow-right" size="20" class="mx-auto self-center" />
+        </div>
+      </div>
+    </div>
+  </NuxtLinkLocale>
+</template>
diff --git a/apps/www/content/3.components/1.chatbot/chain-of-thought.md b/apps/www/content/3.components/1.chatbot/chain-of-thought.md
index 0a3b676..618633c 100644
--- a/apps/www/content/3.components/1.chatbot/chain-of-thought.md
+++ b/apps/www/content/3.components/1.chatbot/chain-of-thought.md
@@ -1,6 +1,6 @@
 ---
 title: Chain of Thought
-description:
+description: A collapsible component that visualizes AI reasoning steps with support for search results, images, and step-by-step progress indicators.
 icon: lucide:brain
 ---
 
@@ -12,12 +12,12 @@ The `ChainOfThought` component provides a visual representation of an AI's reaso
 ## Install using CLI
 
 :::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add chain-of-thought
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/chain-of-thought.json
@@ -30,7 +30,7 @@ The `ChainOfThought` component provides a visual representation of an AI's reaso
 Copy and paste the following files into the same folder.
 
 :::code-group
-```vue [ChainOfThought.vue]
+```vue [ChainOfThought.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes, Ref } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -74,7 +74,7 @@ provide(ChainOfThoughtContextKey, isOpen as Ref<boolean>)
 </template>
 ```
 
-```vue [ChainOfThoughtHeader.vue]
+```vue [ChainOfThoughtHeader.vue] height=500 collapse
 <script setup lang="ts">
 import type { HtmlHTMLAttributes } from 'vue'
 import {
@@ -120,7 +120,7 @@ const { isOpen, setIsOpen } = useChainOfThought()
 </template>
 ```
 
-```vue [ChainOfThoughtStep.vue]
+```vue [ChainOfThoughtStep.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -224,7 +224,7 @@ const props = defineProps<{
 </template>
 ```
 
-```vue [ChainOfThoughtContent.vue]
+```vue [ChainOfThoughtContent.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import {
@@ -259,7 +259,7 @@ const { isOpen } = useChainOfThought()
 </template>
 ```
 
-```vue [ChainOfThoughtImage.vue]
+```vue [ChainOfThoughtImage.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -287,7 +287,6 @@ const props = defineProps<{
 </template>
 ```
 
-
 ```ts [context.ts]
 import type { InjectionKey, Ref } from 'vue'
 import { inject } from 'vue'
@@ -324,50 +323,15 @@ export { default as ChainOfThoughtStep } from './ChainOfThoughtStep.vue'
 ```
 :::
 
-## Usage
-
-```ts
-import {
-  ChainOfThought,
-  ChainOfThoughtContent,
-  ChainOfThoughtHeader,
-  ChainOfThoughtImage,
-  ChainOfThoughtSearchResult,
-  ChainOfThoughtSearchResults,
-  ChainOfThoughtStep,
-} from '@/components/ai-elements/chain-of-thought'
-```
-
-```vue
-<ChainOfThought defaultOpen>
-  <ChainOfThoughtHeader />
-  <ChainOfThoughtContent>
-    <ChainOfThoughtStep
-      label="Searching for information"
-      status="complete"
-    >
-     <template #icon>
-          <ImageIcon class="size-4" />
-        </template>
-      <ChainOfThoughtSearchResults>
-        <ChainOfThoughtSearchResult>
-          Result 1
-        </ChainOfThoughtSearchResult>
-      </ChainOfThoughtSearchResults>
-    </ChainOfThoughtStep>
-  </ChainOfThoughtContent>
-</ChainOfThought>
-```
-
 ## Features
 
-- Collapsible interface with smooth animations powered by Radix UI
+- Collapsible interface with smooth animations powered by Reka UI
 - Step-by-step visualization of AI reasoning process
 - Support for different step statuses (complete, active, pending)
 - Built-in search results display with badge styling
 - Image support with captions for visual content
 - Custom icons for different step types
-- Context-aware components using React Context API
+- Context-aware components using Inject/Provide API
 - Fully typed with TypeScript
 - Accessible with keyboard navigation support
 - Responsive design that adapts to different screen sizes
diff --git a/apps/www/content/3.components/1.chatbot/checkpoint.md b/apps/www/content/3.components/1.chatbot/checkpoint.md
index 74d74da..72b13ae 100644
--- a/apps/www/content/3.components/1.chatbot/checkpoint.md
+++ b/apps/www/content/3.components/1.chatbot/checkpoint.md
@@ -12,12 +12,12 @@ The `Checkpoint` component provides a way to mark specific points in a conversat
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add checkpoint
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/checkpoint.json
@@ -77,7 +77,7 @@ const slots = useSlots()
 </template>
 ```
 
-```vue [CheckpointTrigger.vue]
+```vue [CheckpointTrigger.vue] height=500 collapse
 <script lang="ts" setup>
 import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
@@ -146,7 +146,7 @@ Build a chat interface with conversation checkpoints that allow users to restore
 
 Add the following component to your frontend:
 
-```vue [pages/index.vue]
+```vue [pages/index.vue] height=500 collapse
 <script setup lang="ts">
 import { useChat } from '@ai-sdk/vue'
 import { nanoid } from 'nanoid'
diff --git a/apps/www/content/3.components/1.chatbot/confirmation.md b/apps/www/content/3.components/1.chatbot/confirmation.md
index 458ae37..ded293a 100644
--- a/apps/www/content/3.components/1.chatbot/confirmation.md
+++ b/apps/www/content/3.components/1.chatbot/confirmation.md
@@ -12,12 +12,12 @@ The `Confirmation` component provides a flexible system for displaying tool appr
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add confirmation
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/confirmation.json
@@ -30,7 +30,7 @@ The `Confirmation` component provides a flexible system for displaying tool appr
 Copy and paste the following code in the same folder.
 
 :::code-group
-```vue [Confirmation.vue] height=260 collapse
+```vue [Confirmation.vue] height=500 collapse
 <script setup lang="ts">
 import type { ToolUIPart } from 'ai'
 import type { HTMLAttributes } from 'vue'
@@ -63,7 +63,7 @@ provide(ConfirmationKey, {
 </template>
 ```
 
-```vue [ConfirmationTitle.vue] height=260 collapse
+```vue [ConfirmationTitle.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { AlertDescription } from '@repo/shadcn-vue/components/ui/alert'
@@ -84,7 +84,7 @@ const props = defineProps<{
 </template>
 ```
 
-```vue [ConfirmationRequest.vue] height=260 collapse
+```vue [ConfirmationRequest.vue]
 <script setup lang="ts">
 import { useConfirmationContext } from './context'
 
@@ -98,7 +98,7 @@ const { state } = useConfirmationContext()
 </template>
 ```
 
-```vue [ConfirmationAccepted.vue] height=260 collapse
+```vue [ConfirmationAccepted.vue]
 <script setup lang="ts">
 import { useConfirmationContext } from './context'
 
@@ -119,7 +119,7 @@ const { approval, state } = useConfirmationContext()
 </template>
 ```
 
-```vue [ConfirmationRejected.vue] height=260 collapse
+```vue [ConfirmationRejected.vue]
 <script setup lang="ts">
 import { useConfirmationContext } from './context'
 
@@ -140,7 +140,7 @@ const { approval, state } = useConfirmationContext()
 </template>
 ```
 
-```vue [ConfirmationActions.vue] height=260 collapse
+```vue [ConfirmationActions.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -166,7 +166,7 @@ const { state } = useConfirmationContext()
 </template>
 ```
 
-```vue [ConfirmationAction.vue] height=260 collapse
+```vue [ConfirmationAction.vue]
 <script setup lang="ts">
 import { Button } from '@repo/shadcn-vue/components/ui/button'
 </script>
@@ -178,7 +178,7 @@ import { Button } from '@repo/shadcn-vue/components/ui/button'
 </template>
 ```
 
-```ts [context.ts] height=260 collapse
+```ts [context.ts] height=500 collapse
 import type { ToolUIPart } from 'ai'
 import type { InjectionKey, Ref } from 'vue'
 import { inject } from 'vue'
@@ -244,7 +244,7 @@ Build a chat UI with tool approval workflow where dangerous tools require user c
 
 Add the following component to your frontend:
 
-```vue [pages/index.vue] height=260 collapse
+```vue [pages/index.vue] height=500 collapse
 <script setup lang="ts">
 import type { ToolUIPart } from 'ai'
 import { useChat } from '@ai-sdk/vue'
@@ -372,7 +372,7 @@ const deleteTool = computed(() => {
 
 Add the following route to your backend:
 
-```ts [api/chat/route.ts] height=260 collapse
+```ts [server/api/chat.ts] height=500 collapse
 import { convertToModelMessages, streamText, UIMessage } from 'ai'
 import { z } from 'zod'
 
@@ -426,7 +426,7 @@ export default defineEventHandler(async (event) => {
 - Context-based state management for approval workflow
 - Conditional rendering based on approval state
 - Support for approval-requested, approval-responded, output-denied, and output-available states
-- Built on shadcn/ui Alert and Button components
+- Built on shadcn-vue Alert and Button components
 - TypeScript support with comprehensive type definitions
 - Customizable styling with Tailwind CSS
 - Keyboard navigation and accessibility support
diff --git a/apps/www/content/3.components/1.chatbot/context.md b/apps/www/content/3.components/1.chatbot/context.md
index 4573569..cad7cd2 100644
--- a/apps/www/content/3.components/1.chatbot/context.md
+++ b/apps/www/content/3.components/1.chatbot/context.md
@@ -12,12 +12,12 @@ The `Context` component provides a comprehensive view of AI model usage through
 ## Install using CLI
 
 :::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add context
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/context.json
@@ -30,7 +30,7 @@ The `Context` component provides a comprehensive view of AI model usage through
 Copy and paste the following files into the same folder.
 
 :::code-group
-```vue [Context.vue] height=260 collapse
+```vue [Context.vue] height=500 collapse
 <script setup lang="ts">
 import type { LanguageModelUsage } from 'ai'
 import type { ModelId } from './context'
@@ -62,7 +62,7 @@ provide(ContextKey, {
 </template>
 ```
 
-```vue [ContextIcon.vue] height=260 collapse
+```vue [ContextIcon.vue] height=500 collapse
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useContextValue } from './context'
@@ -127,7 +127,7 @@ const svgStyle = {
 </template>
 ```
 
-```vue [ContextTrigger.vue] height=260 collapse
+```vue [ContextTrigger.vue] height=500 collapse
 <script setup lang="ts">
 import { Button } from '@repo/shadcn-vue/components/ui/button'
 import { HoverCardTrigger } from '@repo/shadcn-vue/components/ui/hover-card'
@@ -163,7 +163,7 @@ const renderedPercent = computed(() => {
 </template>
 ```
 
-```vue [ContextContent.vue] height=260 collapse
+```vue [ContextContent.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { HoverCardContent } from '@repo/shadcn-vue/components/ui/hover-card'
@@ -186,7 +186,7 @@ const props = defineProps<{
 </template>
 ```
 
-```vue [ContextContentHeader.vue] height=260 collapse
+```vue [ContextContentHeader.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { Progress } from '@repo/shadcn-vue/components/ui/progress'
@@ -239,7 +239,7 @@ const total = computed(() => formatter.format(maxTokens.value))
 </template>
 ```
 
-```vue [ContextContentBody.vue] height=260 collapse
+```vue [ContextContentBody.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -256,7 +256,7 @@ const props = defineProps<{
 </template>
 ```
 
-```vue [ContextContentFooter.vue] height=260 collapse
+```vue [ContextContentFooter.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -309,7 +309,7 @@ const totalCost = computed(() => {
 </template>
 ```
 
-```vue [ContextInputUsage.vue] height=260 collapse
+```vue [ContextInputUsage.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -359,7 +359,7 @@ const inputCostText = computed(() => {
 </template>
 ```
 
-```vue [ContextOutputUsage.vue] height=260 collapse
+```vue [ContextOutputUsage.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -408,7 +408,7 @@ const outputCostText = computed(() => {
 </template>
 ```
 
-```vue [ContextReasoningUsage.vue] height=260 collapse
+```vue [ContextReasoningUsage.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -460,7 +460,7 @@ const reasoningCostText = computed(() => {
 </template>
 ```
 
-```vue [ContextCacheUsage.vue] height=260 collapse
+```vue [ContextCacheUsage.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -509,7 +509,7 @@ const cacheCostText = computed(() => {
 </template>
 ```
 
-```vue [TokensWithCost.vue] height=260 collapse
+```vue [TokensWithCost.vue]
 <script setup lang="ts">
 import { computed } from 'vue'
 
@@ -537,7 +537,7 @@ const formattedTokens = computed(() => {
 </template>
 ```
 
-```ts [context.ts]  height=260 collapse
+```ts [context.ts]
 import type { LanguageModelUsage } from 'ai'
 import type { ComputedRef, InjectionKey } from 'vue'
 import { inject } from 'vue'
@@ -627,7 +627,7 @@ The component uses Tailwind CSS classes and follows your design system:
 - **Compound Component Architecture:** Flexible composition of context display elements
 - **Visual Progress Indicator:** Circular SVG progress ring showing context usage percentage
 - **Token Breakdown:** Detailed view of input, output, reasoning, and cached tokens
-- **Cost Estimation:** Real-time cost calculation using the tokenlens library
+- **Cost Estimation:** Real-time cost calculation using the `tokenlens` library
 - **Intelligent Formatting:** Automatic token count formatting (K, M, B suffixes)
 - **Interactive Hover Card:** Detailed information revealed on hover
 - **Context Provider Pattern:** Clean data flow through Vue’s `provide/inject` API
diff --git a/apps/www/content/3.components/1.chatbot/conversation.md b/apps/www/content/3.components/1.chatbot/conversation.md
index ca0f2d4..0cf3eea 100644
--- a/apps/www/content/3.components/1.chatbot/conversation.md
+++ b/apps/www/content/3.components/1.chatbot/conversation.md
@@ -6,18 +6,18 @@ icon: lucide:message-square
 
 The `Conversation` component wraps messages and automatically scrolls to the bottom. Also includes a scroll button that appears when not at the bottom.
 
-:::ComponentLoader{label="Conversation" componentName="Conversation"}
+:::ComponentLoader{label="Preview" componentName="Conversation"}
 :::
 
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add conversation
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/conversation.json
@@ -30,7 +30,7 @@ The `Conversation` component wraps messages and automatically scrolls to the bot
 Copy and paste the following code in the same folder.
 
 :::code-group
-```vue [Conversation.vue] height=300 collapse
+```vue [Conversation.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -74,7 +74,7 @@ const props = withDefaults(defineProps<Props>(), {
 </template>
 ```
 
-```vue [ConversationContent.vue] height=300 collapse
+```vue [ConversationContent.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { computed } from 'vue'
@@ -98,7 +98,7 @@ const classes = computed(() => [
 </template>
 ```
 
-```vue [ConversationEmptyState.vue] height=300 collapse
+```vue [ConversationEmptyState.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -141,7 +141,7 @@ const props = withDefaults(defineProps<Props>(), {
 </template>
 ```
 
-```vue [ConversationScrollButton.vue] height=300 collapse
+```vue [ConversationScrollButton.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
@@ -192,7 +192,7 @@ Build a simple conversational UI with `Conversation` and [`PromptInput`](/compon
 
 Add the following component to your frontend:
 
-```vue [pages/index.vue] height=300 collapse
+```vue [pages/index.vue] height=500 collapse
 <script setup lang="ts">
 import { useChat } from '@ai-sdk/vue'
 import { ref } from 'vue'
@@ -257,7 +257,7 @@ function handleSubmit(e: Event) {
 
 Add the following route to your backend:
 
-```ts [server/api/chat/route.ts]
+```ts [server/api/chat/route.ts] height=500 collapse
 import { convertToModelMessages, streamText, UIMessage } from 'ai'
 
 // Allow streaming responses up to 30 seconds
diff --git a/apps/www/content/3.components/1.chatbot/inline-citation.md b/apps/www/content/3.components/1.chatbot/inline-citation.md
index eb211c8..0a946d0 100644
--- a/apps/www/content/3.components/1.chatbot/inline-citation.md
+++ b/apps/www/content/3.components/1.chatbot/inline-citation.md
@@ -1,23 +1,23 @@
 ---
 title: Inline Citation
-description:
+description: A hoverable citation component that displays source information and quotes inline with text, perfect for AI-generated content with references.
 icon: lucide:message-square-quote
 ---
 
 The `InlineCitation` component provides a way to display citations inline with text content, similar to academic papers or research documents. It consists of a citation pill that shows detailed source information on hover, making it perfect for AI-generated content that needs to reference sources.
 
-:::ComponentLoader{label="InlineCitation" componentName="InlineCitation"}
+:::ComponentLoader{label="Preview" componentName="InlineCitation"}
 :::
 
 ## Install using CLI
 
 :::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add inline-citation
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/inline-citation.json
@@ -123,7 +123,7 @@ const displayText = computed(() => {
 </template>
 ```
 
-```vue [InlineCitationCarousel.vue]
+```vue [InlineCitationCarousel.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { Carousel } from '@repo/shadcn-vue/components/ui/carousel'
@@ -172,7 +172,7 @@ const props = defineProps<{
 </template>
 ```
 
-```vue [InlineCitationCarouselIndex.vue]
+```vue [InlineCitationCarouselIndex.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { useCarousel } from '@repo/shadcn-vue/components/ui/carousel'
@@ -374,10 +374,30 @@ export { default as InlineCitationText } from './InlineCitationText.vue'
 ```
 :::
 
-## Usage
+## Features
+
+- Hover interaction to reveal detailed citation information
+- **Carousel navigation** for multiple citations with prev/next controls
+- **Live index tracking** showing current slide position (e.g., "1/5")
+- Support for source titles, URLs, and descriptions
+- Optional quote blocks for relevant excerpts
+- Composable architecture for flexible citation formats
+- Accessible design with proper keyboard navigation
+- Seamless integration with AI-generated content
+- Clean visual design that doesn't disrupt reading flow
+- Smart badge display showing source hostname and count
+
+## Usage with AI SDK
+
+Build citations for AI-generated content using [experimental_generateObject](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-object).
 
-```vue
+Add the following component to your frontend:
+
+```vue [pages/index.vue] height=500 collapse
 <script setup lang="ts">
+import { experimental_useObject as useObject } from '@ai-sdk/vue'
+import { computed } from 'vue'
+import { citationSchema } from '@/app/api/citation/route'
 import {
   InlineCitation,
   InlineCitationCard,
@@ -390,53 +410,184 @@ import {
   InlineCitationCarouselItem,
   InlineCitationCarouselNext,
   InlineCitationCarouselPrev,
+  InlineCitationQuote,
   InlineCitationSource,
-  InlineCitationText,
 } from '@/components/ai-elements/inline-citation'
+
+import { Button } from '@/components/ui/button'
+
+const { object, submit, isLoading } = useObject({
+  api: '/api/citation',
+  schema: citationSchema,
+})
+
+function handleSubmit(topic: string) {
+  submit({ prompt: topic })
+}
+
+// Parse the content string to separate text from citation markers (e.g., [1])
+const parsedContent = computed(() => {
+  const content = object.value?.content
+  if (!content)
+    return []
+
+  // Split by the citation pattern [number]
+  const parts = content.split(/(\[\d+\])/)
+
+  return parts.map((part) => {
+    const citationMatch = part.match(/\[(\d+)\]/)
+
+    if (citationMatch) {
+      const citationNumber = citationMatch[1]
+      // Find the corresponding citation data
+      const citation = object.value?.citations?.find(
+        (c: any) => String(c.number) === citationNumber
+      )
+
+      if (citation) {
+        return {
+          type: 'citation',
+          data: citation,
+          key: `citation-${citationNumber}`,
+        }
+      }
+    }
+
+    return {
+      type: 'text',
+      content: part,
+      key: `text-${nanoid()}`
+    }
+  })
+})
+
+// Simple helper for unique keys if nanoid isn't available
+function nanoid() {
+  return Math.random().toString(36).substring(7)
+}
 </script>
 
 <template>
-  <InlineCitation>
-    <InlineCitationText>{{ citation.text }}</InlineCitationText>
-    <InlineCitationCard>
-      <InlineCitationCardTrigger
-        :sources="citation.sources.map((source) => source.url)"
-      />
-      <InlineCitationCardBody>
-        <InlineCitationCarousel>
-          <InlineCitationCarouselHeader>
-            <InlineCitationCarouselPrev />
-            <InlineCitationCarouselNext />
-            <InlineCitationCarouselIndex />
-          </InlineCitationCarouselHeader>
-          <InlineCitationCarouselContent>
-            <InlineCitationCarouselItem>
-              <InlineCitationSource
-                title="AI SDK"
-                url="https://ai-sdk.dev"
-                description="The AI Toolkit for TypeScript"
-              />
-            </InlineCitationCarouselItem>
-          </InlineCitationCarouselContent>
-        </InlineCitationCarousel>
-      </InlineCitationCardBody>
-    </InlineCitationCard>
-  </InlineCitation>
+  <div class="max-w-4xl mx-auto p-6 space-y-6">
+    <div class="flex gap-2 mb-6">
+      <Button
+        :disabled="isLoading"
+        variant="outline"
+        @click="handleSubmit('artificial intelligence')"
+      >
+        Generate AI Content
+      </Button>
+      <Button
+        :disabled="isLoading"
+        variant="outline"
+        @click="handleSubmit('climate change')"
+      >
+        Generate Climate Content
+      </Button>
+    </div>
+
+    <div v-if="isLoading && !object" class="text-muted-foreground">
+      Generating content with citations...
+    </div>
+
+    <div v-if="object?.content" class="prose prose-sm max-w-none">
+      <p class="leading-relaxed">
+        <template v-for="(part, index) in parsedContent" :key="index">
+          <span v-if="part.type === 'text'">{{ part.content }}</span>
+
+          <InlineCitation v-else-if="part.type === 'citation' && part.data">
+            <InlineCitationCard>
+              <InlineCitationCardTrigger :sources="[part.data.url]" />
+              <InlineCitationCardBody>
+                <InlineCitationCarousel>
+                  <InlineCitationCarouselHeader>
+                    <InlineCitationCarouselPrev />
+                    <InlineCitationCarouselNext />
+                    <InlineCitationCarouselIndex />
+                  </InlineCitationCarouselHeader>
+                  <InlineCitationCarouselContent>
+                    <InlineCitationCarouselItem>
+                      <InlineCitationSource
+                        :title="part.data.title"
+                        :url="part.data.url"
+                        :description="part.data.description"
+                      />
+                      <InlineCitationQuote v-if="part.data.quote">
+                        {{ part.data.quote }}
+                      </InlineCitationQuote>
+                    </InlineCitationCarouselItem>
+                  </InlineCitationCarouselContent>
+                </InlineCitationCarousel>
+              </InlineCitationCardBody>
+            </InlineCitationCard>
+          </InlineCitation>
+        </template>
+      </p>
+    </div>
+  </div>
 </template>
 ```
 
-## Features
+Add the following route to your backend:
+
+```ts [server/api/citation.ts]
+import { streamObject } from 'ai'
+import { z } from 'zod'
+
+export const citationSchema = z.object({
+  content: z.string(),
+  citations: z.array(
+    z.object({
+      number: z.string(),
+      title: z.string(),
+      url: z.string(),
+      description: z.string().optional(),
+      quote: z.string().optional(),
+    })
+  ),
+})
 
-- Hover interaction to reveal detailed citation information
-- **Carousel navigation** for multiple citations with prev/next controls
-- **Live index tracking** showing current slide position (e.g., "1/5")
-- Support for source titles, URLs, and descriptions
-- Optional quote blocks for relevant excerpts
-- Composable architecture for flexible citation formats
-- Accessible design with proper keyboard navigation
-- Seamless integration with AI-generated content
-- Clean visual design that doesn't disrupt reading flow
-- Smart badge display showing source hostname and count
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30
+
+export default defineEventHandler(async (event) => {
+  const body = await readBody<{ prompt: string }>(event)
+
+  const result = streamObject({
+    model: 'openai/gpt-4o',
+    schema: citationSchema,
+    prompt: `Generate a well-researched paragraph about ${body.prompt} with proper citations.
+
+    Include:
+    - A comprehensive paragraph with inline citations marked as [1], [2], etc.
+    - 2-3 citations with realistic source information
+    - Each citation should have a title, URL, and optional description/quote
+    - Make the content informative and the sources credible
+
+    Format citations as numbered references within the text.`,
+  })
+
+  return result.toTextStreamResponse()
+})
+```
+
+Currently, there is no official support for inline citations with Streamdown or the Response component. This is because:
+
+- There isn't any good markdown syntax for inline citations
+- Language models don't naturally respond with inline citation syntax
+- The AI SDK doesn't have built-in support for inline citations
+
+### Potential Approaches
+
+While these methods are hypothetical and not officially supported, there are two conceptual ways inline citations could work with Streamdown:
+
+1. **Footnote conversion**: GitHub Flavored Markdown (GFM) handles footnotes using `[^1]` syntax. You could hypothetically remove the default footnote rendering and convert footnotes to inline citations instead.
+
+2. **Custom HTML syntax**: You could add a system prompt instructing the model to use a special HTML syntax like `<citation />` and pass that as a custom component to Streamdown.
+
+These approaches require custom implementation and are not currently supported out of the box. We will investigate official support for this use case in the future.
+
+For now, the recommended approach is to use `experimental_useObject` (as shown in the usage example above) to generate structured citation data, then manually parse and render inline citations.
 
 ## Props
 
diff --git a/apps/www/content/3.components/1.chatbot/message.md b/apps/www/content/3.components/1.chatbot/message.md
index 9606bcc..d20bde8 100644
--- a/apps/www/content/3.components/1.chatbot/message.md
+++ b/apps/www/content/3.components/1.chatbot/message.md
@@ -6,18 +6,18 @@ icon: lucide:message-circle
 
 The `Message` component suite provides a complete set of tools for building chat interfaces. It includes components for displaying messages from users and AI assistants, managing multiple response branches, adding action buttons, and rendering markdown content.
 
-:::ComponentLoader{label="Message" componentName="Message"}
+:::ComponentLoader{label="Preview" componentName="Message"}
 :::
 
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add message
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/message.json
@@ -628,18 +628,6 @@ export { default as MessageToolbar } from './MessageToolbar.vue'
 ```
 ::
 
-## Usage
-
-```ts
-import { Message, MessageContent } from '@/components/ai-elements/message'
-```
-
-```vue
-<Message from="user">
-  <MessageContent>Hi there!</MessageContent>
-</Message>
-```
-
 ## Usage with AI SDK
 
 Build a simple chat UI where the user can copy or regenerate the most recent message.
@@ -747,19 +735,130 @@ function handleSubmit() {
 
 - Displays messages from both user and AI assistant with distinct styling and automatic alignment
 - Minimalist flat design with user messages in secondary background and assistant messages full-width
-- Response branching with navigation controls to switch between multiple AI response versions
-- Markdown rendering with GFM support (tables, task lists, strikethrough), math equations, and smart streaming
-- Action buttons for common operations (retry, like, dislike, copy, share) with tooltips and state management
-- File attachments display with support for images and generic files with preview and remove functionality
+- **Response branching** with navigation controls to switch between multiple AI response versions
+- **Markdown rendering** with GFM support (tables, task lists, strikethrough), math equations, and smart streaming
+- **Action buttons** for common operations (retry, like, dislike, copy, share) with tooltips and state management
+- **File attachments** display with support for images and generic files with preview and remove functionality
 - Code blocks with syntax highlighting and copy-to-clipboard functionality
 - Keyboard accessible with proper ARIA labels
 - Responsive design that adapts to different screen sizes
 - Seamless light/dark theme integration
 
-::alert{icon="lucide:info"}
+::alert{type="info" icon="lucide:info"}
   Branching is an advanced use case you can implement to suit your needs. While the AI SDK does not provide built-in branching support, you have full flexibility to design and manage multiple response paths.
 ::
 
+## Usage with AI SDK
+
+Build a simple chat UI where the user can copy or regenerate the most recent message.
+
+Add the following component to your frontend:
+
+```vue [pages/index.vue] height=500 collapse
+<script setup lang="ts">
+import { useChat } from '@ai-sdk/vue'
+import { CopyIcon, RefreshCcwIcon } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+import {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+} from '@/components/ai-elements/conversation'
+import { Message, MessageAction, MessageActions, MessageContent, MessageResponse } from '@/components/ai-elements/message'
+import {
+  PromptInput,
+  PromptInputSubmit,
+  PromptInputTextarea,
+} from '@/components/ai-elements/prompt-input'
+
+const { messages, append, status, reload } = useChat()
+const input = ref('')
+
+function handleSubmit() {
+  if (input.value.trim()) {
+    append({ role: 'user', content: input.value })
+    input.value = ''
+  }
+}
+
+function copyToClipboard(text: string) {
+  navigator.clipboard.writeText(text)
+}
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+    <div class="flex flex-col h-full">
+      <Conversation>
+        <ConversationContent>
+          <template v-for="(message, messageIndex) in messages" :key="message.id">
+            <template v-if="message.parts">
+              <template v-for="(part, i) in message.parts" :key="`${message.id}-${i}`">
+                <template v-if="part.type === 'text'">
+                  <Message :from="message.role">
+                    <MessageContent>
+                      <MessageResponse>{{ part.text }}</MessageResponse>
+                    </MessageContent>
+                  </Message>
+
+                  <MessageActions
+                    v-if="message.role === 'assistant' && messageIndex === messages.length - 1"
+                  >
+                    <MessageAction label="Retry" @click="reload()">
+                      <RefreshCcwIcon class="size-3" />
+                    </MessageAction>
+                    <MessageAction label="Copy" @click="copyToClipboard(part.text)">
+                      <CopyIcon class="size-3" />
+                    </MessageAction>
+                  </MessageActions>
+                </template>
+              </template>
+            </template>
+
+            <template v-else>
+              <Message :from="message.role">
+                <MessageContent>
+                  <MessageResponse>{{ message.content }}</MessageResponse>
+                </MessageContent>
+              </Message>
+
+              <MessageActions
+                v-if="message.role === 'assistant' && messageIndex === messages.length - 1"
+              >
+                <MessageAction label="Retry" @click="reload()">
+                  <RefreshCcwIcon class="size-3" />
+                </MessageAction>
+                <MessageAction label="Copy" @click="copyToClipboard(message.content)">
+                  <CopyIcon class="size-3" />
+                </MessageAction>
+              </MessageActions>
+            </template>
+          </template>
+        </ConversationContent>
+        <ConversationScrollButton />
+      </Conversation>
+
+      <PromptInput
+        class="mt-4 w-full max-w-2xl mx-auto relative bg-transparent border-0"
+        @submit="handleSubmit"
+      >
+        <PromptInputTextarea
+          v-model="input"
+          placeholder="Say something..."
+          class="pr-12"
+        />
+        <PromptInputSubmit
+          :status="status === 'streaming' ? 'streaming' : 'ready'"
+          :disabled="!input.trim()"
+          class="absolute bottom-1 right-1"
+        />
+      </PromptInput>
+    </div>
+  </div>
+</template>
+```
+
 ## Props
 
 ### `<Message />`
diff --git a/apps/www/content/3.components/1.chatbot/model-selector.md b/apps/www/content/3.components/1.chatbot/model-selector.md
index d96e20f..94355ce 100644
--- a/apps/www/content/3.components/1.chatbot/model-selector.md
+++ b/apps/www/content/3.components/1.chatbot/model-selector.md
@@ -12,12 +12,12 @@ The `Model Selector` component provides a searchable command palette interface f
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add model-selector
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/model-selector.json
@@ -30,7 +30,7 @@ The `Model Selector` component provides a searchable command palette interface f
 Copy and paste the following code in the same folder.
 
 :::code-group
-```vue [ModelSelector.vue] height=260 collapse
+```vue [ModelSelector.vue]
 <script setup lang="ts">
 import { Dialog } from '@repo/shadcn-vue/components/ui/dialog'
 </script>
@@ -42,7 +42,7 @@ import { Dialog } from '@repo/shadcn-vue/components/ui/dialog'
 </template>
 ```
 
-```vue [ModelSelectorTrigger.vue] height=260 collapse
+```vue [ModelSelectorTrigger.vue]
 <script setup lang="ts">
 import { DialogTrigger } from '@repo/shadcn-vue/components/ui/dialog'
 </script>
@@ -54,7 +54,7 @@ import { DialogTrigger } from '@repo/shadcn-vue/components/ui/dialog'
 </template>
 ```
 
-```vue [ModelSelectorContent.vue] height=260 collapse
+```vue [ModelSelectorContent.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { Command } from '@repo/shadcn-vue/components/ui/command'
@@ -86,7 +86,7 @@ const props = withDefaults(defineProps<Props>(), {
 </template>
 ```
 
-```vue [ModelSelectorDialog.vue] height=260 collapse
+```vue [ModelSelectorDialog.vue]
 <script setup lang="ts">
 import { CommandDialog } from '@repo/shadcn-vue/components/ui/command'
 </script>
@@ -98,7 +98,7 @@ import { CommandDialog } from '@repo/shadcn-vue/components/ui/command'
 </template>
 ```
 
-```vue [ModelSelectorInput.vue] height=260 collapse
+```vue [ModelSelectorInput.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { CommandInput } from '@repo/shadcn-vue/components/ui/command'
@@ -119,7 +119,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [ModelSelectorList.vue] height=260 collapse
+```vue [ModelSelectorList.vue]
 <script setup lang="ts">
 import { CommandList } from '@repo/shadcn-vue/components/ui/command'
 </script>
@@ -131,7 +131,7 @@ import { CommandList } from '@repo/shadcn-vue/components/ui/command'
 </template>
 ```
 
-```vue [ModelSelectorEmpty.vue] height=260 collapse
+```vue [ModelSelectorEmpty.vue]
 <script setup lang="ts">
 import { CommandEmpty } from '@repo/shadcn-vue/components/ui/command'
 </script>
@@ -143,7 +143,7 @@ import { CommandEmpty } from '@repo/shadcn-vue/components/ui/command'
 </template>
 ```
 
-```vue [ModelSelectorGroup.vue] height=260 collapse
+```vue [ModelSelectorGroup.vue]
 <script setup lang="ts">
 import { CommandGroup } from '@repo/shadcn-vue/components/ui/command'
 </script>
@@ -155,7 +155,7 @@ import { CommandGroup } from '@repo/shadcn-vue/components/ui/command'
 </template>
 ```
 
-```vue [ModelSelectorItem.vue] height=260 collapse
+```vue [ModelSelectorItem.vue]
 <script setup lang="ts">
 import { CommandItem } from '@repo/shadcn-vue/components/ui/command'
 </script>
@@ -167,7 +167,7 @@ import { CommandItem } from '@repo/shadcn-vue/components/ui/command'
 </template>
 ```
 
-```vue [ModelSelectorShortcut.vue] height=260 collapse
+```vue [ModelSelectorShortcut.vue]
 <script setup lang="ts">
 import { CommandShortcut } from '@repo/shadcn-vue/components/ui/command'
 </script>
@@ -179,7 +179,7 @@ import { CommandShortcut } from '@repo/shadcn-vue/components/ui/command'
 </template>
 ```
 
-```vue [ModelSelectorSeparator.vue] height=260 collapse
+```vue [ModelSelectorSeparator.vue]
 <script setup lang="ts">
 import { CommandSeparator } from '@repo/shadcn-vue/components/ui/command'
 </script>
@@ -189,7 +189,7 @@ import { CommandSeparator } from '@repo/shadcn-vue/components/ui/command'
 </template>
 ```
 
-```vue [ModelSelectorLogo.vue] height=260 collapse
+```vue [ModelSelectorLogo.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -214,7 +214,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [ModelSelectorLogoGroup.vue] height=260 collapse
+```vue [ModelSelectorLogoGroup.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -241,7 +241,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [ModelSelectorName.vue] height=260 collapse
+```vue [ModelSelectorName.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -263,7 +263,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```ts [index.ts] height=260 collapse
+```ts [index.ts]
 export { default as ModelSelector } from './ModelSelector.vue'
 export { default as ModelSelectorContent } from './ModelSelectorContent.vue'
 export { default as ModelSelectorDialog } from './ModelSelectorDialog.vue'
diff --git a/apps/www/content/3.components/1.chatbot/plan.md b/apps/www/content/3.components/1.chatbot/plan.md
index 038712f..5c00854 100644
--- a/apps/www/content/3.components/1.chatbot/plan.md
+++ b/apps/www/content/3.components/1.chatbot/plan.md
@@ -1,6 +1,6 @@
 ---
 title: Plan
-description:
+description: A collapsible plan component for displaying AI-generated execution plans with streaming support and shimmer animations.
 icon: lucide:map
 ---
 
@@ -12,12 +12,12 @@ The `Plan` component provides a flexible system for displaying AI-generated exec
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add plan
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/plan.json
@@ -30,7 +30,7 @@ The `Plan` component provides a flexible system for displaying AI-generated exec
 Copy and paste the following code in the same folder.
 
 :::code-group
-```vue [Plan.vue]
+```vue [Plan.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { Card } from '@repo/shadcn-vue/components/ui/card'
@@ -234,46 +234,6 @@ export { default as PlanTrigger } from './PlanTrigger.vue'
 ```
 :::
 
-## Usage
-
-```ts
-import {
-  Plan,
-  PlanAction,
-  PlanContent,
-  PlanDescription,
-  PlanFooter,
-  PlanHeader,
-  PlanTitle,
-  PlanTrigger,
-} from '@/components/ai-elements/plan'
-```
-
-```vue
-<Plan :default-open="false">
-  <PlanHeader>
-    <div>
-      <PlanTitle>Implement new feature</PlanTitle>
-      <PlanDescription>
-        Add authentication system with JWT tokens and refresh logic.
-      </PlanDescription>
-    </div>
-    <PlanTrigger />
-  </PlanHeader>
-  <PlanContent>
-    <div className="space-y-4 text-sm">
-      <div>
-        <h3 className="mb-2 font-semibold">Overview</h3>
-        <p>This plan outlines the implementation strategy...</p>
-      </div>
-    </div>
-  </PlanContent>
-  <PlanFooter>
-    <Button>Execute Plan</Button>
-  </PlanFooter>
-</Plan>
-```
-
 ## Features
 
 - Collapsible content with smooth animations
diff --git a/apps/www/content/3.components/1.chatbot/prompt-input.md b/apps/www/content/3.components/1.chatbot/prompt-input.md
index 26aaa66..1eb6694 100644
--- a/apps/www/content/3.components/1.chatbot/prompt-input.md
+++ b/apps/www/content/3.components/1.chatbot/prompt-input.md
@@ -12,12 +12,12 @@ The `PromptInput` component allows a user to send a message with file attachment
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add prompt-input
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/prompt-input.json
@@ -30,7 +30,7 @@ The `PromptInput` component allows a user to send a message with file attachment
 Copy and paste the following code in the same folder.
 
 :::code-group
-```vue [PromptInputProvider.vue] height=300 collapse
+```vue [PromptInputProvider.vue] height=500 collapse
 <script setup lang="ts">
 import type { PromptInputMessage } from './types'
 import { usePromptInputProvider } from './context'
@@ -62,7 +62,7 @@ usePromptInputProvider({
 </template>
 ```
 
-```vue [PromptInput.vue] height=300 collapse
+```vue [PromptInput.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import type { PromptInputMessage } from './types'
@@ -178,7 +178,7 @@ function onSubmit(e: Event) {
 </template>
 ```
 
-```vue [PromptInputTextarea.vue] height=300 collapse
+```vue [PromptInputTextarea.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { InputGroupTextarea } from '@repo/shadcn-vue/components/ui/input-group'
@@ -255,7 +255,7 @@ const modelValue = computed({
 </template>
 ```
 
-```vue [PromptInputTools.vue] height=300 collapse
+```vue [PromptInputTools.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -270,7 +270,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </template>
 ```
 
-```vue [PromptInputButton.vue] height=300 collapse
+```vue [PromptInputButton.vue] height=500 collapse
 <script setup lang="ts">
 // import type { InputGroupButtonVariants } from '@repo/shadcn-vue/components/ui/input-group'
 import type { ChatStatus } from 'ai'
@@ -333,7 +333,7 @@ const { status, size, variant, class: _, ...restProps } = props
 </template>
 ```
 
-```vue [PromptInputSubmit.vue] height=300 collapse
+```vue [PromptInputSubmit.vue] height=500 collapse
 <script setup lang="ts">
 import type { ChatStatus } from 'ai'
 import type { HTMLAttributes } from 'vue'
@@ -393,7 +393,7 @@ const { status, size, variant, class: _, ...restProps } = props
 </template>
 ```
 
-```vue [PromptInputBody.vue] height=300 collapse
+```vue [PromptInputBody.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -408,7 +408,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </template>
 ```
 
-```vue [PromptInputAttachments.vue] height=300 collapse
+```vue [PromptInputAttachments.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -433,7 +433,7 @@ const { files } = usePromptInput()
 </template>
 ```
 
-```vue [PromptInputAttachment.vue] height=300 collapse
+```vue [PromptInputAttachment.vue] height=500 collapse
 <script setup lang="ts">
 import type { AttachmentFile } from './types'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
@@ -529,7 +529,7 @@ function handleRemove(e: Event) {
 </template>
 ```
 
-```vue [PromptInputHeader.vue] height=300 collapse
+```vue [PromptInputHeader.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { InputGroupAddon } from '@repo/shadcn-vue/components/ui/input-group'
@@ -555,7 +555,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputFooter.vue] height=300 collapse
+```vue [PromptInputFooter.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { InputGroupAddon } from '@repo/shadcn-vue/components/ui/input-group'
@@ -581,7 +581,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputActionMenu.vue] height=300 collapse
+```vue [PromptInputActionMenu.vue]
 <script setup lang="ts">
 import { DropdownMenu } from '@repo/shadcn-vue/components/ui/dropdown-menu'
 
@@ -599,7 +599,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputActionMenuTrigger.vue] height=300 collapse
+```vue [PromptInputActionMenuTrigger.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { DropdownMenuTrigger } from '@repo/shadcn-vue/components/ui/dropdown-menu'
@@ -624,7 +624,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputActionMenuContent.vue] height=300 collapse
+```vue [PromptInputActionMenuContent.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { DropdownMenuContent } from '@repo/shadcn-vue/components/ui/dropdown-menu'
@@ -648,7 +648,7 @@ const { align, class: _, ...restProps } = props
 </template>
 ```
 
-```vue [PromptInputActionMenuItem.vue] height=300 collapse
+```vue [PromptInputActionMenuItem.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { DropdownMenuItem } from '@repo/shadcn-vue/components/ui/dropdown-menu'
@@ -670,7 +670,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputActionAddAttachments.vue] height=300 collapse
+```vue [PromptInputActionAddAttachments.vue]
 <script setup lang="ts">
 import { DropdownMenuItem } from '@repo/shadcn-vue/components/ui/dropdown-menu'
 import { ImageIcon } from 'lucide-vue-next'
@@ -689,7 +689,7 @@ const { openFileDialog } = usePromptInput()
 </template>
 ```
 
-```vue [PromptInputSpeechButton.vue] height=300 collapse
+```vue [PromptInputSpeechButton.vue] height=500 collapse
 <script setup lang="ts">
 import { InputGroupButton } from '@repo/shadcn-vue/components/ui/input-group'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -786,7 +786,7 @@ function toggleListening() {
 </template>
 ```
 
-```vue [PromptInputSelect.vue] height=300 collapse
+```vue [PromptInputSelect.vue]
 <script setup lang="ts">
 import { Select } from '@repo/shadcn-vue/components/ui/select'
 
@@ -804,7 +804,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputSelectTrigger.vue] height=300 collapse
+```vue [PromptInputSelectTrigger.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { SelectTrigger } from '@repo/shadcn-vue/components/ui/select'
@@ -833,7 +833,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputSelectContent.vue] height=300 collapse
+```vue [PromptInputSelectContent.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { SelectContent } from '@repo/shadcn-vue/components/ui/select'
@@ -855,7 +855,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputSelectItem.vue] height=300 collapse
+```vue [PromptInputSelectItem.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { SelectItem } from '@repo/shadcn-vue/components/ui/select'
@@ -877,7 +877,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputSelectValue.vue] height=300 collapse
+```vue [PromptInputSelectValue.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { SelectValue } from '@repo/shadcn-vue/components/ui/select'
@@ -899,7 +899,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputHoverCard.vue] height=300 collapse
+```vue [PromptInputHoverCard.vue]
 <script setup lang="ts">
 import { HoverCard } from '@repo/shadcn-vue/components/ui/hover-card'
 
@@ -925,7 +925,7 @@ const { openDelay, closeDelay, ...restProps } = props
 </template>
 ```
 
-```vue [PromptInputHoverCardTrigger.vue] height=300 collapse
+```vue [PromptInputHoverCardTrigger.vue]
 <script setup lang="ts">
 import { HoverCardTrigger } from '@repo/shadcn-vue/components/ui/hover-card'
 
@@ -943,7 +943,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputHoverCardContent.vue] height=300 collapse
+```vue [PromptInputHoverCardContent.vue]
 <script setup lang="ts">
 import { HoverCardContent } from '@repo/shadcn-vue/components/ui/hover-card'
 
@@ -965,7 +965,7 @@ const { align, ...restProps } = props
 </template>
 ```
 
-```vue [PromptInputTabsList.vue] height=300 collapse
+```vue [PromptInputTabsList.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -984,7 +984,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputTab.vue] height=300 collapse
+```vue [PromptInputTab.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -1003,7 +1003,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputTabLabel.vue] height=300 collapse
+```vue [PromptInputTabLabel.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -1022,7 +1022,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputTabBody.vue] height=300 collapse
+```vue [PromptInputTabBody.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -1041,7 +1041,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputTabItem.vue] height=300 collapse
+```vue [PromptInputTabItem.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -1060,7 +1060,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputCommand.vue] height=300 collapse
+```vue [PromptInputCommand.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { Command } from '@repo/shadcn-vue/components/ui/command'
@@ -1082,7 +1082,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputCommandInput.vue] height=300 collapse
+```vue [PromptInputCommandInput.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { CommandInput } from '@repo/shadcn-vue/components/ui/command'
@@ -1102,7 +1102,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputCommandList.vue] height=300 collapse
+```vue [PromptInputCommandList.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { CommandList } from '@repo/shadcn-vue/components/ui/command'
@@ -1122,7 +1122,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputCommandEmpty.vue] height=300 collapse
+```vue [PromptInputCommandEmpty.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { CommandEmpty } from '@repo/shadcn-vue/components/ui/command'
@@ -1144,7 +1144,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputCommandGroup.vue] height=300 collapse
+```vue [PromptInputCommandGroup.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { CommandGroup } from '@repo/shadcn-vue/components/ui/command'
@@ -1166,7 +1166,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputCommandItem.vue] height=300 collapse
+```vue [PromptInputCommandItem.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { CommandItem } from '@repo/shadcn-vue/components/ui/command'
@@ -1188,7 +1188,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [PromptInputCommandSeparator.vue] height=300 collapse
+```vue [PromptInputCommandSeparator.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { CommandSeparator } from '@repo/shadcn-vue/components/ui/command'
@@ -1207,7 +1207,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```ts [context.ts] height=300 collapse
+```ts [context.ts] height=500 collapse
 import type { AttachmentFile, PromptInputContext } from './types'
 import { nanoid } from 'nanoid'
 import { inject, onBeforeUnmount, provide, ref } from 'vue'
@@ -1401,7 +1401,7 @@ export function usePromptInput() {
 }
 ```
 
-```ts [types.ts] height=300 collapse
+```ts [types.ts] height=500 collapse
 import type { FileUIPart } from 'ai'
 import type { Ref } from 'vue'
 
@@ -1432,7 +1432,7 @@ export interface PromptInputContext {
 export const PROMPT_INPUT_KEY = Symbol('PromptInputContext')
 ```
 
-```ts [index.ts] height=300 collapse
+```ts [index.ts] height=500 collapse
 export * from './context'
 export { default as PromptInput } from './PromptInput.vue'
 export { default as PromptInputActionAddAttachments } from './PromptInputActionAddAttachments.vue'
@@ -1481,7 +1481,7 @@ Built a fully functional chat app using `PromptInput`, [`Conversation`](/compone
 
 Add the following component to your frontend:
 
-```vue [pages/index.vue] height=300 collapse
+```vue [pages/index.vue] height=500 collapse
 <script setup lang="ts">
 import type { PromptInputMessage } from '@/components/ai-elements/prompt-input'
 import { useChat } from '@ai-sdk/vue'
@@ -1648,7 +1648,7 @@ function handleSubmit(message: PromptInputMessage) {
 
 Add the following route to your backend:
 
-```ts [server/api/chat/route.ts] height=300 collapse
+```ts [server/api/chat.ts]
 import { convertToModelMessages, streamText, UIMessage } from 'ai'
 
 // Allow streaming responses up to 30 seconds
diff --git a/apps/www/content/3.components/1.chatbot/queue.md b/apps/www/content/3.components/1.chatbot/queue.md
index 2580680..e936e66 100644
--- a/apps/www/content/3.components/1.chatbot/queue.md
+++ b/apps/www/content/3.components/1.chatbot/queue.md
@@ -1,6 +1,6 @@
 ---
 title: Queue
-description:
+description: A comprehensive queue component system for displaying message lists, todos, and collapsible task sections in AI applications.
 icon: lucide:list-check
 ---
 
@@ -12,12 +12,12 @@ The `Queue` component provides a flexible system for displaying lists of message
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add queue
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/queue.json
@@ -440,40 +440,6 @@ export { default as QueueSectionTrigger } from './QueueSectionTrigger.vue'
 ```
 :::
 
-## Usage
-
-```ts
-import {
-  Queue,
-  QueueItem,
-  QueueItemContent,
-  QueueItemIndicator,
-  QueueList,
-  QueueSection,
-  QueueSectionContent,
-  QueueSectionLabel,
-  QueueSectionTrigger,
-} from '@/components/ai-elements/queue'
-```
-
-```vue
-<Queue>
-  <QueueSection>
-    <QueueSectionTrigger>
-      <QueueSectionLabel :count="3" label="Tasks" />
-    </QueueSectionTrigger>
-    <QueueSectionContent>
-      <QueueList>
-        <QueueItem>
-          <QueueItemIndicator />
-          <QueueItemContent>Analyze user requirements</QueueItemContent>
-        </QueueItem>
-      </QueueList>
-    </QueueSectionContent>
-  </QueueSection>
-</Queue>
-```
-
 ## Features
 
 - Flexible component system with composable parts
diff --git a/apps/www/content/3.components/1.chatbot/reasoning.md b/apps/www/content/3.components/1.chatbot/reasoning.md
index 52beb34..23bc74a 100644
--- a/apps/www/content/3.components/1.chatbot/reasoning.md
+++ b/apps/www/content/3.components/1.chatbot/reasoning.md
@@ -12,12 +12,12 @@ The `Reasoning` component is a collapsible component that displays AI reasoning
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add reasoning
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/reasoning.json
@@ -30,7 +30,7 @@ The `Reasoning` component is a collapsible component that displays AI reasoning
 Copy and paste the following code in the same folder.
 
 :::code-group
-```vue [Reasoning.vue] height=300 collapse
+```vue [Reasoning.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { Collapsible } from '@repo/shadcn-vue/components/ui/collapsible'
@@ -124,7 +124,7 @@ provide(ReasoningKey, {
 </template>
 ```
 
-```vue [ReasoningTrigger.vue] height=300 collapse
+```vue [ReasoningTrigger.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { CollapsibleTrigger } from '@repo/shadcn-vue/components/ui/collapsible'
@@ -188,7 +188,7 @@ const thinkingMessage = computed(() => {
 </template>
 ```
 
-```vue [ReasoningContent.vue] height=300 collapse
+```vue [ReasoningContent.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { CollapsibleContent } from '@repo/shadcn-vue/components/ui/collapsible'
@@ -232,7 +232,7 @@ const md = computed(() => (slotContent.value ?? props.content ?? '') as string)
 </template>
 ```
 
-```ts [context.ts] height=300 collapse
+```ts [context.ts]
 import type { InjectionKey, Ref } from 'vue'
 import { inject, provide } from 'vue'
 
@@ -254,7 +254,7 @@ export function useReasoningContext() {
 }
 ```
 
-```ts [index.ts] height=300 collapse
+```ts [index.ts]
 export { default as Reasoning } from './Reasoning.vue'
 export { default as ReasoningContent } from './ReasoningContent.vue'
 export { default as ReasoningTrigger } from './ReasoningTrigger.vue'
@@ -267,7 +267,7 @@ Build a chatbot with reasoning using Deepseek R1.
 
 Add the following component to your frontend:
 
-```vue [pages/index.vue] height=300 collapse
+```vue [pages/index.vue] height=500 collapse
 <script setup lang="ts">
 import { useChat } from '@ai-sdk/vue'
 import { ref } from 'vue'
@@ -371,7 +371,7 @@ function isStreamingPart(msgIndex: number, partIndex: number) {
 
 Add the following route to your backend:
 
-```ts [server/api/chat/route.ts] height=300 collapse
+```ts [server/api/chat.ts]
 import { convertToModelMessages, streamText, UIMessage } from 'ai'
 
 export const maxDuration = 30
@@ -395,13 +395,13 @@ export default defineEventHandler(async (event) => {
 
 - Automatically opens when streaming content and closes when finished
 - Manual toggle control for user interaction
-- Smooth animations and transitions powered by Radix UI
+- Smooth animations and transitions powered by Reka UI
 - Visual streaming indicator with pulsing animation
 - Composable architecture with separate trigger and content components
 - Built with accessibility in mind including keyboard navigation
 - Responsive design that works across different screen sizes
 - Seamlessly integrates with both light and dark themes
-- Built on top of shadcn/ui Collapsible primitives
+- Built on top of shadcn-vue Collapsible primitives
 - TypeScript support with proper type definitions
 
 ## Props
diff --git a/apps/www/content/3.components/1.chatbot/shimmer.md b/apps/www/content/3.components/1.chatbot/shimmer.md
index 8c275a8..c1e38da 100644
--- a/apps/www/content/3.components/1.chatbot/shimmer.md
+++ b/apps/www/content/3.components/1.chatbot/shimmer.md
@@ -1,6 +1,6 @@
 ---
 title: Shimmer
-description:
+description: An animated text shimmer component for creating eye-catching loading states and progressive reveal effects.
 icon: lucide:sparkles
 ---
 
@@ -12,12 +12,12 @@ The `Shimmer` component provides an animated shimmer effect that sweeps across t
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add shimmer
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/shimmer.json
@@ -30,7 +30,7 @@ The `Shimmer` component provides an animated shimmer effect that sweeps across t
 Copy and paste the following code in the same folder.
 
 :::code-group
-```vue [Shimmer.vue]
+```vue [Shimmer.vue] height=500 collapse
 <script setup lang="ts">
 import type { CSSProperties } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -107,30 +107,18 @@ const MotionComponent = computed(() => {
   ```
 :::
 
-## Usage
-
-```ts
-import { Shimmer } from '@/components/ai-elements/shimmer'
-```
-
-```vue
-<Shimmer>
-  Loading your response...
-</Shimmer>
-```
-
 ## Features
 
 - Smooth animated shimmer effect using CSS gradients and Motion
 - Customizable animation duration and spread
-- Polymorphic component - render as any HTML element via the as propAutomatic spread calculation based on text length
+- Polymorphic component - render as any HTML element via the `as` propAutomatic spread calculation based on text length
 - Automatic spread calculation based on text length
 - Theme-aware styling using CSS custom properties
 - Infinite looping animation with linear easing
 - TypeScript support with proper type definitions
 - Memoized for optimal performance
 - Responsive and accessible design
-- Uses text-transparent with background-clip for crisp text rendering
+- Uses `text-transparent` with background-clip for crisp text rendering
 
 ## Examples
 
diff --git a/apps/www/content/3.components/1.chatbot/sources.md b/apps/www/content/3.components/1.chatbot/sources.md
index 067183e..158e162 100644
--- a/apps/www/content/3.components/1.chatbot/sources.md
+++ b/apps/www/content/3.components/1.chatbot/sources.md
@@ -1,6 +1,6 @@
 ---
 title: Sources
-description:
+description: A component that allows a user to view the sources or citations used to generate a response.
 icon: lucide:book-open
 ---
 
@@ -12,12 +12,12 @@ The `Sources` component allows a user to view the sources or citations used to g
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add sources
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/sources.json
@@ -139,33 +139,13 @@ export { default as SourcesTrigger } from './SourcesTrigger.vue'
 ```
 :::
 
-## Usage
-
-```ts
-import {
-  Source,
-  Sources,
-  SourcesContent,
-  SourcesTrigger,
-} from '@/components/ai-elements/sources'
-```
-
-```vue
-<Sources>
-  <SourcesTrigger count="1" />
-  <SourcesContent>
-    <Source href="https://ai-sdk.dev" title="AI SDK" />
-  </SourcesContent>
-</Sources>
-```
-
 ## Usage with AI SDK
 
 Build a simple web search agent with Perplexity Sonar.
 
 Add the following component to your frontend:
 
-```vue [pages/index.vue]
+```vue [pages/index.vue] height=500 collapse
 <script setup lang="ts">
 import { useChat } from '@ai-sdk/vue'
 import { DefaultChatTransport } from 'ai'
diff --git a/apps/www/content/3.components/1.chatbot/suggestion.md b/apps/www/content/3.components/1.chatbot/suggestion.md
index 9432f56..031635f 100644
--- a/apps/www/content/3.components/1.chatbot/suggestion.md
+++ b/apps/www/content/3.components/1.chatbot/suggestion.md
@@ -1,6 +1,6 @@
 ---
 title: Suggestion
-description:
+description: A suggestion component that displays a horizontal row of clickable suggestions for user interaction.
 icon: lucide:lightbulb
 ---
 
@@ -12,12 +12,12 @@ The `Suggestion` component displays a horizontal row of clickable suggestions fo
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add suggestion
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/suggestion.json
@@ -53,7 +53,7 @@ const props = defineProps<SuggestionsProps>()
 </template>
 ```
 
-```vue [Suggestions.vue]
+```vue [Suggestions.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
@@ -100,25 +100,13 @@ export { default as Suggestions } from './Suggestions.vue'
 ```
 :::
 
-## Usage
-
-```ts
-import { Suggestion, Suggestions } from '@/components/ai-elements/suggestion'
-```
-
-```vue
-<Suggestions>
-  <Suggestion suggestion="What are the latest trends in AI?" />
-</Suggestions>
-```
-
 ## Usage with AI SDK
 
 Build a simple input with suggestions users can click to send a message to the LLM.
 
 Add the following component to your frontend:
 
-```vue [pages/index.vue]
+```vue [pages/index.vue] height=500 collapse
 <script setup lang="ts">
 import { useChat } from '@ai-sdk/vue'
 import { ref } from 'vue'
diff --git a/apps/www/content/3.components/1.chatbot/task.md b/apps/www/content/3.components/1.chatbot/task.md
index 4bc0c61..493faec 100644
--- a/apps/www/content/3.components/1.chatbot/task.md
+++ b/apps/www/content/3.components/1.chatbot/task.md
@@ -1,6 +1,6 @@
 ---
 title: Task
-description:
+description: A collapsible task list component for displaying AI workflow progress, with status indicators and optional descriptions.
 icon: lucide:book-check
 ---
 
@@ -12,12 +12,12 @@ The `Task` component provides a structured way to display task lists or workflow
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add task
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/task.json
@@ -30,7 +30,7 @@ The `Task` component provides a structured way to display task lists or workflow
 Copy and paste the following code in the same folder.
 
 :::code-group
-```vue [Task.vue]
+```vue [Task.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import {
@@ -65,7 +65,7 @@ provide('toggle', toggleOpen)
 </template>
 ```
 
-```vue [TaskTrigger.vue]
+```vue [TaskTrigger.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import {
@@ -101,7 +101,7 @@ const props = defineProps<TaskTriggerProps>()
 </template>
 ```
 
-```vue [TaskContent.vue]
+```vue [TaskContent.vue] height=500 collapse
 <script setup lang='ts'>
 import type { HTMLAttributes } from 'vue'
 import {
@@ -180,36 +180,13 @@ export { default as TaskTrigger } from './TaskTrigger.vue'
 ```
 :::
 
-## Usage
-
-```ts
-import {
-  Task,
-  TaskContent,
-  TaskItem,
-  TaskItemFile,
-  TaskTrigger,
-} from '@/components/ai-elements/task'
-```
-
-```vue
-<Task class="w-full">
-  <TaskTrigger title="Found project files" />
-  <TaskContent>
-    <TaskItem>
-      Read <TaskItemFile>index.md</TaskItemFile>
-    </TaskItem>
-  </TaskContent>
-</Task>
-```
-
 ## Usage with AI SDK
 
 Build a mock async programming agent using `experimental_generateObject`.
 
 Add the following component to your frontend:
 
-```vue [pages/index.vue]
+```vue [pages/index.vue] height=500 collapse
 <script setup lang="ts">
 import { experimental_useObject as useObject } from '@ai-sdk/vue'
 import {
@@ -306,7 +283,7 @@ function handleSubmit(taskType: string) {
 
 Add the following route to your backend:
 
-```ts [server/api/agent.ts]
+```ts [server/api/agent.ts] height=500 collapse
 import { streamObject } from 'ai'
 import { z } from 'zod'
 
diff --git a/apps/www/content/3.components/1.chatbot/tool.md b/apps/www/content/3.components/1.chatbot/tool.md
index fba2a0b..f11c117 100644
--- a/apps/www/content/3.components/1.chatbot/tool.md
+++ b/apps/www/content/3.components/1.chatbot/tool.md
@@ -12,12 +12,12 @@ The `Tool` component displays a collapsible interface for showing/hiding tool de
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add tool
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/tool.json
@@ -30,7 +30,7 @@ The `Tool` component displays a collapsible interface for showing/hiding tool de
 Copy and paste the following code in the same folder.
 
 :::code-group
-```vue [Tool.vue] height=260 collapse
+```vue [Tool.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { Collapsible } from '@repo/shadcn-vue/components/ui/collapsible'
@@ -51,7 +51,7 @@ const props = defineProps<{
 </template>
 ```
 
-```vue [ToolStatusBadge.vue] height=260 collapse
+```vue [ToolStatusBadge.vue] height=500 collapse
 <!-- StatusBadge.vue -->
 <script setup lang="ts">
 import type { ToolUIPart } from 'ai'
@@ -117,7 +117,7 @@ const iconClass = computed(() => {
 </template>
 ```
 
-```vue [ToolHeader.vue] height=260 collapse
+```vue [ToolHeader.vue] height=500 collapse
 <script setup lang="ts">
 import type { ToolUIPart } from 'ai'
 import type { HTMLAttributes } from 'vue'
@@ -184,7 +184,7 @@ const props = defineProps<{
 </template>
 ```
 
-```vue [ToolInput.vue] height=260 collapse
+```vue [ToolInput.vue] height=500 collapse
 <script setup lang="ts">
 import type { ToolUIPart } from 'ai'
 import type { HTMLAttributes } from 'vue'
@@ -219,7 +219,7 @@ const formattedInput = computed(() => {
 </template>
 ```
 
-```vue [ToolOutput.vue] height=260 collapse
+```vue [ToolOutput.vue] height=500 collapse
 <script setup lang="ts">
 import type { ToolUIPart } from 'ai'
 import type { HTMLAttributes } from 'vue'
@@ -291,7 +291,7 @@ const formattedOutput = computed(() => {
 </template>
 ```
 
-```ts [index.ts] height=260 collapse
+```ts [index.ts]
 export { default as Tool } from './Tool.vue'
 export { default as ToolContent } from './ToolContent.vue'
 export { default as ToolHeader } from './ToolHeader.vue'
@@ -306,7 +306,7 @@ Build a simple stateful weather app that renders the last message in a tool usin
 
 Add the following component to your frontend:
 
-```vue [pages/index.vue] height=260 collapse
+```vue [pages/index.vue] height=500 collapse
 <script setup lang="ts">
 import type { ToolUIPart } from 'ai'
 import { useChat } from '@ai-sdk/vue'
@@ -422,7 +422,7 @@ const weatherOutputVNode = computed(() => {
 
 Add the following route to your backend:
 
-```ts [server/api/agent.ts] height=260 collapse
+```ts [server/api/agent.ts] height=500 collapse
 import { convertToModelMessages, streamText, UIMessage } from 'ai'
 import { defineEventHandler, readBody } from 'h3'
 import { z } from 'zod'
diff --git a/apps/www/content/3.components/2.workflow/canvas.md b/apps/www/content/3.components/2.workflow/canvas.md
index 1ddb801..54cab95 100644
--- a/apps/www/content/3.components/2.workflow/canvas.md
+++ b/apps/www/content/3.components/2.workflow/canvas.md
@@ -14,12 +14,12 @@ It comes pre-configured with sensible defaults for AI applications, including pa
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add canvas
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/canvas.json
@@ -32,7 +32,7 @@ It comes pre-configured with sensible defaults for AI applications, including pa
 Copy and paste the following code in the same folder.
 
 ::code-group
-  ```vue [Canvas.vue] height=260 collapse
+  ```vue [Canvas.vue] height=500 collapse
   <script setup lang="ts">
   import type { FlowEmits, FlowProps, FlowSlots } from '@vue-flow/core'
   import { Background } from '@vue-flow/background'
diff --git a/apps/www/content/3.components/2.workflow/connection.md b/apps/www/content/3.components/2.workflow/connection.md
index c03a496..a7bd51a 100644
--- a/apps/www/content/3.components/2.workflow/connection.md
+++ b/apps/www/content/3.components/2.workflow/connection.md
@@ -14,12 +14,12 @@ It renders an animated bezier curve with a circle indicator at the target end, u
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add connection
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/connection.json
@@ -32,7 +32,7 @@ It renders an animated bezier curve with a circle indicator at the target end, u
 Copy and paste the following code in the same folder.
 
 ::code-group
-  ```vue [Connection.vue] height=260 collapse
+  ```vue [Connection.vue] height=500 collapse
   <script setup lang="ts">
   import type { ConnectionLineProps } from '@vue-flow/core'
   import { computed } from 'vue'
diff --git a/apps/www/content/3.components/2.workflow/controls.md b/apps/www/content/3.components/2.workflow/controls.md
index 66aa4a7..27ecc5a 100644
--- a/apps/www/content/3.components/2.workflow/controls.md
+++ b/apps/www/content/3.components/2.workflow/controls.md
@@ -14,12 +14,12 @@ It includes a modern, themed design with backdrop blur and card styling.
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add controls
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/controls.json
@@ -32,7 +32,7 @@ It includes a modern, themed design with backdrop blur and card styling.
 Copy and paste the following code in the same folder.
 
 ::code-group
-  ```vue [Controls.vue] height=260 collapse
+  ```vue [Controls.vue]
   <script setup lang="ts">
   import type { HTMLAttributes } from 'vue'
   import { cn } from '@repo/shadcn-vue/lib/utils'
diff --git a/apps/www/content/3.components/2.workflow/edge.md b/apps/www/content/3.components/2.workflow/edge.md
index c6d1fa6..79aa187 100644
--- a/apps/www/content/3.components/2.workflow/edge.md
+++ b/apps/www/content/3.components/2.workflow/edge.md
@@ -13,12 +13,12 @@ The `Edge` component provides two pre-styled edge types for Vue Flow canvases: `
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add edge
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/edge.json
@@ -62,7 +62,7 @@ Copy and paste the following code in the same folder.
   </template>
   ```
 
-  ```vue [Animated.vue] height=260 collapse
+  ```vue [Animated.vue] height=500 collapse
   <script setup lang="ts">
   import type { EdgeProps, GraphNode, HandleElement } from '@vue-flow/core'
   import { BaseEdge, getBezierPath, Position } from '@vue-flow/core'
diff --git a/apps/www/content/3.components/2.workflow/node.md b/apps/www/content/3.components/2.workflow/node.md
index 3acb2c9..848a193 100644
--- a/apps/www/content/3.components/2.workflow/node.md
+++ b/apps/www/content/3.components/2.workflow/node.md
@@ -14,12 +14,12 @@ It includes support for connection handles, structured layouts, and consistent s
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add node
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/node.json
@@ -32,7 +32,7 @@ It includes support for connection handles, structured layouts, and consistent s
 Copy and paste the following code in the same folder.
 
 ::code-group
-  ```vue [Node.vue] height=260 collapse
+  ```vue [Node.vue] height=500 collapse
   <script setup lang="ts">
   import type { HTMLAttributes } from 'vue'
   import Card from '@repo/shadcn-vue/components/ui/card/Card.vue'
diff --git a/apps/www/content/3.components/2.workflow/panel.md b/apps/www/content/3.components/2.workflow/panel.md
index ad00cad..8a2c1bc 100644
--- a/apps/www/content/3.components/2.workflow/panel.md
+++ b/apps/www/content/3.components/2.workflow/panel.md
@@ -14,12 +14,12 @@ It includes modern card styling with backdrop blur and flexible positioning opti
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add panel
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/panel.json
@@ -32,7 +32,7 @@ It includes modern card styling with backdrop blur and flexible positioning opti
 Copy and paste the following code in the same folder.
 
 ::code-group
-  ```vue [Panel.vue] height=260 collapse
+  ```vue [Panel.vue]
   <script setup lang="ts">
   import type { PanelPositionType } from '@vue-flow/core'
   import type { HTMLAttributes } from 'vue'
diff --git a/apps/www/content/3.components/2.workflow/toolbar.md b/apps/www/content/3.components/2.workflow/toolbar.md
index 33e2a7e..fcce765 100644
--- a/apps/www/content/3.components/2.workflow/toolbar.md
+++ b/apps/www/content/3.components/2.workflow/toolbar.md
@@ -14,12 +14,12 @@ It features modern card styling with backdrop blur and flexbox layout for action
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add toolbar
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/toolbar.json
@@ -32,7 +32,7 @@ It features modern card styling with backdrop blur and flexbox layout for action
 Copy and paste the following code in the same folder.
 
 ::code-group
-  ```vue [Toolbar.vue] height=260 collapse
+  ```vue [Toolbar.vue] height=500 collapse
   <script setup lang="ts">
   import type { HTMLAttributes } from 'vue'
   import { cn } from '@repo/shadcn-vue/lib/utils'
diff --git a/apps/www/content/3.components/3.vibe-coding/artifact.md b/apps/www/content/3.components/3.vibe-coding/artifact.md
index 13d505e..c8c9824 100644
--- a/apps/www/content/3.components/3.vibe-coding/artifact.md
+++ b/apps/www/content/3.components/3.vibe-coding/artifact.md
@@ -9,12 +9,12 @@ The `Artifact` component provides a structured container for displaying generate
 ## Install using CLI
 
 :::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add artifact
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/artifact.json
@@ -54,7 +54,7 @@ Copy and paste the following code in the same folder.
   </template>
   ```
 
-  ```vue [ArtifactAction.vue]
+  ```vue [ArtifactAction.vue] height=500 collapse
   <script setup lang="ts">
   import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
   import type { LucideIcon } from 'lucide-vue-next'
@@ -151,7 +151,7 @@ Copy and paste the following code in the same folder.
   </template>
   ```
 
-  ```vue [ArtifactClose.vue]
+  ```vue [ArtifactClose.vue] height=500 collapse
   <script setup lang="ts">
   import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
   import { Button } from '@repo/shadcn-vue/components/ui/button'
diff --git a/apps/www/content/3.components/3.vibe-coding/web-preview.md b/apps/www/content/3.components/3.vibe-coding/web-preview.md
index edb8b92..8bbcff7 100644
--- a/apps/www/content/3.components/3.vibe-coding/web-preview.md
+++ b/apps/www/content/3.components/3.vibe-coding/web-preview.md
@@ -12,12 +12,12 @@ The `WebPreview` component provides a flexible way to showcase the result of a g
 ## Install using CLI
 
 :::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add web-preview
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/web-preview.json
@@ -27,7 +27,7 @@ The `WebPreview` component provides a flexible way to showcase the result of a g
 
 ## Install Manually
 :::code-group
-```vue [WebPreview.vue] height=300 collapse
+```vue [WebPreview.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -90,7 +90,7 @@ const vBind = computed(() => {
 </template>
 ```
 
-```vue [WebPreviewBody.vue] height=300 collapse
+```vue [WebPreviewBody.vue] height=500 collapse
 <script setup lang="ts">
 import type { IframeHTMLAttributes, VNodeChild } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -128,7 +128,7 @@ const frameSrc = computed(() => (props.src ?? url.value) || undefined)
 </template>
 ```
 
-```vue [WebPreviewConsole.vue] height=300 collapse
+```vue [WebPreviewConsole.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
@@ -223,7 +223,7 @@ function levelClass(level: LogLevel) {
 </template>
 ```
 
-```vue [WebPreviewNavigation.vue] height=300 collapse
+```vue [WebPreviewNavigation.vue]
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
@@ -247,7 +247,7 @@ const props = defineProps<Props>()
 </template>
 ```
 
-```vue [WebPreviewNavigationButton.vue] height=300 collapse
+```vue [WebPreviewNavigationButton.vue] height=500 collapse
 <script setup lang="ts">
 import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
 import type { HTMLAttributes } from 'vue'
@@ -295,7 +295,7 @@ const props = withDefaults(defineProps<Props>(), {
 </template>
 ```
 
-```vue [WebPreviewUrl.vue] height=300 collapse
+```vue [WebPreviewUrl.vue] height=500 collapse
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { Input } from '@repo/shadcn-vue/components/ui/input'
@@ -342,7 +342,7 @@ function handleKeydown() {
 </template>
 ```
 
-```ts [context.ts] height=300 collapse
+```ts [context.ts]
 import type { InjectionKey, Ref } from 'vue'
 import { inject, provide } from 'vue'
 
@@ -387,12 +387,10 @@ Build a simple v0 clone using the [v0 Platform API](https://v0.dev/docs/api/plat
 
 Install the `v0-sdk` package:
 
-```package-install
-npm i v0-sdk
-```
+:pm-install{name="v0-sdk"}
 
 Add the following component to your frontend:
-```vue [app.vue] height=300 collapse
+```vue [app.vue] height=500 collapse
 <script setup lang="ts">
 import { Loader } from '@/components/ai-elements/loader'
 import {
@@ -483,7 +481,7 @@ async function handleSubmit(e: Event) {
 
 Add the following route to your backend:
 
-```ts [server/api/v0.post.ts] height=300 collapse
+```ts [server/api/v0.post.ts]
 import type { ChatsCreateResponse } from 'v0-sdk'
 import { defineEventHandler, readBody } from 'h3'
 import { v0 } from 'v0-sdk'
diff --git a/apps/www/content/3.components/4.documentation/open-in-chat.md b/apps/www/content/3.components/4.documentation/open-in-chat.md
index d03a1aa..addfffb 100644
--- a/apps/www/content/3.components/4.documentation/open-in-chat.md
+++ b/apps/www/content/3.components/4.documentation/open-in-chat.md
@@ -1,6 +1,6 @@
 ---
 title: Open In Chat
-description:
+description: A dropdown menu for opening queries in various AI chat platforms including ChatGPT, Claude, T3, Scira, and v0.
 icon: lucide:message-circle-more
 ---
 
@@ -12,12 +12,12 @@ The `OpenIN` component provides a dropdown menu that allows users to open querie
 ## Install using CLI
 
 ::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add open-in-chat
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/open-in-chat.json
@@ -320,7 +320,7 @@ const href = computed(() => providers.v0.createUrl(query))
 </template>
 ```
 
-```vue [providers/icons/Scira.vue]
+```vue [providers/icons/Scira.vue] height=500 collapse
 <template>
   <svg
     fill="none"
@@ -408,7 +408,7 @@ export { default as SciraIcon } from './Scira.vue'
 export { default as V0Icon } from './V0.vue'
 ```
 
-```ts [providers/index.ts]
+```ts [providers/index.ts] height=500 collapse
 import type { Component } from 'vue'
 import { MessageCircleIcon } from 'lucide-vue-next'
 import {
@@ -515,26 +515,6 @@ export { default as OpenInv0 } from './providers/items/OpenInv0.vue'
 ```
 :::
 
-## Usage
-
-```ts
-import { OpenIn, OpenInChatGPT, OpenInClaude, OpenInContent, OpenInCursor, OpenInScira, OpenInT3, OpenInTrigger, OpenInv0, } from '@/components/ai-elements/open-in-chat'
-```
-
-```vue
-  <OpenIn query="How can I implement authentication in Nuxt.js">
-    <OpenInTrigger />
-    <OpenInContent>
-      <OpenInChatGPT />
-      <OpenInClaude />
-      <OpenInCursor />
-      <OpenInT3 />
-      <OpenInScira />
-      <OpenInv0 />
-    </OpenInContent>
-  </OpenIn>
-```
-
 ## Features
 
 - Pre-configured links to popular AI chat platforms
diff --git a/apps/www/content/3.components/5.utilities/code-block.md b/apps/www/content/3.components/5.utilities/code-block.md
index d7e695b..40b1412 100644
--- a/apps/www/content/3.components/5.utilities/code-block.md
+++ b/apps/www/content/3.components/5.utilities/code-block.md
@@ -1,6 +1,6 @@
 ---
 title: Code Block
-description:
+description: Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.
 icon: lucide:code
 ---
 
@@ -12,12 +12,12 @@ The `CodeBlock` component provides syntax highlighting, line numbers, and copy t
 ## Install using CLI
 
 ::::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add code-block
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/code-block.json
@@ -30,7 +30,7 @@ The `CodeBlock` component provides syntax highlighting, line numbers, and copy t
 Copy and paste the following files into the same folder.
 
 ::::code-group
-  ```vue [CodeBlock.vue]
+  ```vue [CodeBlock.vue] height=500 collapse
   <script setup lang="ts">
   import type { BundledLanguage } from 'shiki'
   import type { HTMLAttributes } from 'vue'
@@ -113,7 +113,7 @@ Copy and paste the following files into the same folder.
   </template>
   ```
 
-  ```vue [CodeBlockCopyButton.vue]
+  ```vue [CodeBlockCopyButton.vue] height=500 collapse
   <script setup lang="ts">
   import type { HTMLAttributes } from 'vue'
   import { Button } from '@repo/shadcn-vue/components/ui/button'
@@ -210,7 +210,7 @@ Copy and paste the following files into the same folder.
   export const CodeBlockKey: InjectionKey<CodeBlockContext> = Symbol('CodeBlock')
   ```
 
-  ```ts [utils.ts]
+  ```ts [utils.ts] height=500 collapse
   import type { Element } from 'hast'
   import type { BundledLanguage, ShikiTransformer } from 'shiki'
   import { codeToHtml } from 'shiki'
@@ -266,21 +266,6 @@ Copy and paste the following files into the same folder.
   ```
 ::::
 
-## Usage
-
-```vue
-import { CodeBlock, CodeBlockCopyButton } from '@/components/ai-elements/code-block'
-```
-
-```vue
-<CodeBlock :code="console.log('hello world')" language="javascript">
-  <CodeBlockCopyButton
-    @copy="() => console.log('Copied code to clipboard')"
-    @error="() => console.error('Failed to copy code to clipboard')"
-  />
-</CodeBlock>
-```
-
 ## Usage with AI SDK
 
 Build a simple code generation tool using the [`experimental_useObject`](https://sdk.vercel.ai/docs/reference/ai-sdk-ui/use-object) hook.
@@ -288,7 +273,7 @@ Build a simple code generation tool using the [`experimental_useObject`](https:/
 Add the following component to your frontend:
 
 ::::code-group
-```vue [app/page.vue]
+```vue [app/page.vue] height=500 collapse
 <script setup lang="ts">
 import { useObject } from '@ai-sdk/vue'
 import { ref } from 'vue'
diff --git a/apps/www/content/3.components/5.utilities/image.md b/apps/www/content/3.components/5.utilities/image.md
index b37a56b..077af77 100644
--- a/apps/www/content/3.components/5.utilities/image.md
+++ b/apps/www/content/3.components/5.utilities/image.md
@@ -1,6 +1,6 @@
 ---
 title: Image
-description:
+description: Displays AI-generated images from the AI SDK.
 icon: lucide:image
 ---
 
@@ -12,12 +12,12 @@ The `Image` component displays AI-generated images from the AI SDK. It accepts a
 ## Install using CLI
 
 :::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add image
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/image.json
@@ -67,27 +67,118 @@ Copy and paste the following files into the same folder.
   ```
 :::
 
-## Usage
+## Usage with AI SDK
 
-```vue
+Build a simple code generation tool using the [`experimental_useObject`](https://sdk.vercel.ai/docs/reference/ai-sdk-ui/use-object) hook.
+
+Add the following component to your frontend:
+
+::::code-group
+```vue [app/page.vue] height=500 collapse
 <script setup lang="ts">
+import { ref } from 'vue'
+
 import { Image } from '@/components/ai-elements/image'
+import { Loader } from '@/components/ai-elements/loader'
+import { PromptInput, PromptInputSubmit, PromptInputTextarea } from '@/components/ai-elements/prompt-input'
+
+const prompt = ref('A futuristic cityscape at sunset')
+const imageData = ref<any>(null)
+const isLoading = ref(false)
+
+async function handleSubmit() {
+  if (!prompt.value.trim())
+    return
+
+  const currentPrompt = prompt.value.trim()
+  prompt.value = ''
+
+  setIsLoading(true)
+
+  try {
+    const response = await fetch('/api/image', {
+      method: 'POST',
+      body: JSON.stringify({ prompt: currentPrompt }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    const data = await response.json()
+    imageData.value = data
+  }
+  catch (error) {
+    console.error('Error generating image:', error)
+  }
+  finally {
+    setIsLoading(false)
+  }
+}
 
-const exampleImage = {
-  base64: 'valid-base64-string',
-  mediaType: 'image/jpeg',
-  uint8Array: new Uint8Array([]),
+function setIsLoading(value: boolean) {
+  isLoading.value = value
 }
 </script>
 
 <template>
-  <Image
-    v-bind="exampleImage"
-    alt="Example generated image"
-    class="h-[150px] aspect-square border"
-  />
+  <div class="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+    <div class="flex flex-col h-full">
+      <div class="flex-1 overflow-y-auto p-4">
+        <div v-if="imageData" class="flex justify-center">
+          <Image
+            v-bind="imageData"
+            alt="Generated image"
+            class="h-[300px] aspect-square border rounded-lg"
+          />
+        </div>
+
+        <Loader v-if="isLoading" />
+      </div>
+
+      <PromptInput
+        class="mt-4 w-full max-w-2xl mx-auto relative"
+        @submit="handleSubmit"
+      >
+        <PromptInputTextarea
+          v-model="prompt"
+          placeholder="Describe the image you want to generate..."
+          class="pr-12"
+        />
+        <PromptInputSubmit
+          :status="isLoading ? 'submitted' : 'ready'"
+          :disabled="!prompt.trim()"
+          class="absolute bottom-1 right-1"
+        />
+      </PromptInput>
+    </div>
+  </div>
 </template>
 ```
+::::
+
+Add the following route to your backend:
+
+::::code-group
+```ts [server/api/image.ts]
+import { openai } from '@ai-sdk/openai'
+import { experimental_generateImage } from 'ai'
+
+export default defineEventHandler(async (event) => {
+  const { prompt } = await readBody<{ prompt: string }>(event)
+
+  const { image } = await experimental_generateImage({
+    model: openai.image('dall-e-3'),
+    prompt,
+    size: '1024x1024',
+  })
+
+  return {
+    base64: image.base64,
+    uint8Array: image.uint8Array,
+    mediaType: image.mediaType,
+  }
+})
+```
+::::
 
 ## Features
 
diff --git a/apps/www/content/3.components/5.utilities/loader.md b/apps/www/content/3.components/5.utilities/loader.md
index dac5280..33c9998 100644
--- a/apps/www/content/3.components/5.utilities/loader.md
+++ b/apps/www/content/3.components/5.utilities/loader.md
@@ -1,10 +1,10 @@
 ---
 title: Loader
-description:
+description: A spinning loader component for indicating loading states in AI applications.
 icon: lucide:loader
 ---
 
-The `Loader`  component provides a spinning animation to indicate loading states in your AI applications. It includes both a customizable wrapper component and the underlying icon for flexible usage.
+The `Loader` component provides a spinning animation to indicate loading states in your AI applications. It includes both a customizable wrapper component and the underlying icon for flexible usage.
 
 :::ComponentLoader{label="Preview" componentName="Loader"}
 :::
@@ -12,12 +12,12 @@ The `Loader`  component provides a spinning animation to indicate loading states
 ## Install using CLI
 
 :::tabs{variant="card"}
-  ::div{label="ai-elements-vue"}
+  ::div{label="AI Elements Vue"}
   ```sh
   npx ai-elements-vue@latest add loader
   ```
   ::
-  ::div{label="shadcn-vue"}
+  ::div{label="shadcn-vue CLI"}
 
   ```sh
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/loader.json
@@ -55,7 +55,7 @@ const props = withDefaults(defineProps<Props>(), {
 </template>
 ```
 
-```vue [LoaderIcon.vue]
+```vue [LoaderIcon.vue] height=500 collapse
 <script setup lang="ts">
 interface Props {
   size?: number
@@ -101,25 +101,13 @@ withDefaults(defineProps<Props>(), {
   ```
 :::
 
-## Usage
-
-```vue
-<script setup lang="ts">
-import { Loader } from '@/components/ai-elements/loader'
-</script>
-
-<template>
-  <Loader />
-</template>
-```
-
 ## Usage with AI SDK
 
 Build a simple chat app that displays a loader before it the response streans by using `status === "submitted"`.
 
 Add the following component to your frontend:
 
-```vue [pages/index.vue]
+```vue [pages/index.vue] height=500 collapse
 <script lang="ts" setup>
 import { useChat } from '@ai-sdk/vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
diff --git a/packages/examples/src/chain-of-thought.vue b/packages/examples/src/chain-of-thought.vue
index 8149e12..69c8932 100644
--- a/packages/examples/src/chain-of-thought.vue
+++ b/packages/examples/src/chain-of-thought.vue
@@ -110,7 +110,7 @@ const exampleImage = {
 
         <ChainOfThoughtStep
           v-if="visibleSteps >= 3"
-          label="Emmanuel Raymond is an Australian product designer, software engineer, and founder. He is currently based in the United States working for Vercel, an American cloud application company."
+          label="Emmanuel Raymond is a Nigerian AI engineer, software developer, and founder. He is passionate about shipping products that solve real problems and make life easier."
           :status="visibleSteps === 3 ? 'active' : 'complete'"
         >
           <template #icon>