Skip to content

Introducing AI Elements: Prebuilt, composable AI SDK components

,
BlogChangelog

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

Link to headingGetting started

To install the components, you can initialize with our CLI, and pick your components, import them, and start building.

Terminal
npx ai-elements@latest

Read 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.

Ready to deploy?

Start DeployingTalk to an Expert