概述

AI Elements Vue 提供了预构建、可自定义的 Vue 组件，专为 AI 应用设计，包括对话（conversations）、消息（messages）、代码块（code blocks）、推理展示（reasoning displays）等。通过 CLI 工具，你可以轻松将这些组件添加到你的 Vue.js 和 Nuxt.js 项目中。

安装

你可以直接使用 npx 调用 AI Elements Vue CLI，也可以全局安装：

# 直接使用（推荐）
npx ai-elements-vue@latest

# 或通过 shadcn-vue CLI 使用
npx shadcn-vue@latest add https://registry.ai-elements-vue.com/all.json

前置要求

在使用 AI Elements Vue 之前，请确保你的项目满足以下要求：

• Node.js 18 或更高版本
• 已安装 AI SDK 的 Vue.js 或 Nuxt.js 项目
• 项目中已初始化 shadcn-vue（运行过 npx shadcn-vue@latest init）
• 已配置 Tailwind CSS（AI Elements Vue 仅支持 CSS Variables 模式）

使用方法

安装所有组件

一次性安装所有可用的 AI Elements Vue 组件：

npx ai-elements-vue@latest

该命令将：

• 如果尚未配置，自动设置 shadcn-vue
• 将所有 AI Elements Vue 组件安装到你配置的组件目录中
• 为项目添加必要的依赖项

安装特定组件

使用 add 命令安装单个或多个组件：

npx ai-elements-vue@latest add <component-name>

# 或一次安装多个：
npx ai-elements-vue@latest add <name1> <name2> ...

示例：

# 安装 message 组件
npx ai-elements-vue@latest add message

# 安装 conversation 组件
npx ai-elements-vue@latest add conversation

# 一次安装多个组件
npx ai-elements-vue@latest add message conversation

替代方案：使用 shadcn-vue CLI

你也可以使用标准的 shadcn-vue CLI 安装组件：

# 安装所有组件
npx shadcn-vue@latest add https://registry.ai-elements-vue.com/all.json

# 安装特定组件
npx shadcn-vue@latest add https://registry.ai-elements-vue.com/message.json

可用组件

AI Elements Vue 包含以下组件：

组件	描述
Chatbot
chain-of-thought	展示 AI 推理和思维过程
checkpoint	对话检查点组件
confirmation	工具执行审批工作流
context	展示上下文（Context）消耗
conversation	聊天对话容器
inline-citation	行内来源引用
message	带头像的单条聊天消息
model-selector	AI 模型选择组件
plan	计划与任务规划展示组件
prompt-input	带模型选择功能的高级输入组件
queue	带附件的消息和待办队列
reasoning	展示 AI 推理和思维过程
shimmer	文字闪烁动画效果
sources	来源归属组件
suggestion	快捷操作建议
task	任务完成状态追踪
tool	工具使用可视化
Workflow
canvas	用于工作流可视化的 VueFlow 画布
connection	工作流边（edges）的连接线组件
controls	画布控制（缩放、适应视图等）
edge	工作流节点间连接的边组件
node	工作流图中的节点组件
panel	画布覆盖层的面板组件
toolbar	工作流元素的节点工具栏
Vibe-Coding
artifact	展示代码或文档
web-preview	内嵌网页预览
Documentation
open-in-chat	在聊天中打开某条消息的按钮
Utilities
code-block	带语法高亮和复制功能的代码展示
image	AI 生成图像展示组件
loader	AI 操作的加载状态

工作原理

AI Elements Vue CLI 的工作流程如下：

1. 自动检测包管理器（npm、pnpm、yarn 或 bun）
2. 从 https://registry.ai-elements-vue.com/all.json 获取组件注册表
3. 在底层使用 shadcn-vue CLI 安装组件
4. 添加依赖项并集成到你现有的 shadcn-vue 配置中

组件会被安装到你配置的 shadcn-vue 组件目录中（通常为 @/components/ai-elements/），并成为你代码库的一部分，允许完全自定义。

配置

AI Elements Vue 使用你现有的 shadcn-vue 配置。组件将被安装到 components.json 文件中指定的目录。

推荐设置

为了获得最佳体验，我们建议：

1. AI Gateway：设置 Vercel AI Gateway，并在 .env.local 中添加 AI_GATEWAY_API_KEY
2. CSS Variables：使用 shadcn-vue 的 CSS Variables 模式进行主题定制
3. TypeScript：启用 TypeScript 以获得更好的开发体验

贡献指南

如果您希望为 AI Elements Vue 项目做出贡献，请按照以下步骤操作：

1. Fork 该项目仓库
2. 创建一个新的分支
3. 在 packages/elements 目录下对组件进行修改
4. 向 main 分支提交 Pull Request（PR）

致谢

本项目受到以下几个优秀项目的启发：

• ai-elements - AI 组件（AI component）设计理念
• shadcn-vue - UI 组件（UI component）基础架构

---

由 vuepont 倾心打造 ❤️

ai-elements-vue 快速上手指南

环境准备

在使用 ai-elements-vue 前，请确保你的项目满足以下要求：

• Node.js 18 或更高版本
• 已创建的 Vue.js 或 Nuxt.js 项目，并已安装 AI SDK
• 项目中已初始化 shadcn-vue（运行过 npx shadcn-vue@latest init）
• 已配置 Tailwind CSS，且启用 CSS Variables 模式

💡 推荐同时配置 TypeScript 以获得更好的开发体验。

安装步骤

方式一：使用 ai-elements-vue CLI（推荐）

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

# 安装指定组件（例如 message 和 conversation）
npx ai-elements-vue@latest add message conversation

方式二：通过 shadcn-vue CLI 安装

# 安装全部组件
npx shadcn-vue@latest add https://registry.ai-elements-vue.com/all.json

# 安装单个组件（例如 message）
npx shadcn-vue@latest add https://registry.ai-elements-vue.com/message.json

🌐 国内用户若遇到网络问题，可尝试配置 npm 镜像或使用代理加速下载。

安装完成后，组件将被复制到你项目中 components.json 配置的目录下（通常为 @/components/ai-elements/），可直接在代码中按需引入和自定义。

基本使用

安装完成后，即可在 Vue 组件中使用。以下是一个简单的聊天消息展示示例：

<template>
  <div class="p-4">
    <Message
      :role="'user'"
      :content="'你好！'"
    />
    <Message
      :role="'assistant'"
      :content="'你好！有什么我可以帮你的吗？'"
    />
  </div>
</template>

<script setup>
import { Message } from '@/components/ai-elements'
</script>

✅ 所有组件均为本地文件，支持直接修改样式和逻辑，完全可控。