Installation

Get AI-UI-Kit up and running in your React project in just a few steps.

Prerequisites

Before installing AI-UI-Kit, make sure you have:

React 16.8+ (for hooks support)
Node.js 14+
A bundler like Vite, Next.js, Create React App, or Webpack

Installation Methods

Method 1: NPM Package (Recommended)

Install AI-UI-Kit

npm install aichatkit

Method 2: Copy & Paste Components

Following the shadcn/ui philosophy, you can copy individual components directly into your project:

Install Dependencies

First, install the required peer dependencies:

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

Copy Component Files

Copy the component files from our GitHub repository:

# Create components directory
mkdir -p src/components/aichatkit
 
# Copy component files (example)
curl -o src/components/aichatkit/Chat.tsx https://raw.githubusercontent.com/josharsh/aichatkit/main/src/components/Chat/Chat.tsx
curl -o src/components/aichatkit/styles.css https://raw.githubusercontent.com/josharsh/aichatkit/main/src/styles.css

Import and Use

App.tsx

import { Chat } from './components/aichatkit/Chat'
import './components/aichatkit/styles.css'

Setup

1. Import Styles

Add the CSS file to your project:

pages/_app.tsx

import 'aichatkit/styles.css'
// or if using copy-paste method:
// import './components/aichatkit/styles.css'
 
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

2. Basic Usage

App.tsx

import { Chat } from 'aichatkit'
import { useState } from 'react'
 
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])
  }
 
  return (
    <div style={{ height: '100vh', padding: '20px' }}>
      <Chat 
        messages={messages}
        onSendMessage={handleSendMessage}
        placeholder="Type your message..."
      />
    </div>
  )
}
 
export default App

Framework-Specific Setup

Next.js

AI-UI-Kit works perfectly with Next.js 13+ (App Router) and Next.js 12+ (Pages Router).

app/page.tsx

'use client'
 
import { Chat } from 'aichatkit'
import { useState } from 'react'
 
export default function Home() {
  const [messages, setMessages] = useState([])
 
  return (
    <main style={{ height: '100vh', padding: '20px' }}>
      <Chat 
        messages={messages}
        onSendMessage={(content) => {
          // Handle message
        }}
      />
    </main>
  )
}

Vite

src/App.tsx

import { Chat } from 'aichatkit'
import { useState } from 'react'
import 'aichatkit/styles.css'
 
function App() {
  const [messages, setMessages] = useState([])
 
  return (
    <div className="app">
      <Chat 
        messages={messages}
        onSendMessage={(content) => {
          // Handle message
        }}
      />
    </div>
  )
}
 
export default App

Create React App

src/App.js

import { Chat } from 'aichatkit'
import { useState } from 'react'
import 'aichatkit/styles.css'
 
function App() {
  const [messages, setMessages] = useState([])
 
  return (
    <div className="App">
      <Chat 
        messages={messages}
        onSendMessage={(content) => {
          // Handle message
        }}
      />
    </div>
  )
}
 
export default App

TypeScript Setup

AI-UI-Kit includes full TypeScript definitions. No additional setup required!

types.ts

import type { Message, ChatConfig } from 'aichatkit'
 
const message: Message = {
  id: '1',
  role: 'user',
  content: 'Hello!',
  timestamp: new Date()
}
 
const config: ChatConfig = {
  placeholder: 'Type a message...',
  enableFileUpload: true,
  maxLength: 2000
}

CSS Variables

Customize the appearance using CSS variables:

globals.css

:root {
  /* Primary colors */
  --ai-primary: #3b82f6;
  --ai-primary-hover: #2563eb;
  
  /* Background colors */
  --ai-background: #ffffff;
  --ai-surface: #f8f9fa;
  
  /* Text colors */
  --ai-text: #1f2937;
  --ai-text-secondary: #6b7280;
  
  /* Border colors */
  --ai-border: #e5e7eb;
  --ai-border-focus: #3b82f6;
  
  /* Message colors */
  --ai-message-user-bg: #3b82f6;
  --ai-message-user-text: #ffffff;
  --ai-message-assistant-bg: #f3f4f6;
  --ai-message-assistant-text: #1f2937;
}
 
/* Dark mode */
[data-theme='dark'] {
  --ai-background: #111827;
  --ai-surface: #1f2937;
  --ai-text: #f9fafb;
  --ai-text-secondary: #9ca3af;
  --ai-border: #374151;
  --ai-message-assistant-bg: #374151;
  --ai-message-assistant-text: #f9fafb;
}

Troubleshooting

Common Issues

Module Not Found Error

If you see Module not found: Can't resolve 'aichatkit':

Make sure you installed the package: npm install aichatkit
Restart your development server
Clear your bundler cache

Styles Not Loading

If styles aren't applied:

Make sure you imported the CSS file: import 'aichatkit/styles.css'
Check that your bundler supports CSS imports
Verify the CSS file path is correct

TypeScript Errors

If you see TypeScript errors:

Make sure you have @types/react installed
Install peer dependencies: npm install @types/react-syntax-highlighter
Restart your TypeScript server

Getting Help

If you're still having issues:

Check our GitHub Issues (opens in a new tab)
Join our Discord Community
Read the FAQ

Next Steps

Now that you have AI-UI-Kit installed:

Getting Started Guide - Learn the basics
Component Documentation - Explore all components
Examples - See real-world usage
Theming Guide - Customize the appearance

Ready to start building? Check out our Getting Started guide for a complete walkthrough.

Getting Started