Ai Online Store

Note: This project is a Proof of Concept (POC) demonstrating advanced AI integration patterns. It serves as a reference implementation for MCP servers, RAG, and streaming UI components. While fully functional, it uses simplified infrastructure (e.g., SQLite) and is not intended for production deployment as-is.

A modern e-commerce platform demonstrating cutting-edge AI technologies:

• 📊 Interactive Charts Streaming - Watch datasets render into visualization in real-time
• ⚡ Real-time Data - Live inventory and sales tracking via SSE (Server-Sent Events)
• 🤖 LLM Integration (Gemini/OpenAI) with streaming responses
• 🔧 Tool Calling for real-time data access
• 🔍 RAG (Retrieval Augmented Generation) for semantic product search
• 🔌 MCP Servers (Model Context Protocol) for modular AI tools

Architecture

┌─────────────────────────────────────────────────────────────────┐
│                         SmartShop AI                            │
├─────────────────────────────────────────────────────────────────┤
│  ┌──────────────┐    ┌──────────────┐    ┌──────────────┐       │
│  │   Frontend   │───▶│   API        │───▶│   Database   │       │
│  │   (React)    │    │   (Express)  │    │   (SQLite)   │       │
│  └──────────────┘    └──────┬───────┘    └──────────────┘       │
│                             │                                   │
│                    ┌────────┴────────┐                          │
│                    │                 │                          │
│              ┌─────▼─────┐    ┌──────▼──────┐                   │
│              │   LLM     │    │   RAG       │                   │
│              │ (Gemini)  │    │ (Embeddings)│                   │
│              └───────────┘    └─────────────┘                   │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │                    MCP Servers                           │   │
│  │  ┌───────────┐  ┌───────────┐  ┌───────────────────┐     │   │
│  │  │ Products  │  │  Orders   │  │    Analytics      │     │   │
│  │  └───────────┘  └───────────┘  └───────────────────┘     │   │
│  └──────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────┐     ┌──────────────────┐
│  React Frontend │◄───►│   Vite Proxy     │
│   (port 5173)   │     │   /api → :3001   │
└─────────────────┘     └────────┬─────────┘
                                 │
                        ┌────────▼─────────┐
                        │    Express API   │
                        │   (port 3001)    │
                        │   - Auth/Shop    │
                        │   - Cart/Orders  │
                        │   - Chat (AI)    │
                        └────────┬─────────┘
                                 │
              ┌──────────────────┼──────────────────┐
              │                  │                  │
    ┌─────────▼──────┐ ┌────────▼───────┐ ┌───────▼────────┐
    │ MCP Products   │ │  MCP Orders    │ │  MCP Analytics │
    │  (port 3010)   │ │  (port 3011)   │ │   (port 3012)  │
    │  HTTP + SSE    │ │  HTTP + SSE    │ │   HTTP + SSE   │
    └────────────────┘ └────────────────┘ └────────────────┘
              │                  │                  │
              └──────────────────┼──────────────────┘
                                 │
                        ┌────────▼─────────┐
                        │   SQLite DBs     │
                        │  smartshop.db    │
                        │  vectors.db      │
                        └──────────────────┘

Tech Stack

Layer	Technology
Runtime	Bun 1.3+
Monorepo	Turborepo
Frontend	React 18 + Vite 6 + Tailwind CSS
Backend	Express.js
Database	SQLite (bun:sqlite)
LLM	Gemini 2.5 Flash / OpenAI GPT-4
Embeddings	Gemini Embedding-001 (768 dimensions)
MCP	@modelcontextprotocol/sdk
Charts	Recharts

Quick Start

Prerequisites

• Bun 1.3 or later
• Gemini API Key (free at Google AI Studio)

Installation

# Install dependencies
bun install

# Set up environment
cp apps/api/.env.example apps/api/.env
# Add your GEMINI_API_KEY to .env

Environment Variables

Create apps/api/.env by copying the example:

cp apps/api/.env.example apps/api/.env

Then edit .env with your API keys:

GEMINI_API_KEY=your-gemini-api-key
# OR
OPENAI_API_KEY=your-openai-api-key

JWT_SECRET=your-jwt-secret
PORT=3001

Running

bun run dev

# Frontend: http://localhost:5173
# API: http://localhost:3001

Test Accounts

Role	Email	Password
Admin	[email protected]	admin123
Customer	[email protected]	customer123

Features

AI Chat Assistant

• Streaming responses via SSE
• Role-based tools (customer vs admin)
• Conversation history

RAG Semantic Search

# Initialize (admin only)
curl -X POST http://localhost:3001/admin/rag/init -H "Authorization: Bearer <token>"

# Search
curl "http://localhost:3001/shop/semantic-search?q=something+for+gaming"

Streaming Charts (Admin)

• "Show me revenue by category" → Pie chart
• "Sales trend for the last 30 days" → Line chart
• "Top 5 selling products" → Bar chart

MCP Servers

Server	Tools
Products	search_products, get_product_details, get_reviews
Orders	get_orders, get_order_details, get_spending
Analytics	get_dashboard, get_top_products, get_revenue

Project Structure

ai-online-store/
├── apps/
│   ├── api/                 # Express API
│   │   └── src/
│   │       ├── services/
│   │       │   ├── chat/    # Chat + tools
│   │       │   ├── llm/     # Gemini/OpenAI
│   │       │   └── rag/     # Embeddings + Vector store
│   │       └── routes/      # API endpoints
│   ├── mcp-analytics/       # Analytics MCP Server
│   ├── mcp-orders/          # Orders MCP Server
│   ├── mcp-products/        # Products MCP Server
│   └── web/                 # React frontend
└── packages/shared/         # Shared types

Implementation Status

• Foundation (monorepo, database, API)
• Core Shop Features (products, cart, orders)
• AI Chat Infrastructure (LLM, tools, streaming)
• MCP Servers Integration
• RAG System (embeddings, semantic search)
• Streaming Charts & Visualizations

Scripts

bun run dev      # Start all services
bun run build    # Build for production
bun run clean    # Clean build artifacts

License

MIT