🤖 PrathamBOT - Premium AI Chat Experience

A premium, minimal, and rich AI chatbot experience powered by TanStack AI and Google Gemini 2.5 Flash.

Features • Installation • UI/UX Design • Tech Stack • License

---

✨ Features

🚀 Real-time Streaming - Lightning-fast responses via TanStack AI and Server-Sent Events (SSE).
🤖 Gemini 2.5 Flash - Powered by Google's state-of-the-art fast and efficient AI model.
💎 Premium UI/UX - Minimalist yet rich interface with smooth animations and dark mode support.
📝 Advanced Code Blocks - Syntax highlighting with language labels and one-click copy.
🎨 Emerald Theme - Curated color palette featuring Emerald Green for a modern, distinct look.
🔊 Listen Mode - Built-in text-to-speech synthesis for accessibility.
💬 Smart Feedback - Integrated user feedback system (Good/Bad response) with Sonner toasts.
⚡ Optimized Fonts - Distinctive paired typography using DM Sans and JetBrains Mono.

---

🎨 UI/UX Design Philosophy

PrathamBOT is built with a "Minimal, Rich, and Premium" aesthetic:

• Immersive Viewport: A full-screen chat experience that centers content perfectly.
• Glassmorphism: Subtle backdrop blurs on the header and footer for a modern depth.
• Micro-animations: Floating avatars and smooth message appearance transitions.
• Typography: DM Sans for human-like reading and JetBrains Mono for a professional code feel.
• Contextual Actions: Hover-triggered action bars for a clean, non-cluttered interface.

---

🛠️ Installation

Prerequisites

• Node.js 20+
• pnpm (recommended)
• Google Gemini API key from AI Studio

Quick Start

1. Clone & Install

   git clone https://github.com/pratham-prog861/tanstack-ai-demo.git
   cd tanstack-ai-demo
   pnpm install

2. Environment Setup Create a .env file:

   GEMINI_API_KEY=your_key_here

3. Run Dev

   pnpm dev

---

🏗️ Tech Stack

Core Frameworks

• Next.js 16 (App Router) & React 19
• TanStack AI (Core streaming & provider management)
• TypeScript & Tailwind CSS 4.0

UI Components

• Shadcn UI (Buttons, Avatars, Tooltips, Scroll Areas)
• Sonner (High-performance toast notifications)
• Lucide React (Consistent icon system)

Markdown & Content

• React Markdown & Remark GFM
• Rehype Highlight & Highlight.js (Isolated scoped syntax highlighting)

---

📁 Project Structure

tanstack-ai-demo/
├── src/
│   ├── app/
│   │   ├── api/chat/route.ts      # SSE Streaming endpoint
│   │   ├── globals.css            # Scoped code styling & theme
│   │   ├── layout.tsx             # Root layout & Toaster
│   │   └── page.tsx               # Immersive Chat Page
│   └── components/
│       ├── Chat.tsx               # Main Chat Logic & UI
│       └── ui/                    # Shared Shadcn components
├── public/                        # Bot avatars & assets
└── next.config.ts                 # Turbopack optimized config

---

🔧 AI Configuration

Currently optimized for Gemini 2.5 Flash. To switch to OpenAI (GPT-4), update api/chat/route.ts:

import { openai } from "@tanstack/ai-openai";

const stream = chat({
  adapter: openai(),
  model: "gpt-4-turbo",
  // ...
});

---

🚀 Deployment

---

📝 License

Distributed under the MIT License. See LICENSE for more information.

---

Made with ❤️ and Advanced Agentic Coding

⭐ Star this repo if you find it helpful!