AI Chat Interface

A sleek, production-ready AI chat application built with Next.js 14, OpenAI API, and Tailwind CSS. Features real-time streaming responses, conversation history, model selection, and a dark/light theme switcher.

---

✨ Features

• 🔴 Streaming responses — token-by-token output via Server-Sent Events
• 💬 Conversation history — full multi-turn context sent with every request
• 🌗 Dark / Light theme — persisted to localStorage
• 🤖 Model selector — switch between GPT-4o, GPT-4o mini, GPT-3.5 Turbo
• ⏹ Stop generation — abort mid-stream at any time
• 📱 Responsive design — collapsible sidebar on mobile
• 🎨 Custom UI — JetBrains Mono + Syne fonts, CSS variable theming, grain overlay
• 🧹 Clear conversation — reset chat history instantly

---

🗂 Project Structure

ai-chat-interface/
├── app/
│   ├── api/
│   │   └── chat/
│   │       └── route.ts        # Streaming API route (OpenAI SSE)
│   ├── globals.css             # Global styles + CSS variables
│   ├── layout.tsx              # Root layout
│   └── page.tsx                # Entry page
├── components/
│   ├── ChatInterface.tsx       # Main layout container
│   ├── ChatInput.tsx           # Auto-resizing textarea + send/stop button
│   ├── Header.tsx              # Top bar with theme toggle + model badge
│   ├── MessageBubble.tsx       # User & assistant message with markdown rendering
│   ├── Sidebar.tsx             # Model selector + actions sidebar
│   └── WelcomeScreen.tsx       # Empty state with prompt suggestions
├── lib/
│   ├── types.ts                # Shared TypeScript types
│   ├── useChat.ts              # Streaming chat logic (custom hook)
│   ├── useTheme.ts             # Dark/light theme hook
│   └── utils.ts                # Helpers (generateId, formatTime, etc.)
├── .env.local.example          # Environment variable template
├── next.config.js
├── tailwind.config.ts
├── tsconfig.json
└── package.json

---

🚀 Getting Started

1. Clone or unzip the project

cd ai-chat-interface

2. Install dependencies

npm install
# or
yarn install

3. Set up environment variables

cp .env.local.example .env.local

Open .env.local and add your OpenAI API key:

OPENAI_API_KEY=sk-your-key-here

Get your API key at platform.openai.com/api-keys

4. Run the development server

npm run dev

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

---

🏗 Build for Production

npm run build
npm start

---

☁ Deploy to Vercel (Recommended)

1. Push the project to a GitHub repository
2. Go to vercel.com and import the repo
3. Add the environment variable OPENAI_API_KEY in the Vercel dashboard
4. Click Deploy

---

🔧 Configuration

Variable	Description
OPENAI_API_KEY	Your OpenAI API secret key (required)

Changing the default model

Edit app/page.tsx:

const [model, setModel] = useState<ModelId>("gpt-4o"); // change default here

Changing the system prompt

Edit app/api/chat/route.ts to prepend a system message:

messages: [
  { role: "system", content: "You are a helpful assistant." },
  ...messages,
],

---

🛠 Tech Stack

Technology	Purpose
Next.js 14	React framework with App Router
OpenAI Node SDK	GPT API integration
Tailwind CSS	Utility-first styling
TypeScript	Type safety
Lucide React	Icon set

---

📄 License

MIT — free to use, modify, and distribute.