Chatbot RAG Widget

A configurable RAG (Retrieval-Augmented Generation) chatbot widget for React applications.

Installation

npm install @theojustin/chatbot-rag-widget

Usage

import { ChatbotRagWidget } from '@theojustin/chatbot-rag-widget';

function App() {
  const handleMessage = async (message: string): Promise<string> => {
    // Your RAG logic here - uses YOUR environment variables
    const response = await fetch('/api/chat', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.NEXT_PUBLIC_API_KEY}`,
      },
      body: JSON.stringify({ message }),
    });
    const data = await response.json();
    return data.response;
  };

  return (
    <ChatbotRagWidget
      onSendMessage={handleMessage}
      title="My Assistant"
      placeholder="Ask me anything..."
    />
  );
}

Props

• onSendMessage: Function that handles message processing and returns a response (uses YOUR env variables)
• title: Widget title (optional)
• placeholder: Input placeholder text (optional)
• initialMessage: First bot message (optional)
• className: Additional CSS classes (optional)

Features

• Built-in shadcn/ui components
• Configurable message handling
• TypeScript support
• Environment variables handled by consumer
• Minimal setup required