AI Elements

A modern, composable AI chat UI kit for Next.js, built with Radix, Tailwind, and shadcn/ui.

AI Elements provides a set of accessible, production-ready React components for building conversational AI interfaces, with support for streaming, citations, reasoning, and more.

---

Features

• ✨ Composable chat UI: Modular components for messages, prompts, sources, code, and more
• ⚡ Streaming & reasoning: Real-time AI responses with reasoning and source citation
• 🌐 Web search integration: Toggle web search for enhanced answers
• 🧩 Radix + shadcn/ui: Accessible, themeable, and easy to extend
• 🎨 Tailwind CSS: Fully customizable with utility classes
• 🦾 TypeScript-first: Strict types for safety and DX

Quickstart

pnpm install
pnpm dev
# Visit http://localhost:3000

Usage

The main chat UI is in components/ai-chat.tsx. All atomic chat elements are in components/ai-elements/.

Example:

import AIChat from '@/components/ai-chat';

export default function Home() {
	return <AIChat />;
}

Tip

All components are headless and themeable. You can compose, extend, or style them as needed.

Tech Stack

• Next.js 15 (App Router)
• React 19
• Tailwind CSS 4
• shadcn/ui
• Radix UI Primitives
• ai-sdk
• TypeScript

Project Structure

app/           # Next.js app directory (routing, layout)
components/    # UI and chat components
	ai-chat.tsx
	ai-elements/ # Atomic chat UI elements
lib/           # Utilities
public/        # Static assets (SVGs, icons)

Credits

• Inspired by shadcn/ui and ai-sdk
• Icons by Lucide
• Fonts: Geist

---

Note

This project is under active development. Feedback and contributions are welcome!