Chore/update docs

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>

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>

apps/www/content/1.overview/1.Introduction.md

@@ -1,60 +1,51 @@
 ---
 title: Introduction
-description:
+description: What is AI Elements Vue 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"}
-:::
-
-:::ComponentLoader{label="Conversation" componentName="Conversation"}
-:::
-
-:::ComponentLoader{label="PromptInput" componentName="PromptInput"}
-:::
-
-:::ComponentLoader{label="Image" componentName="Image"}
-:::
-
-:::ComponentLoader{label="Loader" componentName="Loader"}
+  ```sh
+  npx shadcn-vue@latest add https://registry.ai-elements-vue.com/all.json
+  ```
+  ::
 :::
 
-:::ComponentLoader{label="Suggestion" componentName="Suggestion"}
-:::
+## Quick Start
 
-:::ComponentLoader{label="Shimmer" componentName="Shimmer"}
-:::
+Here are some basic examples of what you can achieve using components from AI Elements Vue.
 
-:::ComponentLoader{label="OpenInChat" componentName="OpenInChat"}
+:::ElementsDemo
 :::
 
-:::ComponentLoader{label="Task" componentName="Task"}
-:::
+## Prerequisites
 
-:::ComponentLoader{label="Sources" componentName="Sources"}
-:::
+Before installing AI Elements, make sure your environment meets the following requirements:
 
-:::ComponentLoader{label="Plan" componentName="Plan"}
-:::
+- [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="Queue" componentName="Queue"}
-:::
+  ::alert{type="info" icon="lucide:info"}
+    AI Elements is built targeting Vue 3 and Tailwind CSS 4.
+  ::
 
-:::ComponentLoader{label="ChainOfThought" componentName="ChainOfThought"}
-:::
+## Installing Components
 
-:::ComponentLoader{label="InlineCitation" componentName="InlineCitation"}
-:::
+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="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.

apps/www/content/1.overview/3.usage.md → 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,30 +13,40 @@ 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>
 
 <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
 

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.