Setup

This guide walks you through setting up AI Elements in your project.

Prerequisites

Before installing AI Elements, ensure your environment meets these requirements:

• Node.js 18 or later
• React 19
• Next.js 14+ (App Router recommended)
• AI SDK installed and configured
• shadcn/ui initialized in your project
• Tailwind CSS 4

AI Gateway (Recommended)

We recommend using AI Gateway for model access as it offers a single API key for multiple model providers, built-in fallback support, unified billing and more.

Add AI_GATEWAY_API_KEY to your .env.local file. Get your API key here.

Installing Components

Use the AI Elements CLI to add components:

npx ai-elements@latest add message

Or use the shadcn CLI:

npx shadcn@latest add @ai-elements/message

Components are added to @/components/ai-elements/ by default.

Verify Installation

After installing a component, verify it works:

1. Check that the component file exists in your components directory
2. Import and use it in a page:

import {
  Message,
  MessageContent,
  MessageResponse,
} from "@/components/ai-elements/message";

export default function Page() {
  return (
    <Message from="assistant">
      <MessageContent>
        <MessageResponse>Hello, world!</MessageResponse>
      </MessageContent>
    </Message>
  );
}

3. Run your development server and confirm the component renders

Next Steps

• Learn how to use components in your application
• Browse available components to find what you need
• Check troubleshooting if you run into issues