🚀 快速安装
复制以下命令并运行，立即安装此 Skill：
npx skills add https://github.com/vercel/ai-elements --skill ai-elements💡 提示：需要 Node.js 和 NPM
AI Elements
AI Elements 是一个基于 shadcn/ui 构建的组件库和自定义注册表，可帮助您更快地构建 AI 原生应用。它提供了预构建的组件，如对话、消息等。
安装 AI Elements 非常简单，可以通过几种方式完成。您可以使用专用的 CLI 命令以获得最快的设置，或者，如果您已经采用了 shadcn 的工作流程，也可以通过标准的 shadcn/ui CLI 进行集成。
重要提示： 请使用项目的包管理器运行所有 CLI 命令：
npx ai-elements@latest、pnpm dlx ai-elements@latest或bunx --bun ai-elements@latest— 具体取决于项目的packageManager。以下示例使用npx ai-elements@latest，但请为项目替换为正确的运行器。
前提条件
在安装 AI Elements 之前，请确保您的环境满足以下要求：
- Node.js，版本 18 或更高
- 一个已安装 AI SDK 的 Next.js 项目。
- 您的项目中已安装 shadcn/ui。如果您尚未安装，运行任何安装命令都会自动为您安装。
- 我们还强烈建议使用 AI Gateway，并将
AI_GATEWAY_API_KEY添加到您的env.local文件中，这样您就不必使用每个提供商的 API 密钥。AI Gateway 每月还提供 5 美元的用量，方便您试验各种模型。您可以在此处获取 API 密钥。
安装组件
您可以使用 AI Elements CLI 或 shadcn/ui CLI 来安装 AI Elements 组件。两者都能达到相同的结果：将所选组件的代码及其任何必要的依赖项添加到您的项目中。
CLI 会下载组件的代码并将其集成到您的项目目录中（通常是在您的 components 文件夹下）。默认情况下，AI Elements 组件会被添加到 @/components/ai-elements/ 目录中（或您在 shadcn 组件设置中配置的任何文件夹）。
运行命令后，您应该在终端中看到文件已添加的确认信息。然后，您就可以开始在代码中使用该组件了。
使用方法
一旦安装了 AI Elements 组件，您就可以像使用任何其他 React 组件一样在应用中导入和使用它。这些组件作为代码库的一部分被添加（而不是隐藏在库中），因此使用起来非常自然。
示例
安装 AI Elements 组件后，您可以像使用任何其他 React 组件一样在应用中使用它们。例如：
"use client";
import {
Message,
MessageContent,
MessageResponse,
} from "@/components/ai-elements/message";
import { useChat } from "@ai-sdk/react";
const Example = () => {
const { messages } = useChat();
return (
<>
{messages.map(({ role, parts }, index) => (
<Message from={role} key={index}>
<MessageContent>
{parts.map((part, i) => {
switch (part.type) {
case "text":
return (
<MessageResponse key={`${role}-${i}`}>
{part.text}
</MessageResponse>
);
}
})}
</MessageContent>
</Message>
))}
</>
);
};
export default Example;
在上面的示例中，我们从 AI Elements 目录导入了 Message 组件，并将其包含在 JSX 中。然后，我们使用 MessageContent 和 MessageResponse 子组件来组合该组件。您可以像自己编写的组件一样对其进行样式设置或配置——由于代码位于您的项目中，您甚至可以打开组件文件查看其工作原理或进行自定义修改。
可扩展性
所有 AI Elements 组件都尽可能多地接受原始属性。例如，Message 组件扩展了 HTMLAttributes<HTMLDivElement>，因此您可以传递任何 div 支持的属性。这使得用您自己的样式或功能扩展组件变得非常容易。
自定义
安装后，无需额外设置。组件的样式（Tailwind CSS 类）和脚本已经集成。您可以立即在应用中开始与组件交互。
例如，如果您想移除 Message 的圆角，可以转到 components/ai-elements/message.tsx 并移除 rounded-lg，如下所示：
export const MessageContent = ({
children,
className,
...props
}: MessageContentProps) => (
<div
className={cn(
"flex flex-col gap-2 text-sm text-foreground",
"group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground group-[.is-user]:px-4 group-[.is-user]:py-3",
className
)}
{...props}
>
<div className="is-user:dark">{children}</div>
</div>
);
故障排除
为什么我的组件没有样式？
确保您的项目在 Tailwind 4 中为 shadcn/ui 正确配置——这意味着有一个 globals.css 文件，它导入了 Tailwind 并包含了 shadcn/ui 的基础样式。
我运行了 AI Elements CLI，但没有任何东西添加到我的项目中
请仔细检查：
- 您当前的工作目录是项目的根目录（
package.json所在的位置）。 - 您的
components.json文件（如果使用 shadcn 风格的配置）已正确设置。 - 您使用的是最新版本的 AI Elements CLI：
npx ai-elements@latest
如果以上都不行，请随时在 GitHub 上提出问题。
主题切换不起作用——我的应用一直处于浅色模式
确保您的应用使用的是 shadcn/ui 和 AI Elements 所期望的相同 data-theme 系统。默认实现是在 <html> 元素上切换一个 data-theme 属性。确保您的 tailwind.config.js 相应地使用了 class 或 data 选择器。
组件导入失败，提示“找不到模块”
检查文件是否存在。如果存在，请确保您的 tsconfig.json 中有正确的 @/ 路径别名，例如：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}
我的 AI 编码助手无法访问 AI Elements 组件
- 验证您的配置文件语法是否为有效的 JSON。
- 检查文件路径对于您的 AI 工具是否正确。
- 在进行更改后重新启动您的编码助手。
- 确保您有稳定的互联网连接。
仍然卡住了？
如果以上答案均无帮助，请在 GitHub 上提出问题，会有人乐意提供帮助。
可用组件
有关每个组件的详细文档，请参阅 references/ 文件夹。
📄 原始文档
完整文档（英文）：
https://skills.sh/vercel/ai-elements/ai-elements
💡 提示：点击上方链接查看 skills.sh 原始英文文档，方便对照翻译。
评论(0)