🤖 ELI5 Bot: Simplifying the Complex

An advanced, AI-powered "Explain Like I'm 5" (ELI5) platform that adapts knowledge to any audience size. Built with cutting-edge technologies like Next.js 16, React 19, and the Vercel AI SDK.

---

🌟 Overview

The ELI5 Bot is designed to bridge the knowledge gap. Whether you're trying to understand "Quantum Entanglement" as a 5-year-old or an expert, this bot dynamically adjusts its language, tone, and depth using state-of-the-art LLMs (OpenAI GPT & Google Gemini).

✨ Key Features

• 🎯 Multi-Level Complexity: A dedicated slider to toggle between ELI5, High School, College, and Expert levels.
• 📱 Premium UI/UX: A sleek, dark-themed interface featuring glassmorphism, smooth gradients, and micro-animations.
• ⚡ Real-time Streaming: Instant message delivery using the Vercel AI SDK for a seamless chat experience.
• 📊 Live Metrics Dashboard:
  • Latency: Track response speed in milliseconds.
  • Tokens: Monitor processing power consumed.
  • Estimated Cost: Live cost calculation based on specific model pricing.
• 🤖 Model Hot-Swapping: Switch between OpenAI (GPT-4o/Mini) and Google Gemini 1.5 Flash on the fly.

---

🛠️ How It Was Built (The Journey)

Phase 1: Foundation & Architecture

We started by bootstrapping a Next.js 16 project to leverage the latest React 18/19 server components and performance optimisations. The core state management for the chat was handled by @ai-sdk/react.

Phase 2: Intelligence & Prompt Engineering

We developed a dynamic API route (/api/chat) that acts as an intelligent router. It translates the "Complexity Level" from the UI into specific System Instructions, ensuring the LLM maintains its persona perfectly across different difficulty levels.

Phase 3: UI Design & Metrics

The user interface was crafted using Tailwind CSS 4. We focused on a "Production-Grade" look, implementing:

• Glassmorphism: Headers and footers with backdrop filters.
• Dynamic Scaling: A mobile-responsive layout.
• Metadata Tracking: Integrated logic to capture onFinish usage statistics to display cost and latency.

Phase 4: Integration

Final integration of two major AI providers:

• OpenAI: Powering the high-precision GPT models.
• Google Gemini: Integrated for its speed and context efficiency.

---

🔍 Main Points to Review

When evaluating this project, pay close attention to:

1. app/api/chat/route.js: See how we map UI complexity to granular system prompts and handle multiple model providers within a single endpoint.
2. app/page.js: Look at the usage of onFinish callback to calculate metrics like duration and cost estimation based on token count as it arrives from the stream.
3. Tailwind Configuration: The use of custom gradients and the minimalist aesthetic that prioritizes content readability.

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• NPM / PNPM / Bun
• API Keys for OpenAI and Google Gemini

Installation

1. Clone the repository:

   git clone <your-repo-url>

2. Install dependencies:

   npm install

3. Configure Environment Variables: Create a .env.local file and add:

   OPENAI_API_KEY=your_key_here
   GOOGLE_GENERATIVE_AI_API_KEY=your_key_here

4. Run the development server:

   npm run dev

---

📜 Tech Stack

• Framework: Next.js 16 (App Router)
• Library: React 19
• AI Integration: Vercel AI SDK
• Styling: Tailwind CSS 4
• Icons/Visuals: SVGs & CSS Gradients

---

Built with ❤️ to simplify everything.