Vercel AI Elements：基于 shadcn/ui 的 AI 组件库

本文介绍 Vercel 开源的 AI Elements 组件库，一个基于 shadcn/ui 构建的 AI 原生应用组件库，帮助开发者快速构建 AI 应用界面。

项目简介

AI Elements 是 Vercel 开源的组件库，基于 shadcn/ui 构建，专门为 AI 原生应用设计。该项目在 GitHub 上已获得 1.6k stars，提供预构建的、可自定义的 React 组件，包括对话、消息、代码块、推理显示等组件。

核心特性

预构建组件：专为 AI 应用设计的 React 组件
CLI 支持：一键安装所有组件或指定组件
shadcn/ui 兼容：与现有 shadcn/ui 配置无缝集成
完全可定制：组件代码直接安装到项目中
TypeScript 支持：端到端类型安全

技术栈

React - UI 框架
shadcn/ui - 基础组件库
AI SDK - Vercel AI 工具包
Tailwind CSS - 样式方案
TypeScript - 类型支持

安装指南

前置要求

Node.js 18 或更高版本
Next.js 项目并已安装 AI SDK
已初始化 shadcn/ui (npx shadcn@latest init)
已配置 Tailwind CSS（仅支持 CSS Variables 模式）

安装方式

bash

# 安装所有组件（推荐）
npx ai-elements@latest

# 安装指定组件
npx ai-elements@latest add message
npx ai-elements@latest add conversation
npx ai-elements@latest add code-block

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

快速开始

tsx

"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>
  );
}

可用组件

组件	说明
Conversation	对话容器组件
ConversationContent	对话内容区域
Message	消息组件
MessageContent	消息内容
MessageResponse	AI 响应内容
CodeBlock	代码块显示

项目链接

官方网站：https://elements.ai-sdk.dev
GitHub 仓库：https://github.com/vercel/ai-elements
Vercel AI Gateway：https://vercel.com/docs/ai-gateway

字节笔记本