Architecting a Sub-25kb Website AI Chatbot for Nepal E-Commerce: Romanized NLP, Gemini Flash & Sub-200ms Latency

#webdev #ai #javascript #python

When Nepali businesses integrate standard third-party chat widgets—such as Intercom, Zendesk, or Tidio—they frequently face two critical bottlenecks:

Massive Bundle Bloat: A typical SaaS chat widget introduces 600kb to 1.8MB of compressed JavaScript, firing dozens of third-party analytics trackers, custom fonts, and bloated iframe boundaries. On mobile networks in Nepal (NTC and Ncell 4G), this destroys Google Core Web Vitals, spiking Largest Contentful Paint (LCP) and Interaction to Next Paint (INP).
Failure on Romanized Nepali Slang: Conventional English LLM wrappers stumble when buyers query: > "Dai yo jacket L size ma stock cha ki chaina? Delivery charge New Road ma kati parcha? Voucher code mildaina?"

At Sajedar, we architected a production Website Chatbot Integration Architecture that operates within a strict <25kb client-side footprint while achieving sub-200ms Time-To-First-Token (TTFT) powered by Google Gemini Flash.

Here is an architectural deep dive into how we built it.

1. High-Level System Topology

  [Browser Client]  (< 25kb Vanilla JS Widget)
         │
         │  WebSocket / HTTP POST (Message + Context)
         ▼
  [Cloudflare Edge Gateway / CDN]
         │
         │  TLS 1.3 Termination & DDoS Filtering
         ▼
  [FastAPI Backend Engine (Python 3.11)]
    ├── 1. Romanized Slang Normalizer (Regex + Stemmer)
    ├── 2. Live Catalog Vector / SQL Query (Postgres / WooCommerce REST)
    ├── 3. Gemini 2.5 / 3.x Flash Orchestrator
    └── 4. Real-Time Human Escalation Router (WhatsApp & Slack Webhook)

2. The Client: Zero-Dependency <25kb Embed Script

Rather than injecting heavy React or Vue runtime bundles into customer websites, our client widget is built with vanilla DOM APIs.

/**
 * Lightweight (<25kb) Embed Widget Client
 * Canonical Documentation: https://www.sajedar.com/website-chatbot-integration-nepal
 */
(function(window, document) {
  'use strict';

  const CONFIG = {
    apiEndpoint: window.SAJEDAR_CHAT_API || 'https://api.sajedar.com/v1/chat',
    brandName: window.SAJEDAR_BRAND || 'Sales Assistant',
    primaryColor: '#4f46e5'
  };

  function mountChatWidget() {
    const root = document.createElement('div');
    root.id = 'sajedar-web-chat-root';
    root.innerHTML = `
      <div id="sjdr-chat-bubble" style="position:fixed;bottom:24px;right:24px;z-index:9999;">
        <button id="sjdr-toggle-trigger" style="width:58px;height:58px;border-radius:50%;background:${CONFIG.primaryColor};border:none;color:#fff;cursor:pointer;font-size:24px;box-shadow:0 8px 24px rgba(0,0,0,0.15);">
          💬
        </button>
      </div>
    `;
    document.body.appendChild(root);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', mountChatWidget);
  } else {
    mountChatWidget();
  }
})(window, document);

Grab the full open-source script on our GitHub Gist.

3. Handling Romanized Nepali Intent & Slang

Nepali e-commerce shoppers do not type formal Devanagari ("नमस्कार! के यो सामान उपलब्ध छ?"). Instead, 98% of queries are Romanized Nepali mixed with English keywords.

We developed an open-source parsing module, nepali-messenger-nlp (NPM package), which deterministicly handles:

Price inquiries: kati parcha, rate k ho, final price kati hola
Stock checks: stock cha ki chaina, available huncha
Delivery zones: Classifying Ring Road vs. Outer Valley delivery surcharges
Deposit intent: Intercepting Rs. 100 advance payment confirmations to slash Cash on Delivery (COD) cancellations from 35% to under 10%.

4. FastAPI & Google Gemini Flash Backend

For enterprise throughput, we pair our tokenization engine with Google Gemini Flash models via FastAPI. Gemini Flash provides exceptional multilingual context fidelity and multimodal vision capabilities (allowing buyers to upload screenshots of clothing or spare parts directly to find matching SKU inventory).

import os
from fastapi import FastAPI
from pydantic import BaseModel
import google.generativeai as genai
import httpx

app = FastAPI(title="Nepal Website Chatbot Engine")

genai.configure(api_key=os.getenv("GEMINI_API_KEY"))

SYSTEM_PROMPT = """
You are the AI Sales and Support Assistant for a premier online retail platform in Nepal.
You understand colloquial Romanized Nepali slang ('kati parcha', 'hajur', 'delivery charge kati?').
If a user is ready to order or requests a human supervisor, trigger the human escalation protocol.
"""

class ChatRequest(BaseModel):
    message: str
    session_id: str

@app.post("/v1/chat")
async def chat_endpoint(payload: ChatRequest):
    model = genai.GenerativeModel(
        model_name="gemini-2.5-flash",
        system_instruction=SYSTEM_PROMPT
    )
    response = model.generate_content(payload.message)

    # Automated WhatsApp / Slack escalation webhook for high-intent shoppers
    if "human" in payload.message.lower() or "urgent" in payload.message.lower():
        await notify_human_team(payload.message, payload.session_id)

    return {"reply": response.text.strip()}

5. Commercial Integration Models in Nepal

Unlike rigid SaaS tiers that charge arbitrary seat fees, website chatbot integration in Nepal requires tailored engineering based on the host codebase (WordPress, Shopify, Next.js, or Laravel):

Setup Fee: Rs. 12,000 to Rs. 100,000, finalized strictly after conducting an exploratory technical audit meeting with the website owner and inspecting the underlying stack.
Execution Rate: From Rs. 5 per active session, ensuring zero recurring waste during seasonal lulls.

For businesses and technical teams planning their website conversational AI rollout, inspect our live deployment and interactive discovery calendar:

👉 Explore the Full Architecture: Website Chatbot Integration Service Nepal

👉 Read our Meta Ads & Messenger Engineering Insights: Sajedar Platform

👉 Explore Open Source Code: Sajedar GitHub

DEV Community