Vercel 官方出品！基于 Shadcn-ui 的 AI 应用组件库 AI Elements

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI实践者。

Vercel 推出了 AI Elements，一个专门为 AI 应用设计的 React 组件库。

这是什么

AI Elements 基于 shadcn/ui 构建，提供了一套开箱即用的 AI 应用组件。对话框、消息气泡、代码块、推理过程展示这些常见的 AI 界面元素，都有现成的实现。

和普通组件库不同的是，AI Elements 不是把代码打包成 npm 包。安装后，组件代码会直接添加到你的项目里，通常在 @/components/ai-elements/ 目录下。想改样式或逻辑，直接编辑文件就行。

安装很简单

前提是你的项目已经装了 Next.js、AI SDK 和 shadcn/ui。、

Node.js 版本要 18 以上。

装所有组件：

npx ai-elements@latest

只装特定组件：

npx ai-elements@latest add message
npx ai-elements@latest add conversation

也可以用 shadcn CLI：

npx shadcn@latest add https://elements.ai-sdk.dev/api/registry/all.json

Skill 模块

如果你在用 Claude Code 或其他支持 skills 的 AI 编程工具，可以添加 AI Elements 的 skill 配置：

npx skills add vercel/ai-elements

这会让 AI 助手更了解 AI Elements 的组件和用法，写代码时能给出更准确的建议。

用起来

装完就能像普通 React 组件一样用。比如做个聊天界面：

'use client';

import { useChat } from '@ai-sdk/react';
import { Conversation, ConversationContent } from '@/components/ai-elements/conversation';
import { Message, MessageContent, MessageResponse } from '@/components/ai-elements/message';

export default function Chat() {
    const { messages } = useChat();

    return (
        <Conversation>
            <ConversationContent>
                {messages.map((message, index) => (
                    <Message key={index} from={message.role}>
                        <MessageContent>
                            <MessageResponse>{message.content}</MessageResponse>
                        </MessageContent>
                    </Message>
                ))}
            </ConversationContent>
        </Conversation>
    );
}

组件支持标准的 HTML 属性。比如 Message 组件继承了 HTMLDivElement 的所有属性，可以直接传 className、style 这些。

改样式

想调整样式直接改源码。比如去掉消息框的圆角，打开 components/ai-elements/message.tsx，删掉 rounded-lg 就行。

代码在你项目里，想怎么改都可以。

可能遇到的问题

样式不生效？检查 Tailwind 4 配置，确保 globals.css 正确导入了 shadcn/ui 的基础样式。

CLI 运行后没反应？确认在项目根目录（有 package.json 的地方）运行命令，components.json 配置正确。

模块找不到？检查 tsconfig.json 的路径别名：

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

推荐配置

Vercel 建议配合 AI Gateway 使用。

在 .env.local 里加上 AI_GATEWAY_API_KEY，就不用给每个 AI 服务商单独配 API key 了。

AI Gateway 每月还送 5 美元额度，够简单测试用。

项目地址：https://elements.ai-sdk.dev/ GitHub：https://github.com/vercel/ai-elements

Vercel 官方出品！基于 Shadcn-ui 的 AI 应用组件库 AI Elements