16 KiB
AI Elements Documentation Index
This index provides a searchable reference for all AI Elements components, examples, and documentation. Use this to quickly locate the right documentation file based on keywords, categories, or related components.
Examples
Chatbot
File: docs/examples/chatbot.md
Description: Complete tutorial for building a chatbot with reasoning, sources, model picker, and file attachments
Keywords: chat, conversation, message, response, reasoning, sources, prompt-input, chatbot, tutorial, complete-example
Category: Tutorial
Installation: Multiple components
Related: message, conversation, response, reasoning, sources, prompt-input, loader, suggestion
Common Use: Building complete AI chat interfaces with advanced features
v0 Clone
File: docs/examples/v0.md
Description: Create a v0 clone using v0 Platform API with WebPreview component
Keywords: v0, web-preview, artifact, code-generation, clone, tutorial
Category: Tutorial
Installation: Multiple components
Related: web-preview, artifact, code-block, prompt-input, conversation
Common Use: Building code generation and preview interfaces
Workflow Visualization
File: docs/examples/workflow.md
Description: Build workflow visualizations with React Flow, custom nodes, and animated edges
Keywords: workflow, react-flow, canvas, node, edge, visualization, tutorial
Category: Tutorial
Installation: Multiple components (requires React Flow)
Related: canvas, node, edge, connection, toolbar, panel, controls
Common Use: Creating AI agent workflow visualizations and node-based interfaces
Components - Chat & Messaging
Message
File: docs/components/message.md
Description: Core message component with role-based styling for chat interfaces
Keywords: message, chat, role, user, assistant, system, avatar, conversation-display
Category: Chat & Messaging
Installation: npx ai-elements add message
Related: conversation, response, actions, loader
Common Use: Displaying individual chat messages in conversation interfaces
Conversation
File: docs/components/conversation.md
Description: Chat conversation container with auto-scroll functionality
Keywords: conversation, chat, container, auto-scroll, messages, chat-container
Category: Chat & Messaging
Installation: npx ai-elements add conversation
Related: message, response, loader, prompt-input
Common Use: Building scrollable chat interfaces with auto-scroll to bottom
Response
File: docs/components/response.md
Description: Markdown response renderer using Streamdown for AI-generated content
Keywords: response, markdown, streamdown, ai-content, render, formatting
Category: Chat & Messaging
Installation: npx ai-elements add response
Related: message, conversation, code-block
Common Use: Rendering AI-generated markdown responses with proper formatting
Loader
File: docs/components/loader.md
Description: Loading indicators for AI responses with various animation styles
Keywords: loader, loading, spinner, animation, pending, waiting
Category: Chat & Messaging
Installation: npx ai-elements add loader
Related: conversation, message, prompt-input
Common Use: Showing loading state while AI generates responses
Prompt Input
File: docs/components/prompt-input.md
Description: Rich input component with file attachments, model picker, and action buttons
Keywords: prompt, input, textarea, file-attachment, model-picker, submit, chat-input
Category: Chat & Messaging
Installation: npx ai-elements add prompt-input
Related: conversation, message, suggestion
Common Use: Building rich chat input interfaces with file uploads and model selection
Suggestion
File: docs/components/suggestion.md
Description: Horizontal row of clickable suggestion chips for quick interactions
Keywords: suggestion, chips, quick-reply, buttons, prompts, suggestions
Category: Chat & Messaging
Installation: npx ai-elements add suggestion
Related: prompt-input, message, conversation
Common Use: Providing quick action suggestions and starter prompts
Actions
File: docs/components/actions.md
Description: Action buttons for message interactions (copy, retry, regenerate, etc.)
Keywords: actions, buttons, copy, retry, regenerate, message-actions, toolbar
Category: Chat & Messaging
Installation: npx ai-elements add actions
Related: message, conversation, response
Common Use: Adding copy, retry, and regenerate functionality to messages
Components - AI-Specific Features
Tool
File: docs/components/tool.md
Description: Display AI tool invocations with input/output visualization
Keywords: tool, function-call, invocation, input, output, ai-tools, tool-use
Category: AI-Specific Features
Installation: npx ai-elements add tool
Related: message, response, artifact
Common Use: Showing AI tool/function calls and their results
Reasoning
File: docs/components/reasoning.md
Description: Collapsible component for displaying AI reasoning and chain-of-thought
Keywords: reasoning, chain-of-thought, thinking, collapsible, ai-reasoning, deepseek
Category: AI-Specific Features
Installation: npx ai-elements add reasoning
Related: chain-of-thought, plan, task, message
Common Use: Displaying AI reasoning process in collapsible format
Chain of Thought
File: docs/components/chain-of-thought.md
Description: Display AI reasoning process step-by-step
Keywords: chain-of-thought, reasoning, steps, thinking, process, ai-reasoning
Category: AI-Specific Features
Installation: npx ai-elements add chain-of-thought
Related: reasoning, plan, task
Common Use: Showing step-by-step AI reasoning and thought process
Plan
File: docs/components/plan.md
Description: Multi-step plan display with progress tracking and status indicators
Keywords: plan, steps, progress, status, multi-step, planning, task-list
Category: AI-Specific Features
Installation: npx ai-elements add plan
Related: task, queue, chain-of-thought, reasoning
Common Use: Displaying AI-generated plans with progress tracking
Task
File: docs/components/task.md
Description: Collapsible task lists with file references and progress tracking
Keywords: task, checklist, progress, files, collapsible, todo, task-tracking
Category: AI-Specific Features
Installation: npx ai-elements add task
Related: plan, queue, chain-of-thought
Common Use: Showing AI task execution with file references
Queue
File: docs/components/queue.md
Description: Task queue visualization for managing AI workflows
Keywords: queue, tasks, workflow, sequence, pending, processing
Category: AI-Specific Features
Installation: npx ai-elements add queue
Related: task, plan, workflow
Common Use: Visualizing queued AI tasks and workflow sequences
Artifact
File: docs/components/artifact.md
Description: Container for displaying generated artifacts like code, documents, or previews
Keywords: artifact, container, generated-content, code, document, preview, output
Category: AI-Specific Features
Installation: npx ai-elements add artifact
Related: code-block, web-preview, tool
Common Use: Displaying AI-generated artifacts and outputs
Components - Workflow & Canvas
Canvas
File: docs/components/canvas.md
Description: React Flow canvas wrapper for workflow visualizations
Keywords: canvas, react-flow, workflow, visualization, nodes, edges, graph
Category: Workflow & Canvas
Installation: npx ai-elements add canvas (requires React Flow)
Related: node, edge, connection, toolbar, panel, controls
Common Use: Creating node-based workflow visualizations
Node
File: docs/components/node.md
Description: Custom workflow nodes with headers, content, and footers
Keywords: node, workflow, custom-node, react-flow, graph-node
Category: Workflow & Canvas
Installation: npx ai-elements add node
Related: canvas, edge, toolbar, connection
Common Use: Building custom nodes for workflow visualizations
Edge
File: docs/components/edge.md
Description: Animated and temporary edge types for workflow connections
Keywords: edge, connection, animated, temporary, react-flow, workflow-edge
Category: Workflow & Canvas
Installation: npx ai-elements add edge
Related: canvas, node, connection
Common Use: Creating animated connections between workflow nodes
Connection
File: docs/components/connection.md
Description: Custom connection lines for React Flow graphs
Keywords: connection, line, react-flow, connecting, workflow
Category: Workflow & Canvas
Installation: npx ai-elements add connection
Related: canvas, node, edge
Common Use: Customizing connection appearance in workflows
Toolbar
File: docs/components/toolbar.md
Description: Node toolbar for React Flow with action buttons
Keywords: toolbar, actions, node-toolbar, react-flow, buttons
Category: Workflow & Canvas
Installation: npx ai-elements add toolbar
Related: canvas, node, panel
Common Use: Adding action toolbars to workflow nodes
Panel
File: docs/components/panel.md
Description: Positioned panels for canvas overlays and controls
Keywords: panel, overlay, positioned, react-flow, controls
Category: Workflow & Canvas
Installation: npx ai-elements add panel
Related: canvas, controls, toolbar
Common Use: Creating overlay panels on workflow canvases
Controls
File: docs/components/controls.md
Description: Canvas control buttons for zoom, fit view, and navigation
Keywords: controls, zoom, fit-view, navigation, react-flow, canvas-controls
Category: Workflow & Canvas
Installation: npx ai-elements add controls
Related: canvas, panel
Common Use: Adding zoom and navigation controls to canvas
Components - UI Enhancements
Code Block
File: docs/components/code-block.md
Description: Syntax-highlighted code blocks with copy functionality
Keywords: code-block, syntax-highlighting, copy, code, programming, snippet
Category: UI Enhancements
Installation: npx ai-elements add code-block
Related: response, artifact, tool
Common Use: Displaying formatted code with syntax highlighting
Image
File: docs/components/image.md
Description: Image display component with error handling
Keywords: image, picture, display, error-handling, media
Category: UI Enhancements
Installation: npx ai-elements add image
Related: message, response, artifact
Common Use: Displaying images with graceful error handling
Sources
File: docs/components/sources.md
Description: Collapsible source and citation list for AI responses
Keywords: sources, citations, references, collapsible, rag, retrieval
Category: UI Enhancements
Installation: npx ai-elements add sources
Related: inline-citation, message, response
Common Use: Showing sources and citations for AI-generated content
Inline Citation
File: docs/components/inline-citation.md
Description: Inline source citations with hover previews
Keywords: citation, inline, hover, preview, reference, sources
Category: UI Enhancements
Installation: npx ai-elements add inline-citation
Related: sources, response, message
Common Use: Adding inline citations with hover previews to text
Web Preview
File: docs/components/web-preview.md
Description: Iframe component for displaying web previews
Keywords: web-preview, iframe, preview, web, html, render
Category: UI Enhancements
Installation: npx ai-elements add web-preview
Related: artifact, code-block
Common Use: Previewing generated HTML and web content
Shimmer
File: docs/components/shimmer.md
Description: Animated shimmer effect for loading states
Keywords: shimmer, loading, skeleton, animation, placeholder
Category: UI Enhancements
Installation: npx ai-elements add shimmer
Related: loader, message
Common Use: Creating skeleton loading states with shimmer effect
Open in Chat
File: docs/components/open-in-chat.md
Description: Button to open content in chat interface
Keywords: open-in-chat, button, navigation, chat, action
Category: UI Enhancements
Installation: npx ai-elements add open-in-chat
Related: conversation, message, prompt-input
Common Use: Adding buttons to open content in chat interface
Context
File: docs/components/context.md
Description: Context menu system for conversations
Keywords: context-menu, menu, right-click, actions, conversation
Category: UI Enhancements
Installation: npx ai-elements add context
Related: message, conversation, actions
Common Use: Adding context menus to conversation elements
Confirmation
File: docs/components/confirmation.md
Description: User approval flow for sensitive AI operations
Keywords: confirmation, approval, dialog, user-confirmation, sensitive, permission
Category: UI Enhancements
Installation: npx ai-elements add confirmation
Related: message, tool, actions
Common Use: Requesting user approval for sensitive AI actions
Branch
File: docs/components/branch.md
Description: Multi-version message branches with navigation
Keywords: branch, versions, multi-version, navigation, conversation-branch, alternatives
Category: UI Enhancements
Installation: npx ai-elements add branch
Related: message, conversation, actions
Common Use: Managing multiple conversation branches and alternatives
General Documentation
README
File: docs/README.md
Description: Overview of AI Elements library with component categories and installation methods
Keywords: overview, introduction, component-list, categories, getting-started
Related: introduction, usage
Introduction
File: docs/introduction.md
Description: Getting started guide with installation, prerequisites, and library overview
Keywords: introduction, installation, setup, prerequisites, getting-started, quickstart
Related: README, usage, troubleshooting
Usage
File: docs/usage.md
Description: Implementation patterns and customization examples for AI Elements
Keywords: usage, patterns, customization, implementation, examples, how-to
Related: introduction, troubleshooting
Troubleshooting
File: docs/troubleshooting.md
Description: Common issues and solutions for AI Elements
Keywords: troubleshooting, issues, problems, solutions, errors, debugging, help
Related: introduction, usage
Component Categories Summary
By Use Case
Building Chat Interfaces:
- Message, Conversation, Response, Loader, Prompt Input, Suggestion, Actions
Displaying AI Reasoning:
- Reasoning, Chain of Thought, Plan, Task, Tool, Queue
Creating Workflows:
- Canvas, Node, Edge, Connection, Toolbar, Panel, Controls
Enhancing Content:
- Code Block, Image, Sources, Inline Citation, Web Preview, Artifact, Shimmer
User Interactions:
- Confirmation, Actions, Suggestion, Open in Chat, Context, Branch
Common Component Pairings
These components are frequently used together:
- Chat Interface: Message + Conversation + Response + Prompt Input + Loader
- AI Reasoning Display: Reasoning + Chain of Thought + Plan + Task
- Workflow Visualization: Canvas + Node + Edge + Toolbar + Controls
- Code Generation: Artifact + Code Block + Web Preview + Response
- Citations & Sources: Sources + Inline Citation + Response
- Rich Messages: Message + Response + Code Block + Tool + Reasoning
- Complete Chatbot: See chatbot example for full integration
Prerequisites
All AI Elements components require:
- Node.js 18 or later
- Next.js project
- AI SDK installed
- shadcn/ui installed
Additional for Workflow Components:
- React Flow library (for Canvas, Node, Edge, Connection, Toolbar, Panel, Controls)
Installation Quick Reference
Single component:
npx ai-elements add [component-name]
Multiple components:
npx ai-elements add message conversation response
All components:
npx ai-elements add @ai-elements/all
Using shadcn CLI:
npx shadcn@latest add @ai-elements/[component-name]