Getting Started with AI-UI-Kit

Build beautiful AI chat interfaces in minutes with AI-UI-Kit - a collection of accessible, customizable React components designed specifically for AI applications.

🎯 What is AI-UI-Kit?

AI-UI-Kit is a React component library that provides everything you need to build modern AI chat interfaces. Unlike generic UI libraries, it's specifically designed for AI interactions with features like:

• Real-time streaming support for token-by-token responses
• Rich content rendering with Markdown, code highlighting, and LaTeX
• AI-specific components like thinking indicators and retry buttons
• Accessibility-first design with full keyboard navigation
• Copy-paste philosophy - own your components, customize everything

🚀 Quick Start

npm install clsx react-markdown remark-gfm react-syntax-highlighter
npm install -D @types/react-syntax-highlighter

import { Chat } from 'aichatkit'
import { useState } from 'react'
 
function App() {
  const [messages, setMessages] = useState([])
 
  const handleSendMessage = async (content) => {
    // Add user message
    const userMessage = {
      id: Date.now().toString(),
      role: 'user',
      content,
      timestamp: new Date()
    }
    setMessages(prev => [...prev, userMessage])
 
    // Call your AI API
    const response = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ message: content })
    })
    const data = await response.json()
 
    // Add AI response
    const aiMessage = {
      id: (Date.now() + 1).toString(),
      role: 'assistant',
      content: data.message,
      timestamp: new Date()
    }
    setMessages(prev => [...prev, aiMessage])
  }
 
  return (
    <div style={{ height: '600px' }}>
      <Chat
        messages={messages}
        onSendMessage={handleSendMessage}
        placeholder="Ask me anything..."
      />
    </div>
  )
}

import 'aichatkit/styles.css'

📦 What's Included?

Core Components

• <Chat /> - Complete chat interface with header, messages, and input
• <Message /> - Individual message with avatar, content, and actions
• <MessageList /> - Scrollable container for messages
• <ChatInput /> - Auto-resizing input with file attachments
• <ThinkingIndicator /> - Shows when AI is processing
• <StreamingIndicator /> - Real-time streaming visualization

Supporting Components

• <MarkdownRenderer /> - Rich text with tables, lists, and more
• <CodeBlock /> - Syntax highlighted code with copy button
• <MessageActions /> - Copy, retry, edit, delete actions

🎨 Design Principles

1. Copy-Paste, Not Install

Following the shadcn/ui philosophy, AI-UI-Kit components are designed to be copied into your project. This gives you:

• Full control over the code
• Easy customization
• No dependency lock-in
• Ability to modify anything

2. Accessibility First

Every component is built with accessibility in mind:

• Semantic HTML structure
• ARIA labels and roles
• Keyboard navigation support
• Screen reader friendly
• Focus management

3. AI-Specific Features

Built specifically for AI chat interfaces:

• Streaming message support
• Token counting
• Retry failed messages
• Edit user messages
• Copy responses
• File attachments

4. Beautiful by Default

Modern, clean design that works out of the box:

• Light and dark mode support
• Smooth animations
• Responsive design
• Customizable with CSS variables

🔧 Basic Customization

Theme with CSS Variables

:root {
  --ai-primary: #8b5cf6;
  --ai-background: #fafafa;
  --ai-surface: #ffffff;
  --ai-text: #1a1a1a;
  --ai-border: #e5e7eb;
}

Component Variants

// Minimal chat interface
<Chat variant="minimal" />
 
// Compact messages
<Message variant="compact" />
 
// Bubble-style messages
<Message variant="bubble" />

📱 Responsive Design

AI-UI-Kit is mobile-first and works beautifully on all devices:

• Touch-friendly interactions
• Responsive layouts
• Optimized for small screens
• Native-like scrolling

🔌 Integration Examples

With OpenAI

const handleSendMessage = async (content) => {
  const response = await openai.chat.completions.create({
    messages: [{ role: 'user', content }],
    model: 'gpt-4',
    stream: true
  })
 
  // Handle streaming response
  for await (const chunk of response) {
    // Update message content
  }
}

With Vercel AI SDK

import { useChat } from 'ai/react'
 
function ChatWithVercelAI() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()
 
  return (
    <Chat
      messages={messages}
      onSendMessage={handleSubmit}
      value={input}
      onChange={handleInputChange}
    />
  )
}

🎯 Next Steps

Now that you have a basic understanding:

1. Installation Guide - Detailed setup instructions
2. Component Documentation - Deep dive into each component
3. Theming Guide - Customize the appearance
4. Examples - Real-world integration examples

💡 Pro Tips

Ready to build something amazing? Let's go! 🚀