AI Chat

A clean, minimal AI chat interface powered by OpenAI's API. Built with React, TypeScript, and Tailwind CSS.

Features

• 💬 Real-time chat with OpenAI models (defaults to gpt-4o)
• 🎨 Customizable background — set any image URL with adjustable opacity and blur
• ✨ Smooth animations via Framer Motion
• 📝 Markdown rendering for AI responses (code blocks, lists, bold, etc.)
• ⌨️ Auto-expanding textarea — Enter to send, Shift+Enter for new lines
• 🌙 Dark-first design with shadcn/ui components

Getting Started

Prerequisites

• Node.js 18+ and npm
• An OpenAI API key

Setup

# 1. Clone the repo
git clone <YOUR_GIT_URL>
cd <YOUR_PROJECT_NAME>

# 2. Install dependencies
npm install

# 3. Create your environment file
cp .env.example .env
# Then edit .env and add your OpenAI API key

# 4. Start the dev server
npm run dev

Environment Variables

Create a .env file at the project root:

VITE_OPENAI_API_KEY=your_openai_api_key_here
VITE_OPENAI_MODEL=gpt-4o   # optional, defaults to gpt-4o

⚠️ Note: The API key is used directly in the browser (dangerouslyAllowBrowser: true). This is fine for local development or personal use, but for production deployments consider proxying requests through a backend.

Available Scripts

Tech Stack

Project Structure

src/
├── components/
│   ├── BackgroundSettings.tsx  # Background image/opacity/blur controls
│   ├── ChatInput.tsx           # Auto-expanding message input
│   ├── ChatMessage.tsx         # Message bubble + typing indicator
│   └── ui/                     # shadcn/ui primitives
├── hooks/                      # Custom React hooks
├── lib/                        # Shared utilities
├── pages/
│   ├── Index.tsx               # Main chat page
│   └── NotFound.tsx            # 404 page
└── main.tsx

License

MIT