ai-elements-vue

用 Vue 快速搭建 AI 聊天界面，省时又专业

AI Elements Vue 是一个基于 shadcn-vue 的 Vue 组件库，旨在帮助开发者快速构建 AI 原生应用。它解决的是在 Vue 生态中缺乏高质量、可复用的 AI 交互组件的问题，提供了一系列开箱即用的 UI 组件，如聊天界面、消息流、输入框、加载状态等，覆盖了 AI 应用常见的交互场景。其核心能力包括：与 shadcn-vue 设计体系无缝集成，支持主题定制；组件设计遵循现代 AI 交互模式，如流式输出、Markdown 渲染、工具调用等；同时借鉴了 Vercel AI SDK 的组件设计理念，保持了良好的扩展性。通过使用该库，开发者可以大幅减少从零搭建 AI 界面的工作量，专注于业务逻辑和模型集成，从而加速产品原型到生产环境的落地。

开源 unknown 对话助手

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 1181

维护状态较活跃

是否开源是

定价模式 unknown

项目数据

分类对话助手

开发团队vuepont

所属国家

官网地址https://www.ai-elements-vue.com

GitHubhttps://github.com/vuepont/ai-elements-vue

定价模式unknown

价格说明定价信息待确认

访问状态

是否开源是

开源协议NOASSERTION

主要语言Vue

技术栈/模型ai,chatbot,elements,shadcn-vue,ui,vercel,vue-components

GitHub 星标★ 1181

30天Star增速

HF 下载量

上线时间2025-08-27 00:00:00

最近更新2026-09-23 00:00:00

维护状态较活跃

中文支持

访问方式

移动端支持

综合评分

收录时间2026-08-09

浏览次数6

使用教程

难度：入门约 10 分钟部署方式：命令行工具 6 步

环境要求

一个已初始化的 shadcn-vue 项目（项目内存在 components.json）
可执行 npx 的 Node.js 环境
推荐开启 TypeScript 以获得更好的开发体验
推荐使用 shadcn-vue 的 CSS Variables 主题模式

安装与启动步骤

1确认项目配置

在 Vue 项目根目录确认已完成 shadcn-vue 配置并存在 components.json，组件会按该文件指定的目录安装。
2安装全部组件

一条命令装齐 AI Elements Vue 的全部组件，CLI 会自动配置 shadcn-vue、写入组件并补充依赖。
```
npx ai-elements-vue@latest
```
3安装指定组件

用 add 子命令安装单个组件，组件名替换成你需要的名称，如 message、conversation。
```
npx ai-elements-vue@latest add message
```
4一次装多个组件

add 后可跟多个组件名，用空格分隔，一次把多个组件装进项目。
```
npx ai-elements-vue@latest add message conversation
```
5改用 registry 安装

如果习惯直接用 shadcn-vue CLI，也可以通过官方 registry 地址安装全部或单个组件。
```
npx shadcn-vue@latest add https://registry.ai-elements-vue.com/message.json
```
6配置 AI Gateway

按推荐做法搭建 Vercel AI Gateway，并把 AI_GATEWAY_API_KEY 写入项目根目录的 .env.local。

关键配置

配置项	必填	说明	示例
`components.json`	是	shadcn-vue 配置文件，决定组件安装到哪个目录	`./components.json`
`AI_GATEWAY_API_KEY`	否	Vercel AI Gateway 密钥，用于接入 AI 能力，按推荐配置	`AI_GATEWAY_API_KEY=sk-xxxxxxxx`

如何确认成功

命令执行无报错，打开 components.json 中指定的组件目录，能看到刚安装的 AI Elements Vue 组件文件。

常见问题

Q：运行命令后组件装到了哪里？

A：安装位置由项目已有的 shadcn-vue 配置决定，即 components.json 里配置的组件目录。

Q：必须预先配置 shadcn-vue 吗？

A：推荐已有 shadcn-vue 配置。执行安装全部组件的命令时，若尚未配置，CLI 也会帮你完成 shadcn-vue 的初始化。

Q：不懂有哪些组件可以装怎么办？

A：README 中给出的示例组件名有 message 和 conversation，可先用这两个试装，其余名称请查阅官网文档。

Q：一定要配置 AI_GATEWAY_API_KEY 吗？

A：这是官方推荐做法，用于接入 Vercel AI Gateway。它属于推荐项，不写密钥同样可以先把组件安装到项目中。

注意事项

命令里的、是占位符，执行前要替换成真实组件名。
AI_GATEWAY_API_KEY 应写入 .env.local，不要提交到 Git 仓库。
推荐使用 shadcn-vue 的 CSS Variables 模式做主题定制，并启用 TypeScript。

核心亮点

基于 shadcn-vue，样式可定制且与现有项目风格统一
内置聊天、消息流等常用 AI 组件，减少重复造轮子
积极借鉴 Vercel AI 设计模式，交互体验现代

不足之处

项目仍处于早期，组件覆盖范围有限
文档和示例相对简略，上手需参考 shadcn-vue 文档

适用场景

快速搭建 AI 聊天机器人前端界面
在 Vue 项目中集成流式对话交互
构建 AI 工具链的管理面板，如提示词调试、会话管理

替代项目

shadcn-vue（基础组件库）、Vue Chat UI、nuxt-ai

项目介绍

ai-elements-vue 是开发框架领域的开源项目，由 vuepont 开发，2025 年首次发布。

在全站 13,090 个收录项目中，它的 GitHub 星标数（1,181）位列前 30%，在开发框架分类中处于中上游。

近 42 天，它的 GitHub 星标从 1,128 增加到 1,181，净增 53。

项目保持着较活跃的维护节奏，最近一次代码更新于 2026-09-23。从国内网络环境看，可直接访问。

它主要面向的使用场景是：快速搭建AI聊天机器人前端界面。同类可对比的替代方案包括 shadcn-vue（基础组件库）、Vue Chat UI、nuxt-ai。

上一篇：modelfusion

下一篇：poe-api-wrapper