尤雨溪力荐！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 社区的主流最佳实践：

1. 基于 shadcn-vue：这意味着它不是一个封闭的黑盒 UI 库。它的组件代码会直接安装到你的项目中（Copy-paste pattern），你可以拥有对源码的完全控制权，想怎么改就怎么改。
2. Tailwind CSS 驱动：样式完全通过 Tailwind Utility Classes 实现，轻量且易于定制。
3. TypeScript 支持：提供了完整的类型定义，开发体验丝滑。
4. 开箱即用：提供了 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-input

3. 在代码中使用

安装完成后，这些组件就会出现在你的 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