aichatkit

Beautiful, accessible React components for AI chat interfaces. Copy, paste, ship.

Features

• 🎨 Beautiful by default - Modern, clean design with dark mode support
• ♿ Fully accessible - WCAG 2.1 AA compliant with keyboard navigation
• 🚀 Streaming-first - Built for real-time token streaming
• 📝 Rich content - Markdown, code highlighting, LaTeX, tables
• 🎯 Zero lock-in - Copy-paste components, modify anything
• 🌳 Tree-shakeable - Import only what you need
• 📱 Responsive - Mobile-first design that works everywhere
• 🔧 Customizable - CSS variables for easy theming

Installation

Unlike traditional component libraries, aichatkit uses the copy-paste approach popularized by shadcn/ui. This gives you full control over your components.

Quick Start

# Create your components directory
mkdir -p src/components/ai-ui

# Copy the components you need
npx aichatkit@latest add chat

Manual Installation

1. Install dependencies:

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

2. Copy the components and styles from this repository to your project.

Usage

Basic Chat Interface

import { Chat, MessageType } from '@/components/ai-ui'
import { useState } from 'react'

function ChatDemo() {
  const [messages, setMessages] = useState<MessageType[]>([])
  const [isStreaming, setIsStreaming] = useState(false)

  const handleSendMessage = async (content: string) => {
    // Add user message
    const userMessage: MessageType = {
      id: Date.now().toString(),
      role: 'user',
      content,
      timestamp: new Date()
    }
    
    setMessages(prev => [...prev, userMessage])
    setIsStreaming(true)

    // Call your AI API here
    const response = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ messages: [...messages, userMessage] })
    })

    // Handle streaming response
    const reader = response.body?.getReader()
    // ... handle streaming
  }

  return (
    <Chat
      messages={messages}
      onSendMessage={handleSendMessage}
      isStreaming={isStreaming}
      placeholder="Ask me anything..."
    />
  )
}

With Streaming

import { Chat, MessageType } from '@/components/ai-ui'
import { useChat } from 'ai/react' // Vercel AI SDK

function StreamingChat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat()

  // Convert Vercel AI SDK messages to our format
  const chatMessages: MessageType[] = messages.map(m => ({
    id: m.id,
    role: m.role as 'user' | 'assistant',
    content: m.content,
    timestamp: new Date(m.createdAt || Date.now())
  }))

  return (
    <Chat
      messages={chatMessages}
      onSendMessage={handleSubmit}
      isStreaming={isLoading}
      value={input}
      onChange={handleInputChange}
    />
  )
}

Custom Styling

// Use CSS variables for theming
<style>
{`
  :root {
    --ai-primary: #8b5cf6;
    --ai-primary-hover: #7c3aed;
    --ai-background: #fafafa;
    --ai-surface: #ffffff;
    --ai-border: #e4e4e7;
  }
`}
</style>

Individual Components

import { Message, MessageList, ChatInput } from '@/components/ai-ui'

// Use components individually
<MessageList messages={messages} />

<Message
  message={{
    id: '1',
    role: 'assistant',
    content: 'Hello! How can I help you today?'
  }}
  onRetry={() => console.log('Retry')}
  onCopy={() => console.log('Copied')}
/>

<ChatInput
  onSend={handleSend}
  placeholder="Type your message..."
  isStreaming={false}
/>

Components

Core Components

• Chat - Complete chat interface
• Message - Individual message display
• MessageList - Scrollable message container
• ChatInput - Input area with auto-resize
• ChatHeader - Header with model selector

Supporting Components

• MarkdownRenderer - Rich text rendering
• CodeBlock - Syntax highlighted code
• ThinkingIndicator - AI thinking animation
• StreamingIndicator - Token streaming display
• MessageActions - Copy, retry, edit, delete

Customization

CSS Variables

:root {
  /* Colors */
  --ai-primary: #0066cc;
  --ai-background: #ffffff;
  --ai-surface: #f8f9fa;
  --ai-border: #e5e7eb;
  --ai-text: #1f2937;
  --ai-text-secondary: #6b7280;
  
  /* Spacing */
  --ai-spacing-xs: 0.25rem;
  --ai-spacing-sm: 0.5rem;
  --ai-spacing-md: 1rem;
  --ai-spacing-lg: 1.5rem;
  
  /* Typography */
  --ai-font-family: system-ui, -apple-system, sans-serif;
  --ai-font-mono: ui-monospace, monospace;
  
  /* Border radius */
  --ai-radius-sm: 0.25rem;
  --ai-radius-md: 0.5rem;
  --ai-radius-lg: 0.75rem;
}

Component Variants

// Compact variant
<Chat variant="compact" />

// Minimal variant
<Chat variant="minimal" />

// Bubble messages
<Message variant="bubble" />

Accessibility

All components follow WCAG 2.1 AA guidelines:

• Full keyboard navigation
• Screen reader announcements
• Focus management
• ARIA labels and roles
• Reduced motion support

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari 14+
• Mobile browsers

Examples

Check out the examples directory for:

• Next.js integration
• Streaming with Vercel AI SDK
• Custom themes
• Multi-modal chat
• File attachments

Philosophy

AI-UI-Kit follows the same philosophy as shadcn/ui:

1. Copy/paste, not npm install - Own your code
2. Customization first - Modify anything
3. Modern stack - React, TypeScript, Tailwind
4. Accessibility - Built for everyone

Contributing

Contributions are welcome! Please read our contributing guide.

License

MIT © Josh Arsh

Built with ❤️ for the AI community. Inspired by shadcn/ui, Claude, ChatGPT, and v0.