Talk Talk Goose

A full-stack AI chatbot application enabling real-time conversations with Google's Gemini AI model, featuring multimodal support for text and images with optimized streaming performance.

Features

• Real-time AI Streaming: Optimized Gemini API integration with 30-40 tokens/second throughput
• Multimodal Chat: Support for text and image inputs via ImageKit CDN
• Session Caching: Persistent Gemini sessions reduce response time from 6s → 1s after first message
• Smart Pagination: Scalable message storage with "Load More" functionality
• User Authentication: Secure auth via Clerk with protected routes
• Performance Monitoring: Built-in metrics tracking for API, database, and streaming performance

Tech Stack

Frontend:

• React 19 + Vite
• React Router v7
• Clerk React (authentication)
• TanStack React Query v5 (server state)
• Google GenAI SDK (Gemini streaming)
• ImageKit React (image uploads)

Backend:

• Express v5 + Node.js
• MongoDB + Mongoose ODM
• Clerk Express SDK (auth middleware)
• ImageKit (CDN/upload management)

Prerequisites

• Node.js 18+ and npm
• MongoDB instance (local or cloud)
• Clerk account for authentication
• Google AI Studio API key for Gemini
• ImageKit account for image uploads

Quick Start

1. Clone and Install

git clone <repository-url>
cd aichat

# Install backend dependencies
cd backend
npm install

# Install frontend dependencies
cd ../client
npm install

2. Environment Setup

Backend - Create backend/.env:

MONGO=your_mongodb_connection_string
CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
IMAGE_KIT_ENDPOINT=your_imagekit_endpoint
IMAGE_KIT_PUBLIC_KEY=your_imagekit_public_key
IMAGE_KIT_PRIVATE_KEY=your_imagekit_private_key
CLIENT_URL=http://localhost:5173

Frontend - Create client/.env.local:

VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
VITE_GEMINI_PUBLIC_KEY=your_gemini_api_key
VITE_IMAGE_KIT_ENDPOINT=your_imagekit_endpoint
VITE_IMAGE_KIT_PUBLIC_KEY=your_imagekit_public_key
VITE_API_URL=http://localhost:3000

3. Run Development Servers

Terminal 1 - Backend:

cd backend
npm start
# Runs on http://localhost:3000

Terminal 2 - Frontend:

cd client
npm run dev
# Runs on http://localhost:5173

Visit http://localhost:5173 to start chatting!

Project Structure

aichat/
├── backend/
│   ├── models/          # MongoDB schemas (Chat, Message, UserChats)
│   ├── scripts/         # Database migration scripts
│   └── index.js         # Express server and API routes
├── client/
│   ├── src/
│   │   ├── components/  # React components (ChatList, NewPrompt, Upload)
│   │   ├── contexts/    # ChatSessionContext for Gemini session caching
│   │   ├── layouts/     # App layouts (Root, Dashboard)
│   │   ├── routes/      # Page components
│   │   └── lib/         # Gemini API configuration
│   └── public/          # Static assets
└── README.md

Key Architecture

Database Design

• Chat Collection: Stores chat metadata only (messageCount, lastMessageAt)
• Message Collection: Individual messages with pagination support
• UserChats Collection: Sidebar chat list per user

Performance Optimizations

• Session Caching: Gemini sessions cached per chat (5-6s saved per message)
• UI Batching: React updates batched at 60fps during streaming
• Optimized Gemini Config: Tuned for 20-40% faster responses
• Normalized Storage: 80% smaller payloads, 70% faster queries

API Endpoints

• POST /api/chats - Create new chat
• GET /api/userchats - Get user's chat list
• GET /api/chats/:id - Get chat with paginated messages
• PUT /api/chats/:id - Add messages to chat
• GET /api/chats/:id/messages - Load older messages
• GET /api/metrics - Performance metrics

Development Commands

Frontend:

npm run dev      # Start dev server
npm run build    # Production build
npm run preview  # Preview production build

Backend:

npm start        # Start with nodemon (auto-reload)

Deployment

The application supports Docker deployment. See docker-compose.yml for container orchestration setup.

Production checklist:

• Set production environment variables
• Configure MongoDB with proper indexes
• Set up Clerk production instance
• Configure ImageKit CDN
• Enable Gemini API quotas

License

MIT