Chat UI

A modern chat interface built with Next.js 15, React 18, shadcn/ui components, TailwindCSS v3.4, and Vercel AI SDK.

Features

• ✨ Modern and responsive chat interface
• 🎨 Built with shadcn/ui components and TailwindCSS v3.4
• 🚀 Powered by React 18 and Next.js 15
• 🤖 AI integration with Vercel AI SDK
• 📱 Mobile-friendly design
• ♿ Accessibility features included
• 🎯 TypeScript support

Getting Started

Prerequisites

• Node.js 22+
• bun (recommended) or pnpm/npm

Installation

1. Clone the repository:

git clone <repository-url>
cd chat-ui

2. Install dependencies:

bun install
# or
pnpm install
# or
npm install

3. Set up environment variables:

cp .env.example .env.local

Add your OpenAI API key to .env.local:

OPENAI_API_KEY=your_openai_api_key_here

4. Run the development server:

bun dev
# or
pnpm dev

5. Open http://localhost:3000 in your browser.

Project Structure

├── app/
│   ├── api/
│   │   └── chat/
│   │       └── route.ts           # Chat API endpoint
│   ├── globals.css                # Global styles
│   ├── layout.tsx                 # Root layout
│   └── page.tsx                   # Main chat page
├── components/
│   ├── ui/                        # shadcn/ui components
│   │   ├── button.tsx             # Button component
│   │   ├── dialog.tsx             # Dialog component
│   │   ├── dropdown-menu.tsx      # Dropdown menu component
│   │   ├── input.tsx              # Input component
│   │   ├── scroll-area.tsx        # Scroll area component
│   │   ├── separator.tsx          # Separator component
│   │   └── textarea.tsx           # Textarea component
│   ├── chat-header.tsx            # Chat header component
│   ├── chat-input.tsx             # Message input component
│   ├── chat-messages.tsx          # Messages display component
│   ├── chat-sidebar.tsx           # Sidebar with conversations
│   ├── theme-provider.tsx         # Theme context provider
│   ├── theme-toggle.tsx           # Theme toggle component
│   └── theme-toggle-dropdown.tsx  # Theme toggle dropdown
├── lib/
│   ├── conversation-context.tsx   # Conversation context provider
│   └── utils.ts                   # Utility functions
├── bun.lock                       # Bun lockfile
├── DARK_THEME_GUIDE.md           # Dark theme implementation guide
├── next.config.js                 # Next.js configuration
├── package.json                   # Package dependencies
├── postcss.config.js              # PostCSS configuration
├── tailwind.config.js             # TailwindCSS configuration
└── tsconfig.json                  # TypeScript configuration

Technologies Used

• Next.js 15 - React framework
• React 18 - UI library
• TypeScript - Type safety
• TailwindCSS v3.4 - Styling
• shadcn/ui - UI components
• Vercel AI SDK - AI integration
• Lucide React - Icons

Customization

Adding New UI Components

This project uses shadcn/ui components. To add new components:

npx shadcn-ui@latest add [component-name]

Styling

The project uses TailwindCSS v4 with CSS variables for theming. Modify the CSS variables in app/globals.css to customize the theme.

AI Integration

The chat functionality is powered by the Vercel AI SDK. The API route is located at app/api/chat/route.ts. You can modify this to use different AI models or providers.

Deployment

The easiest way to deploy this app is using Vercel:

1. Push your code to a Git repository
2. Import your project to Vercel
3. Add your environment variables
4. Deploy

License

MIT License - see LICENSE file for details.