DocExplorer

ai-elements

https://ai-sdk.dev/elements
/elements

Introduction

ID: 1212•https://ai-sdk.dev/elements
Source

NOTE: The following is a cleaned‑up Markdown version of the “Introduction” page for AI Elements.
It focuses on the essential information and removes UI‑specific markup, keeping headings, lists, code blocks, and links intact.

Introduction

What is AI Elements and why you should use it.

AI Elements is a component library and custom registry built on top of shadcn/ui to help you build AI‑native applications faster.
It provides pre‑built components like conversations, messages and more.

Installation

There are two ways to add AI Elements to your project:

  1. AI Elements CLI (recommended for the fastest setup)
  2. shadcn/ui CLI – works if you already use shadcn’s workflow.

AI Elements CLI

npx ai-elements@latest

This command will download the component’s code and integrate it into your project’s directory (by default under @/components/ai-elements/, or whatever folder you’ve configured in shadcn components settings).
After the command completes you’ll see a confirmation in the terminal, and you can start using the components in your code.

Quick start

Below is a minimal example of an AI chatbot UI using the ChatGPT component.
(The live demo on the page is interactive; the code snippet is omitted for brevity.)

// Example: ChatGPT component
import { ChatGPT } from "@/components/ai-elements/ChatGPT";

export default function Page() {
  return (
    <div>
      <ChatGPT />
    </div>
  );
}

Note – The component library is designed for React 19 (no forwardRef usage) and Tailwind CSS 4.

Prerequisites

Before installing AI Elements, make sure your environment meets the following requirements:

  • Node.js, version 18 or later
  • A Next.js project with the AI SDK installed
  • shadcn/ui installed in your project. If you don’t have it installed, running any install command will automatically install it for you.
  • We highly recommend using the AI Gateway and adding AI_GATEWAY_API_KEY to your env.local so you don’t have to use an API key from every provider.
    AI Gateway also gives $5 in usage per month, so you can experiment with models.
    You can obtain an API key here.

Installing Components

You can install AI Elements components using either the AI Elements CLI or the shadcn/ui CLI.
Both commands add the selected component’s code and any required dependencies to your project.

After running the command, you should see a confirmation in your terminal that the files were added.
You can then proceed to use the component in your code.

# Using AI Elements CLI
npx ai-elements@latest

# Using shadcn/ui CLI
# (example for adding the "ChatGPT" component)
npx shadcn add chatgpt

The components will be placed in @/components/ai-elements/ by default (unless you’ve configured a different folder).