6.4 KiB
AI Elements Documentation
This folder contains comprehensive documentation for AI Elements, a component library built on top of shadcn/ui for building AI-native applications.
Introduction
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.