
在 AI 应用开发领域,React 生态往往占据先发优势。Vercel 推出的 AI SDK 及相关组件库优先支持 Next.js 和 React,这让不少 Vue 开发者感到有些被动。
不过,局面正在改变。近期,Vue 社区迎来一个重磅消息:AI Elements Vue 正式发布。
这是一个基于 shadcn-vue 构建的、专门用于快速搭建 AI 应用的组件库。它的出现填补了 Vue 生态在 AI UI 领域的空白,发布仅两天,就获得了 Vue 作者 尤雨溪(Evan You) 的转发和点赞。

什么是 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:不仅是一个输入框,还集成了模型选择器、附件上传等复杂交互。

