1 min read
AI Elements is a new open source library of customizable React components for building interfaces with the Vercel AI SDK.
Built on shadcn/ui, it provides full control over UI primitives like message threads, input boxes, reasoning panels, and response actions.
For example, you can use useChat from the AI SDK to manage state and streaming, and render responses using AI Elements.
import { Message, MessageContent } from "@/components/ai-elements/message";import { Response } from "@/components/ai-elements/response";import { useChat } from "@ai-sdk/react";
export default function Example() { const { messages } = useChat();
return messages.map((message) => ( <Message from={message.role} key={message.id}> <MessageContent> {message.parts .filter((part) => part.type === "text") .map((part, i) => ( <Response key={`${message.id}-${i}`}>{part.text}</Response> ))} </MessageContent> </Message> ));}Getting started
To install the components, you can initialize with our CLI, and pick your components, import them, and start building.
npx ai-elements@latestRead the docs and start building better AI interfaces, faster.
AI Elements replaces ChatSDK with a more flexible set of UI building blocks for AI interfaces. ChatSDK will be migrated to a dedicated Next.js template. Future templates will use AI Elements to support a wider range of AI-native interface patterns beyond chat.