ai-elements by vercel/ai-elements
npx skills add https://github.com/vercel/ai-elements --skill ai-elementsAI Elements 是一个基于 shadcn/ui 构建的组件库和自定义注册表,旨在帮助您更快地构建 AI 原生应用。它提供了对话、消息等预构建组件。
安装 AI Elements 非常简单,可以通过几种方式完成。您可以使用专用的 CLI 命令进行快速设置,或者如果您已经采用了 shadcn/ui 的工作流,也可以通过标准的 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 之前,请确保您的环境满足以下要求:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
AI_GATEWAY_API_KEY 添加到您的 env.local 中,这样您就不必使用每个提供商的 API 密钥。AI Gateway 每月还提供 5 美元的使用额度,供您试验模型。您可以在此处获取 API 密钥。您可以使用 AI Elements CLI 或 shadcn/ui CLI 来安装 AI Elements 组件。两者都能达到相同的结果:将所选组件的代码和任何所需的依赖项添加到您的项目中。
CLI 将下载组件的代码并将其集成到您的项目目录中(通常在您的组件文件夹下)。默认情况下,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 正确配置——这意味着要有一个导入 Tailwind 并包含 shadcn/ui 基础样式的 globals.css 文件。
请仔细检查:
package.json 所在的位置)。npx ai-elements@latest
如果所有方法都失败了,请随时在 GitHub 上提交问题。
确保您的应用使用的是 shadcn/ui 和 AI Elements 期望的相同 data-theme 系统。默认实现在 <html> 元素上切换 data-theme 属性。请确保您的 tailwind.config.js 相应地使用 class 或 data- 选择器。
检查文件是否存在。如果存在,请确保您的 tsconfig.json 为 @/ 设置了正确的路径别名,例如:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}
如果以上答案都无法帮助您,请在 GitHub 上提交问题,我们会很乐意提供帮助。
有关每个组件的详细文档,请参阅 references/ 文件夹。
每周安装量
50.5K
代码仓库
GitHub 星标数
1.9K
首次出现时间
2026 年 1 月 19 日
安全审计
已安装于
opencode44.1K
codex43.2K
gemini-cli42.9K
github-copilot41.5K
amp39.3K
kimi-cli39.3K
AI Elements is a component library and custom registry built on top of shadcn/ui to help you build AI-native applications faster. It provides pre-built components like conversations, messages and more.
Installing AI Elements is straightforward and can be done in a couple of ways. You can use the dedicated CLI command for the fastest setup, or integrate via the standard shadcn/ui CLI if you've already adopted shadcn's workflow.
IMPORTANT: Run all CLI commands using the project's package runner:
npx ai-elements@latest,pnpm dlx ai-elements@latest, orbunx --bun ai-elements@latest— based on the project'spackageManager. Examples below usenpx ai-elements@latestbut substitute the correct runner for the project.
Before installing AI Elements, make sure your environment meets the following requirements:
AI_GATEWAY_API_KEY to your env.local so you don't have to use an API key from every provider. AI Gateway also gives $5 in usage per month so you can experiment with models. You can obtain an API key here.You can install AI Elements components using either the AI Elements CLI or the shadcn/ui CLI. Both achieve the same result: adding the selected component’s code and any needed dependencies to your project.
The CLI will download the component’s code and integrate it into your project’s directory (usually under your components folder). By default, AI Elements components are added to the @/components/ai-elements/ directory (or whatever folder you’ve configured in your shadcn components settings).
After running the command, you should see a confirmation in your terminal that the files were added. You can then proceed to use the component in your code.
Once an AI Elements component is installed, you can import it and use it in your application like any other React component. The components are added as part of your codebase (not hidden in a library), so the usage feels very natural.
After installing AI Elements components, you can use them in your application like any other React component. For example:
"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;
In the example above, we import the Message component from our AI Elements directory and include it in our JSX. Then, we compose the component with the MessageContent and MessageResponse subcomponents. You can style or configure the component just as you would if you wrote it yourself – since the code lives in your project, you can even open the component file to see how it works or make custom modifications.
All AI Elements components take as many primitive attributes as possible. For example, the Message component extends HTMLAttributes<HTMLDivElement>, so you can pass any props that a div supports. This makes it easy to extend the component with your own styles or functionality.
After installation, no additional setup is needed. The component’s styles (Tailwind CSS classes) and scripts are already integrated. You can start interacting with the component in your app immediately.
For example, if you'd like to remove the rounding on Message, you can go to components/ai-elements/message.tsx and remove rounded-lg as follows:
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>
);
Make sure your project is configured correctly for shadcn/ui in Tailwind 4 - this means having a globals.css file that imports Tailwind and includes the shadcn/ui base styles.
Double-check that:
Your current working directory is the root of your project (where package.json lives).
Your components.json file (if using shadcn-style config) is set up correctly.
You’re using the latest version of the AI Elements CLI:
npx ai-elements@latest
If all else fails, feel free to open an issue on GitHub.
Ensure your app is using the same data-theme system that shadcn/ui and AI Elements expect. The default implementation toggles a data-theme attribute on the <html> element. Make sure your tailwind.config.js is using class or data- selectors accordingly.
Check the file exists. If it does, make sure your tsconfig.json has a proper paths alias for @/ i.e.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}
If none of these answers help, open an issue on GitHub and someone will be happy to assist.
See the references/ folder for detailed documentation on each component.
Weekly Installs
50.5K
Repository
GitHub Stars
1.9K
First Seen
Jan 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode44.1K
codex43.2K
gemini-cli42.9K
github-copilot41.5K
amp39.3K
kimi-cli39.3K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
配色方案生成器 - 从品牌色生成Tailwind CSS色阶与可访问色彩系统
1,200 周安装
股票研究执行器:8阶段AI投资研究框架,自动化股票尽职调查与深度分析工具
1,200 周安装
Anti-Render:AI图像对比生成器,一键生成理想vs现实视觉对比图
1,200 周安装
Next.js React TypeScript 开发指南:最佳实践、性能优化与代码规范
1,200 周安装
FilamentPHP 资源生成技能 - 快速创建 Laravel 后台管理面板
1,200 周安装
OpenRouter TypeScript SDK - 统一访问300+ AI模型的类型安全接口
1,200 周安装