React Chatbot Lite 🤖

A lightweight, high-performance RAG chatbot widget for React applications. Designed to be headless-capable but ships with a beautiful modern UI out of the box. Connects easily to Gemini, OpenAI, or any custom backend via a simple, standardized API contract.

🎨 Theming Examples

See how react-chatbot-lite adapts to different brands instantly using the theme prop.

✨ Features

• 🚀 Modern UI — Gradients, glassmorphism, smooth animations
• 🎨 Fully Themeable — Customize every color, size, and text without CSS
• 🧠 RAG Ready — Citations, sources, markdown rendering
• 🔌 Backend Agnostic — Works with Node, Python (FastAPI), or any HTTP API
• 📱 Responsive — Mobile and desktop optimized
• 💨 Fast — Built with Vite + Rollup, zero runtime overhead

📦 Installation

npm install react-chatbot-lite
# or
yarn add react-chatbot-lite
# or
pnpm add react-chatbot-lite

🚀 Quick Start

1. Import Styles

Add this to your project file

import "react-chatbot-lite/style.css";

2. Wrap Your App

import { ChatProvider, ChatWindow } from "react-chatbot-lite";

function App() {
  return (
    <ChatProvider
      config={{
        baseUrl: "https://your-backend-api.com", // Your RAG server endpoint
        botId: "user_123_abc", // Optional: For multi-tenant apps
      }}
    >
      {/* Your App Content */}
      <HomePage />

      {/* Chat Widget */}
      <ChatWindow />
    </ChatProvider>
  );
}

🎨 Theming & Customization

Pass a theme object to override the entire UI—no CSS required.

<ChatWindow
  title="Support Assistant"
  position="bottom-right"
  tenantId="optional-tenant-id"
  theme={{
    /* HEADER */
    headerBgGradient: "#0d9488",
    headerTextColor: "#ffffff",
    headerIcon: <Icon size={20} />,
    headerPadding: "p-4",
    titleFontSize: "text-base",
    subtitleFontSize: "text-xs",
    statusDotColor: "#34d399",
    alwaysActiveText: "Online now",

    /* MESSAGE AREA */
    messageAreaBgColor: "#ecfdf5",
    messagePadding: "p-5",
    messageFontSize: "text-sm",

    /* USER MESSAGE */
    userBubbleBg: "#2dd4bf",
    userBubbleText: "#ffffff",

    /* BOT MESSAGE */
    botBubbleBg: "#ffffff",
    botBubbleText: "#134e4a",

    /* BODY */
    bodyBgColor: "#f0fdfa",
    borderColor: "#99f6e4",
    borderRadius: "rounded-2xl",

    /* INPUT */
    inputBgColor: "#ffffff",
    inputTextColor: "#134e4a",
    inputFontSize: "text-sm",
    inputBorderFocus: "focus:ring-2",
    inputPlaceholderColor: "#9ca3af",

    /* SEND BUTTON */
    sendButtonBgActive: "#0f766e",
    sendButtonBgInactive: "#00000000",
    sendButtonTextActive: "#ffffff",
    sendButtonTextInactive: "#5eead4",
    sendIcon: <Send size={20} />,

    /* LAUNCHER BUTTON */
    buttonBgGradient: "#14b8a6",
    buttonBgOpen: "#5eead4",
    buttonTextColor: "#ffffff",
    buttonOpenTextColor: "#065f46",
    buttonSize: "h-14 w-14",
    launcherIcon: <Icon />,
    launcherBgStyle: undefined,
    closeIcon: <X size={20} />,

    /* EMPTY STATE & LOADING */
    emptyStateIcon: <Icon size={40} />,
    emptyStateMessage: "Start chatting with us!",
    loadingIcon: undefined,
    thinkingText: "Assistant is typing...",

    /* FOOTER */
    poweredByText: "Powered by AI Support",
    poweredByTextColor: "#0f766e",
    poweredByFontSize: "text-[10px]",
    footerPadding: "p-4",

    /* GENERAL ICON COLOR */
    iconColor: "#ffffff",
  }}
/>

Backend API Contract

To make the chatbot functional, your backend must accept a POST request at /api/chat. The widget will append /api/chat to the baseUrl you provide in the ChatProvider.config.

Request

• Endpoint: POST /api/chat
• Headers: Content-Type: application/json

Example request body:

{
  "message": "User's question goes here",
  "botId": "user_123_abc"
}

Response

Your server should return a JSON object with an answer key and optional sources array, for example:

{
  "answer": "This is the AI's response text.",
  "sources": ["https://example.com/source-1"]
}

License

MIT © K.D Ranaweera