重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
ai-elements by laguagu/claude-code-nextjs-skills
npx skills add https://github.com/laguagu/claude-code-nextjs-skills --skill ai-elementsAI Elements 是一个基于 shadcn/ui 构建的组件库和自定义注册表,旨在帮助您更快地构建原生 AI 应用程序。它提供了预构建的组件,如对话、消息等。
安装 AI Elements 非常简单,可以通过几种方式完成。您可以使用专用的 CLI 命令以获得最快的设置,或者如果您已经采用了 shadcn 的工作流程,也可以通过标准的 shadcn/ui CLI 进行集成。
以下是一些使用 AI Elements 组件可以实现的基本示例。
在安装 AI Elements 之前,请确保您的环境满足以下要求:
AI_GATEWAY_API_KEY 添加到您的 env.local 中,这样您就不必使用每个提供商的 API 密钥。AI Gateway 每月还提供 5 美元的使用额度,供您试验模型。您可以在此处获取 API 密钥。您可以使用 AI Elements CLI 或 shadcn/ui CLI 来安装 AI Elements 组件。两者都能达到相同的结果:将所选组件的代码和任何所需的依赖项添加到您的项目中。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
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 所在的位置)。bunx --bun ai-elements@latest
如果所有方法都失败了,请随时在 GitHub 上提交问题。
确保您的应用使用与 shadcn/ui 和 AI Elements 期望的相同的数据主题系统。默认实现在 <html> 元素上切换 data-theme 属性。请确保您的 tailwind.config.js 相应地使用类或数据选择器:
检查文件是否存在。如果存在,请确保您的 tsconfig.json 为 @/ 设置了正确的路径别名,例如:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}
如果这些答案都没有帮助,请在 GitHub 上提交问题,会有人乐意提供帮助。
有关每个组件的详细文档,请参阅 references/ 文件夹。
每周安装量
46
代码仓库
GitHub 星标数
19
首次出现
2026 年 1 月 26 日
安全审计
安装于
claude-code41
opencode34
gemini-cli33
github-copilot33
codex33
cursor33
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.
Here are some basic examples of what you can achieve using components from AI Elements.
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:
bunx --bun 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
46
Repository
GitHub Stars
19
First Seen
Jan 26, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
claude-code41
opencode34
gemini-cli33
github-copilot33
codex33
cursor33
AI界面设计评审工具 - 全面评估UI/UX设计质量、检测AI生成痕迹与优化用户体验
58,500 周安装