尤雨溪力荐！Vue 终于有了自己的 AI 组件库！
在 AI 应用开发的浪潮中，React 生态似乎总是占据着先发优势。Vercel 推出的 AI SDK 和相关组件库，往往优先支持 Next.js 和 React，这让不少 Vue 开发者常常感到“羡慕嫉妒恨”。
但是，局面正在改变。
就在最近，Vue 社区迎来了一个重磅好消息：AI Elements Vue 正式发布。
这是一个基于 shadcn-vue 构建的、专门用于快速搭建 AI 应用的组件库。它的出现填补了 Vue 生态在 AI UI 领域的空白，发布仅两天，就获得了 Vue 作者 尤雨溪（Evan You） 的转发和点赞。
下面我们来聊聊这个让尤雨溪都关注的组件库，到底成色如何？它能为 Vue 开发者带来什么？
什么是 AI Elements Vue？
简单来说，AI Elements Vue 是 Vercel 官方 AI Elements 的非官方社区复刻版（Vue Port）。
它由开发者 Charlie Wang (@cwandev) 和 @peoray_ 共同构建。其核心目标非常明确：让 Vue 开发者也能像 React 开发者一样，通过简单的组件拼装，快速构建出高质量的 AI 聊天界面。
在此之前，如果你想用 Vue 做一个类似 ChatGPT 的界面，你可能需要手写大量的 CSS，处理 Markdown 渲染、代码高亮、流式输出的光标闪烁效果等等。而现在，这些“脏活累活”都被封装成了开箱即用的组件。
核心亮点：不仅仅是“复刻”
虽然是移植项目，但 AI Elements Vue 在技术选型上非常贴合当前 Vue 社区的主流最佳实践：
- 基于 shadcn-vue：这意味着它不是一个封闭的黑盒 UI 库。它的组件代码会直接安装到你的项目中（Copy-paste pattern），你可以拥有对源码的完全控制权，想怎么改就怎么改。
- Tailwind CSS 驱动：样式完全通过 Tailwind Utility Classes 实现，轻量且易于定制。
- TypeScript 支持：提供了完整的类型定义，开发体验丝滑。
- 开箱即用：提供了 CLI 工具，一行命令即可集成。
都有哪些组件？
目前该库已经实现了构建 AI Chat 应用所需的大部分核心组件：
- Message / Conversation：处理聊天气泡、头像、角色区分（User vs AI）。
- PromptInput：不仅是一个输入框，还集成了模型选择器、附件上传等复杂交互。
- CodeBlock：带有语法高亮和“一键复制”功能的代码展示块，这是 AI 编程助手的标配。
- Response / Loader：处理 AI 正在思考（Thinking）的状态动画。
- Suggestion：快捷建议气泡，引导用户提问。
上手体验：快，真的很快
对于习惯了 shadcn 工作流的开发者来说，使用 AI Elements Vue 几乎没有学习成本。
1. 初始化
首先，你需要确保你的项目是 Vue 或 Nuxt，并且已经配置好了 shadcn-vue 和 Tailwind CSS。
2. 安装组件
它提供了一个极其方便的 CLI 工具。你可以一次性安装所有组件：
npx ai-elements-vue@latest或者按需安装，比如只想要一个炫酷的输入框：
npx ai-elements-vue@latest add prompt-input3. 在代码中使用
安装完成后，这些组件就会出现在你的 components/ui 或指定目录下。引入后即可直接使用：
<script setup lang="ts"> import { AIMessage, HumanMessage } from '@/components/ai-elements/message' import { PromptInput } from '@/components/ai-elements/prompt-input' </script> <template> <div> <HumanMessage content="帮我写一个 Vue 组件" /> <AIMessage content="当然，这是你要的组件代码..." /> <div class="fixed bottom-0 w-full"> <PromptInput placeholder="输入你的问题..." :models="['gpt-4', 'claude-3-5-sonnet']" /> </div> </div> </template>AI Elements Vue 的出现填补了生态空白，降低了 Vue 开发者构建现代化 AI 应用的门槛。目前还处于早期阶段，如果你正在使用 Nuxt 或 Vue 3 开发 AI 相关的应用，这个库可以帮你快速实现 AI 聊天界面，可以尝试下。
相关链接：
- GitHub 仓库: github.com/vuepont/ai-elements-vue
- 官方文档: www.ai-elements-vue.com
