AI Elements is a component library and custom registry that helps you build AI-native applications faster. It provides pre-built components like conversations, messages, prompts, workflows, and more, all designed to integrate seamlessly with the AI SDK.

For more information, see Introduction.

Getting Started

Installation

Using AI Elements CLI:

npx ai-elements@latest

Using shadcn CLI:

npx shadcn@latest add @ai-elements/all

Prerequisites

Node.js version 18 or later
A Next.js project with the AI SDK installed
shadcn/ui installed in your project

For detailed installation instructions, see Introduction.

Components

Chat & Messaging

Message - Core message component with role-based styling for chat interfaces
Conversation - Chat conversation container with auto-scroll functionality
Response - Markdown response renderer using Streamdown for AI-generated content
Loader - Loading indicators for AI responses with various animation styles

Input & Prompts

Prompt Input - Rich input component with file attachments, model picker, and action buttons
Suggestion - Horizontal row of clickable suggestion chips for quick interactions

AI-Specific Features

Tool - Display AI tool invocations with input/output visualization
Reasoning - Collapsible component for displaying AI reasoning and chain-of-thought
Chain of Thought - Display AI reasoning process step-by-step
Plan - Multi-step plan display with progress tracking and status indicators
Task - Collapsible task lists with file references and progress tracking
Queue - Task queue visualization for managing AI workflows
Artifact - Container for displaying generated artifacts like code, documents, or previews

Workflow & Canvas

Canvas - React Flow canvas wrapper for workflow visualizations
Node - Custom workflow nodes with headers, content, and footers
Edge - Animated and temporary edge types for workflow connections
Connection - Custom connection lines for React Flow graphs
Toolbar - Node toolbar for React Flow with action buttons
Panel - Positioned panels for canvas overlays and controls
Controls - Canvas control buttons for zoom, fit view, and navigation

UI Enhancements

Actions - Action buttons for message interactions (copy, retry, regenerate, etc.)
Confirmation - User approval flow for sensitive AI operations
Sources - Collapsible source and citation list for AI responses
Inline Citation - Inline source citations with hover previews
Code Block - Syntax-highlighted code blocks with copy functionality
Image - Image display component with error handling
Shimmer - Animated shimmer effect for loading states
Web Preview - Iframe component for displaying web previews
Open in Chat - Button to open content in chat interface
Context - Context menu system for conversations
Branch - Multi-version message branches with navigation

Examples

Complete tutorials demonstrating how to build AI applications with AI Elements:

Chatbot - Build a complete chatbot with reasoning, sources, model picker, and file attachments
v0 Clone - Create a v0 clone using the v0 Platform API with WebPreview component
Workflow Visualization - Build workflow visualizations with React Flow, custom nodes, and animated edges

Documentation

Usage - Learn how to use AI Elements components in your application
Troubleshooting - Common issues and solutions for AI Elements

Component Categories

By Use Case

Building Chat Interfaces:

Message, Conversation, Response, Loader, Prompt Input, Suggestion, Actions

Displaying AI Reasoning:

Reasoning, Chain of Thought, Plan, Task, Tool

Creating Workflows:

Canvas, Node, Edge, Connection, Toolbar, Panel, Controls

Enhancing Content:

Code Block, Image, Sources, Inline Citation, Web Preview, Artifact

User Interactions:

Confirmation, Actions, Suggestion, Open in Chat, Context, Branch

Installation Methods

You can install individual components or all components at once:

Install a single component:

npx ai-elements@latest add message

Install all components:

npx ai-elements@latest add @ai-elements/all

Using shadcn CLI:

npx shadcn@latest add @ai-elements/[component-name]

Customization

All AI Elements components are installed directly into your codebase (typically in @/components/ai-elements/), making them fully customizable. You can modify styles, add features, or adapt components to your specific needs.

For customization examples, see Usage.

Support

If you encounter any issues, check the Troubleshooting guide or open an issue on the GitHub repository.