@bmx-labs/chat-widget

A reusable chat AI widget for React/Next.js apps. Fixed bottom-right with highest stacking order, designed for server-side RAG integration.

Install

npm i @bmx-labs/chat-widget react react-dom

yarn add @bmx-labs/chat-widget react react-dom

pnpm add @bmx-labs/chat-widget react react-dom

Usage

import React from "react";
import { BmxChatBot, RestAdapters } from "@bmx-labs/chat-widget";

export default function App() {
  // Server-side RAG adapter: calls your backend API endpoint
  const api = RestAdapters.production(); // or RestAdapters.development()

  return <BmxChatBot api={api} projectId="bmx" />;
}

• The widget is rendered via a portal to document.body with a very high z-index.
• Server-side RAG: All AI processing happens on your server to keep API keys secure.

Adapters

• RestAdapters.production() – Calls your server endpoint (same domain)
• RestAdapters.development() – Calls localhost:8080 for development
• createRestAdapter(config) – Custom server configuration
• createMockAdapter(delayMs?) – Echo responses for local dev

Server Integration

Create a POST endpoint on your server (e.g., /common/ai/chat) that handles RAG:

// Your server endpoint
POST /common/ai/chat
{
  "input": "user question",
  "history": [{"role": "user", "content": "previous message"}]
}

// Response
{
  "id": "msg-123",
  "role": "assistant", 
  "content": "AI response with sources",
  "createdAt": 1234567890
}

BmxChatBot Props

• api (required): adapter implementing sendMessage(history, input, options)
• projectId
• zIndex (optional): override default
• storage (optional): 'local' | 'none' (default 'local')
• storageKey (optional)
• placeholder, title (optional)

Development

pnpm i
pnpm dev

License

This project is licensed as GNU AGPLv3.