Ai Elements

A comprehensive React component library wrapping Vercel AI SDK primitives into ready-to-use UI components. You get 30+ components for chat interfaces (Conversation, Message, PromptInput with file uploads and speech input), tool execution visualization (Tool, Confirmation with approval workflows), and job queues. Built on shadcn/ui so theming just works. The Gates checklist is genuinely useful since you install components individually via shadcn registry, not from npm, and imports are file-specific rather than barrel exports. The Tool component maps cleanly to AI SDK's state machine, and Reasoning auto-collapses after thinking completes. Skip writing chat UI boilerplate and wire these directly into your AI SDK implementation.

skills.sh installs: 209
GitHub stars: 87
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add existential-birds/beagle --skill ai-elements --agent claude-code

Installs into .claude/skills of the current project.

Files

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";