AI Skills
ai-elements

ai-elements

热门

使用 ai-elements 组件构建 AI 聊天界面——对话、消息、工具展示、提示输入等。当用户想要构建聊天机器人、AI 助手界面或任何 AI 驱动的聊天界面时使用。

2172Star
246Fork
更新于 2026/3/12
获取 Skill源代码

相关 Skills

prompt-optimizer23万design-system11万web-artifacts-builder15万
SKILL.md
readonly只读
name
ai-elements
description

使用 ai-elements 组件构建 AI 聊天界面——对话、消息、工具展示、提示输入等。当用户想要构建聊天机器人、AI 助手界面或任何 AI 驱动的聊天界面时使用。

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 Gateway 密钥。

安装组件

您可以使用 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 支持的 props。这使得使用您自己的样式或功能扩展组件变得容易。

自定义

安装后，无需额外设置。组件的样式（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——这意味着要有一个导入 Tailwind 并包含 shadcn/ui 基础样式的 globals.css 文件。

我运行了 AI Elements CLI，但项目中没有添加任何内容

请检查：

  • 您当前的工作目录是项目的根目录（package.json 所在的位置）。
  • 您的 components.json 文件（如果使用 shadcn 风格的配置）设置正确。
  • 您正在使用最新版本的 AI Elements CLI：
npx ai-elements@latest

如果所有方法都失败，请随时在 GitHub 上提交 issue。

主题切换不起作用——我的应用始终处于浅色模式

确保您的应用使用与 shadcn/ui 和 AI Elements 期望的相同 data-theme 系统。默认实现会在 <html> 元素上切换 data-theme 属性。确保您的 tailwind.config.js 相应地使用 class 或 data- 选择器。

组件导入失败，提示“模块未找到”

检查文件是否存在。如果存在，请确保您的 tsconfig.json 中有正确的 @/ 路径别名，例如：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

我的 AI 编码助手无法访问 AI Elements 组件

  1. 验证您的配置文件语法是否为有效的 JSON。
  2. 检查文件路径对于您的 AI 工具是否正确。
  3. 更改后重新启动您的编码助手。
  4. 确保您有稳定的互联网连接。

仍然卡住？

如果这些答案都没有帮助，请在 GitHub 上提交 issue，会有人乐意提供帮助。

可用组件

有关每个组件的详细文档，请参阅 references/ 文件夹。