# Introducing AI Elements: Prebuilt, composable AI SDK components

**Published:** August 6, 2025 | **Authors:** Hayden Bleasel, Ryan Haraki

---

[AI Elements](https://ai-sdk.dev/elements/overview) is a new open source library of customizable React components for building interfaces with the Vercel AI SDK.

Built on [`shadcn/ui`](https://ui.shadcn.com/), 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](https://ai-sdk.dev/) to manage state and streaming, and render responses using AI Elements.

```tsx
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](https://ai-sdk.dev/elements/overview/setup), and pick your components, import them, and start building.

**Terminal**
```bash
npx ai-elements@latest
```

[Read the docs](https://ai-sdk.dev/elements/overview) and start building better AI interfaces, faster.

> **Note:** 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.

---

📚 **More updates:** [View all changelog entries](/changelog/sitemap.md) | [Blog](/blog/sitemap.md)