AI Elements

AI Elements is a comprehensive React component library for building AI-powered user interfaces. The library provides 30+ components specifically designed for chat interfaces, tool execution visualization, reasoning displays, and workflow management.

Installation

Install via shadcn registry:

npx shadcn@latest add https://ai-elements.vercel.app/r/[component-name]

Import Pattern: Components are imported from individual files, not a barrel export:

// Correct - import from specific files
import { Conversation } from "@/components/ai-elements/conversation";
import { Message } from "@/components/ai-elements/message";
import { PromptInput } from "@/components/ai-elements/prompt-input";

// Incorrect - no barrel export
import { Conversation, Message } from "@/components/ai-elements";

Gates (before relying on examples)

Use this sequence when adding or wiring AI Elements so setup is checkable, not assumed.

1. Install each component — Run npx shadcn@latest add https://ai-elements.vercel.app/r/[component-name] for every component you need.

   • Pass: The command completes successfully and a file for that component exists under your project’s components/ai-elements/ (or the directory components.json uses for those additions).

2. Align import paths — Every import … from "@/components/ai-elements/..." must match your repo’s actual alias and folder layout.

   • Pass: Each import resolves to a file on disk (IDE navigation or build/tsc shows no “cannot find module” for those paths).

3. Match Tool / Confirmation states to your AI SDK — State strings (including approval-related states) depend on the installed ai package major/version.

   • Pass: The states you pass to ToolHeader, Tool, or Confirmation are listed in the AI SDK version you have installed (docs or exported types), not copied from memory alone.

Component Categories

Conversation Components

Components for displaying chat-style interfaces with messages, attachments, and auto-scrolling behavior.

• Conversation: Container with auto-scroll capabilities
• Message: Individual message display with role-based styling
• MessageAttachment: File and image attachments
• MessageBranch: Alternative response navigation

See references/conversation.md for details.

Prompt Input Components

Advanced text input with file attachments, drag-and-drop, speech input, and state management.

• PromptInput: Form container with file handling
• PromptInputTextarea: Auto-expanding textarea
• PromptInputSubmit: Status-aware submit button
• PromptInputAttachments: File attachment display
• PromptInputProvider: Global state management

See references/prompt-input.md for details.

Workflow Components

Components for displaying job queues, tool execution, and approval workflows.