AI Elements is a component library and custom registry built on top of shadcn/ui to help you build AI-native applications faster.
npm install ai-elementsA command-line interface for installing AI Elements components - a component library built on top of shadcn/ui to help you build AI-native applications faster.
AI Elements provides pre-built, customizable React components specifically designed for AI applications, including conversations, messages, code blocks, reasoning displays, and more. The CLI makes it easy to add these components to your Next.js project.
You can use the AI Elements CLI directly with npx, or install it globally:
``bashUse directly (recommended)
npx ai-elements@latest
Prerequisites
Before using AI Elements, ensure your project meets these requirements:
- Node.js 18 or later
- Next.js project with AI SDK installed
- shadcn/ui initialized in your project (
)
- Tailwind CSS configured (AI Elements supports CSS Variables mode only)Usage
$3
Install all available AI Elements components at once:
`bash
npx ai-elements@latest
`This command will:
- Set up shadcn/ui if not already configured
- Install all AI Elements components to your configured components directory
- Add necessary dependencies to your project
$3
Install individual components using the
command:`bash
npx ai-elements@latest add
`Examples:
bash
Install the message component
npx ai-elements@latest add messageInstall the conversation component
npx ai-elements@latest add conversationInstall the code-block component
npx ai-elements@latest add code-block
`$3
You can also install components using the standard shadcn/ui CLI:
bash
Install all components
npx shadcn@latest add https://elements.ai-sdk.dev/api/registry/all.jsonInstall a specific component
npx shadcn@latest add https://elements.ai-sdk.dev/api/registry/message.json
`Available Components
AI Elements includes the following components:
| Component | Description |
| -------------------------- | ------------------------------------------------------- |
|
| Interactive action buttons for AI responses |
| branch | Branch visualization for conversation flows |
| code-block | Syntax-highlighted code display with copy functionality |
| conversation | Container for chat conversations |
| image | AI-generated image display component |
| inline-citation | Inline source citations |
| loader | Loading states for AI operations |
| message | Individual chat messages with avatars |
| prompt-form | Controlled form wrapper for prompt submission |
| prompt-input | Advanced input component with model selection |
| prompt-input-attachments | Opt-in file/image attachments for prompt input |
| reasoning | Display AI reasoning and thought processes |
| response | Formatted AI response display |
| source | Source attribution component |
| suggestion | Quick action suggestions |
| task | Task completion tracking |
| tool | Tool usage visualization |
| web-preview | Embedded web page previews |Quick Start Example
After installing components, you can use them in your React application:
`tsx
"use client";import { useChat } from "@ai-sdk/react";
import {
Conversation,
ConversationContent,
} from "@/components/ai-elements/conversation";
import {
Message,
MessageContent,
MessageResponse,
} from "@/components/ai-elements/message";
export default function Chat() {
const { messages } = useChat();
return (
{messages.map((message, index) => (
{message.content}
))}
);
}
`How It Works
The AI Elements CLI:
1. Detects your package manager (npm, pnpm, yarn, or bun) automatically
2. Fetches component registry from
3. Installs components using the shadcn/ui CLI under the hood
4. Adds dependencies and integrates with your existing shadcn/ui setupComponents are installed to your configured shadcn/ui components directory (typically
) and become part of your codebase, allowing for full customization.Configuration
AI Elements uses your existing shadcn/ui configuration. Components will be installed to the directory specified in your
components.json file.Recommended Setup
For the best experience, we recommend:
1. AI Gateway: Set up Vercel AI Gateway and add
AI_GATEWAY_API_KEY to your .env.local`---
Made with ❤️ by Vercel