介绍

什么是 AI Elements Vue 以及为什么你应该使用它。

AI Elements Vue 是 AI-Elements 的 Vue 版本，这是一个基于 shadcn-vue 构建的组件库和自定义注册表，可帮助你更快地构建 AI 原生应用程序。它提供了预构建的组件，如对话、消息等。

安装 AI Elements Vue 非常简单，可以通过几种方式完成。你可以使用专用的 CLI 命令进行快速设置，或者如果你已经采用了 shadcn 的工作流程，可以通过标准的 shadcn-vue CLI 进行集成。

AI Elements Vue
shadcn-vue CLI
npx ai-elements-vue@latest

快速开始

以下是一些使用 AI Elements Vue 组件可以实现的基本示例。

前置要求

在安装 AI Elements 之前，请确保你的环境满足以下要求：

  • Node.js，版本 18 或更高
  • 已安装 AI SDK 的 Vue.js 或 Nuxt.js 项目
  • 项目中已安装 shadcn-vue。如果尚未安装，运行任何安装命令都会自动为你安装它
  • 我们还强烈建议使用 AI Gateway 并将 AI_GATEWAY_API_KEY 添加到你的 env.local 中，这样你就不需要为每个提供商使用 API 密钥。AI Gateway 每月还提供 $5 的使用额度，让你可以尝试不同的模型。你可以在此处获取 API 密钥。

安装组件

你可以使用 AI Elements Vue CLI 或 shadcn-vue CLI 来安装 AI Elements Vue 组件。两者都能达到相同的效果：将所选组件的代码和所需的依赖项添加到你的项目中。

CLI 将下载组件的代码并将其集成到你的项目目录中（通常在组件文件夹下）。默认情况下，AI Elements 组件会添加到 @/components/ai-elements/ 目录（或你在 shadcn-vue 组件设置中配置的任何文件夹）。

运行命令后，你应该在终端中看到文件已添加的确认信息。然后你就可以在代码中使用该组件了。

Edit this page
使用指南