Vue AI 生态补强！AI Elements Vue 正式兼容 shadcn

Vue 社区迎来新的 AI 组件库：AI Elements Vue。它基于 shadcn-vue 构建，目标是让 Vue 开发者拥有和 React 一样便捷的 AI 对话界面开发体验。项目发布仅两天，就获得了 Vue 作者尤雨溪的转发与点赞。

什么是 AI Elements Vue

AI Elements Vue 是 Vercel AI Elements 的 Vue 移植版本，由 Charlie Wang、peoray_ 两位开发者联合打造。它把构建 ChatGPT 风格对话界面所需的 Markdown 解析、代码块高亮、流式输出、光标动效等逻辑封装好，开发者直接组装组件即可。

不止简单移植，直击 Vue 开发痛点

AI Elements Vue 不是简单照搬，而是贴合 Vue 社区的主流技术实践：

• 基于 shadcn-vue，完全掌控组件源码：采用复制粘贴模式，组件代码直接落到项目里，没有黑盒依赖，可随意修改。
• Tailwind CSS 驱动，样式灵活轻量化：全部使用 Tailwind 工具类，无需维护独立样式文件，调整主题和外观更简单。
• 完整 TypeScript 支持：全套类型定义，Vue 3 + TS 项目接入顺滑。
• 配套 CLI 工具，接入简单高效：一行命令完成组件导入，省去手动复制文件的麻烦。

全套组件，覆盖 AI 聊天主流场景

目前配齐了 AI 聊天应用的核心组件：

• Message / Conversation：对话气泡组件，区分 AI 与用户消息，支持头像展示。
• PromptInput：增强版输入框，内置模型切换、附件上传等交互。
• CodeBlock：代码块组件，自带语法高亮与一键复制。
• Response / Loader：AI 思考状态动画与流式加载效果。
• Suggestion：快捷提问气泡，提供推荐提示词。

上手几乎零成本，快速跑通 AI 聊天页面

熟悉 shadcn 工作流的开发者几乎没有学习门槛，简单几步即可接入，适配 Vue、Nuxt 项目。前提条件是项目已集成 shadcn-vue 与 Tailwind CSS。

支持两种安装方式：

# 安装全部组件
npx ai-elements-vue@latest

# 按需安装单个组件，例：PromptInput
npx ai-elements-vue@latest add prompt-input

组件会自动写入项目的 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 class='chat-container'>
    <HumanMessage content='帮我写一个 Vue 组件' />
    <AIMessage content='当然，这是你要的组件代码...' />

    <div class='fixed bottom-0 w-full'>
      <PromptInput
        placeholder='输入你的问题...'
        :models='["gpt-4", "claude-3-5-sonnet"]'
      />
    </div>
  </div>
</template>

相关链接

• GitHub 仓库：https://github.com/vuepont/ai-elements-vue
• 官方文档：https://www.ai-elements-vue.com