ai-elements-vue

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

开源 🏷️定价信息待确认 ✅ 目前可打开对话助手 🍴 复刻 99 🐛 待处理 8 👀 关注 4

访问官网 ↗ GitHub ↗

GitHub 星标 ★ 1201

维护状态维护中

是否开源开源

定价模式 🏷️定价信息待确认

项目预览

项目数据

分类对话助手

开发团队vuepont

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

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

定价模式🏷️定价信息待确认

价格说明定价信息待确认

访问状态✅ 目前可打开

是否开源是

开源协议NOASSERTION

主要语言Vue

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

GitHub 星标★ 1201

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

代码更新2026-10-11

仓库体积3.1 MB

本站数据更新2026-11-10

维护状态维护中

收录时间2026-08-09

浏览次数7

项目介绍

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

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 1201

技术标签

ai chatbot ui vercel

使用教程

难度：入门约 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`