AI-UI-Kit
Beautiful, accessible React components for AI chat interfaces. Copy, paste, ship.
Features
🎨
Beautiful by Default
Modern, clean design with built-in dark mode support and smooth animations.
♿
Accessibility First
WCAG 2.1 AA compliant with full keyboard navigation and screen reader support.
📱
Mobile Ready
Responsive design that works perfectly on all screen sizes.
⚡
Real-time Streaming
Built-in support for streaming AI responses with typing indicators.
🎯
TypeScript Ready
Full TypeScript support with comprehensive type definitions.
🔧
Highly Customizable
Extensive theming system with CSS variables and custom styling options.
Quick Start
Install AI-UI-Kit
npm install aichatkitimport { Chat } from 'aichatkit'
import 'aichatkit/styles.css'
function App() {
const [messages, setMessages] = useState([])
const handleSendMessage = (content: string) => {
const newMessage = {
id: Date.now().toString(),
content,
role: 'user' as const,
timestamp: new Date()
}
setMessages(prev => [...prev, newMessage])
// Your AI integration here
}
return (
<Chat
messages={messages}
onSendMessage={handleSendMessage}
config={{
placeholder: "Type your message...",
enableFileUpload: true,
enableRetry: true
}}
/>
)
}Ready to build your AI chat interface? Check out our Getting Started guide or explore the Component API.
Try It Live
Philosophy
AI-UI-Kit follows the copy-paste philosophy pioneered by shadcn/ui (opens in a new tab). Instead of a traditional component library, we provide:
- 📋 Copy-paste components you own and can customize
- 🎨 CSS-first styling with extensive variable system
- 🚀 Framework agnostic (works with Next.js, Vite, CRA, etc.)
- 🔍 Tree-shakeable - only bundle what you use