AI Elements Vue，帮助你更快的构建 AI 应用程序

大家好，我是 vue3-vant-mobile 的作者，也是多个 Vue 社区项目的长期贡献者。

最近两个月我主要在折腾一个新项目：AI Elements Vue，一个面向 AI Chatbot 场景的 Vue 组件库。

这个项目曾上过阮一峰老师的科技周刊，算是被认真看过的一次。

很多前端都有做组件库的想法，我也是一样，只是这次做的方向稍微有点不一样。

它基于 shadcn-vue 和 tailwindcss，同时配了一套自己的注册表服务，所有组件从我们自己的注册表中获取。

最早在 shadcn-vue 支持自定义注册表时，我就在琢磨做一套 Chat 组件库了，再加上我一直在写各种 chat 相关组件。直到我在 Vercel 看到了 ai-elements 项目，干脆不再犹豫------于是就有了完全对标的 AI Elements Vue。

简单讲，AI Elements Vue 是一组围绕聊天场景做扩展的组件集合，但还是沿用 shadcn 的那套设计和工具链。

这意味着你能享受到 shadcn 的全部优点：

高可定制：样式和交互都能深度改造
按需引入：按需引入，用多少拿多少
完全透明：所有组件都可以修改，而不是黑盒封装

和社区里已有的 ant-design-vue-x、element-plus-x 等 AI 组件库相比，我们是从 shadcn 体系出发，在同一套设计系统和工具链上扩展 AI 场景组件。

除了常规的聊天窗口，我们也做了很多你在 ChatGPT、Cursor 里常见的那种交互形态，对应的组件基本都能找到。这也是叫「AI 元素」的原因------更像是一盒可以随手拼搭的积木。

另外，我们还提供了 MCP 服务，你在项目里接不同家的模型和服务时，会省不少时间。

下面是目前已经有的组件列表，后面也会根据大家的反馈慢慢往上加。

组件	描述
Chatbot
`actions`	AI 回复的交互操作按钮
`branch`	会话流程的分支可视化
`chain-of-thought`	展示 AI 的推理链路和思考过程
`code-block`	带语法高亮与复制功能的代码显示
`context`	展示上下文消耗情况
`conversation`	聊天会话的容器组件
`image`	AI 生成图片的展示组件
`inline-citation`	行内来源引用
`loader`	AI 操作的加载状态
`message`	带头像的单条聊天消息
`open-in-chat`	将消息在聊天中打开的按钮
`plan`	计划与任务规划展示组件
`prompt-input`	带模型选择的高级输入组件
`queue`	支持附件的消息与待办队列
`reasoning`	展示 AI 推理和思考过程
`response`	格式化的 AI 回复展示
`shimmer`	文字闪烁炫光效果
`sources`	来源引用展示
`suggestion`	快捷操作建议
`task`	任务完成进度跟踪
`tool`	工具使用可视化
`confirmation`	工具执行前的确认流程
Vibe-Coding
`artifact`	展示代码或文档的容器
`web-preview`	内嵌网页预览
Workflow
`canvas`	用于工作流可视化的 VueFlow 画布
`connection`	工作流连线组件
`controls`	画布控制（缩放、适配视图等）
`edge`	连接工作流节点的边组件
`node`	工作流图的节点组件
`panel`	画布覆盖层面板组件
`toolbar`	工作流节点的工具栏

下面说说使用，有一些必要的前提条件。

你需要先安装 Node.js 18 或以上版本。
AI Elements Vue 基于 shadcn-vue, 所以你需要先安装 shadcn-vue，以及设置好 tailwindcss。
最后安装 AI SDK, 因为组件会用到 AI SDK。

我们有自己的注册表和cli，你可以直接使用我们的cli安装组件，也可以使用shadcn-vue的cli安装组件。

比如使用我们的 cli 安装 message 组件:

bash 复制代码

npx ai-elements-vue@latest add message

或者使用 shadcn-vue 的 cli 安装 message 组件:

bash 复制代码

npx shadcn-vue@latest add https://registry.ai-elements-vue.com/message.json

你也可以一次性安装所有组件：

bash 复制代码

npx ai-elements-vue@latest

是不是比较方便。生成的组件会和 shadcn-vue 的组件一样，被放在了 components/ui 目录下。

目前 AI Elements Vue 的组件会放置在 components/ai-elements 目录下，未来会移动到 components/ui 目录下。

然后你可以结合其它 AI 组件库直接在组件中使用，比如：

vue 复制代码

<template>
  <div class="h-[498px] rounded-xl border">
    <Conversation class="relative h-full">
      <ConversationContent class="space-y-2">
        <Message v-for="(m, idx) in visibleMessages" :key="m.key" :from="idx % 2 === 0 ? 'user' : 'assistant'">
          <MessageContent>{{ m.value }}</MessageContent>
          <MessageAvatar :src="m.avatar" :name="m.name" />
        </Message>
      </ConversationContent>
      <ConversationScrollButton />
    </Conversation>
  </div>
</template>

下周，我们将发布 v1 版本, 主要是更新文档和增加示例，并修复一些已知问题。

最后，欢迎大家来试用 AI Elements Vue，并提出建议和反馈。如果大家喜欢，请给个 star 支持一下，谢谢。

AI Elements Vue 文档地址：ai-elements-vue.com
AI Elements Vue 项目地址：github.com/vuepont/ai-...