🤖 AI Chatbot Template

Welcome to the AI Chatbot Template! This flexible, full-stack starter kit is designed for students of Halim Madi's course to build and deploy custom AI chatbots. While the included example focuses on poetry, the framework can support a wide range of use cases—from wellness bots and creative assistants to educational tutors and productivity companions.

---

🎯 What You'll Build

A full-featured AI chatbot that can:

• Engage in natural or themed conversations (e.g. poetic, informative, supportive)
• Accept voice input via microphone
• Respond with synthesized speech
• Stream responses in real-time
• Deploy seamlessly to production

---

🛠️ Technical Features

• Modern Stack: Next.js 14, React 18, TypeScript
• Beautiful UI: Tailwind CSS with responsive design
• AI Integration: OpenAI API (GPT, Whisper, TTS)
• Security: Server-side API handling for key protection
• Production-Ready: Easy deployment to Vercel

---

📚 Course Integration

This template is ideal for students who want to:

1. Learn AI integration in web applications
2. Practice modern web development with React & Next.js
3. Experiment with creative or practical chatbot use cases
4. Build and launch polished, real-world applications

---

🔍 Code Structure

src/
├── app/
│   ├── api/
│   │   └── chat/
│   │       └── route.ts     # Server-side API for OpenAI chat
│   ├── page.tsx             # Main chat interface
│   ├── layout.tsx           # App layout
│   └── globals.css          # Global styles

---

🚀 To Deploy:

• Push to GitHub
• Connect to Vercel
• Add environment variables in Vercel
• Deploy and share your bot!