nextjs-chatbot-ui 1.4.0 → 1.5.0

package/README.md

@@ -1,6 +1,27 @@
-# Chatbot UI Component
+# nextjs-chatbot-ui
 
-A beautiful, configurable chatbot UI component for Next.js applications with Tailwind CSS. Inspired by Sendbird's modern chat interface.
+A beautiful, configurable chatbot UI component for Next.js with Tailwind CSS. Perfect for customer support, AI assistants, and chat applications.
+
+## ⚡ Super Simple Usage (Just 2 Files!)
+
+```javascript
+// app/page.tsx
+'use client';
+import { Chatbot } from 'nextjs-chatbot-ui';
+export default function Home() {
+  return <Chatbot config={{ backendUrl: '/api/chat' }} />;
+}
+```
+
+```javascript
+// app/api/chat/route.ts
+export async function POST(req: Request) {
+  const { message } = await req.json();
+  return Response.json({ message: `You said: ${message}` });
+}
+```
+
+**Done!** See `SIMPLE_SETUP.md` for more examples.
 
 ## Features
 
@@ -33,6 +54,81 @@ This package requires:
 npm install nextjs-chatbot-ui
 ```
 
+## 🚀 Super Simple Setup (Complete RAG Chatbot in 3 Steps!)
+
+**Everything works automatically!** Just run the setup script and add your `.env` file.
+
+### Step 1: Run Setup Script
+
+```bash
+npx nextjs-chatbot-ui-setup
+```
+
+This automatically creates all API routes needed for the chatbot and admin setup.
+
+### Step 2: Install Dependencies & Add Environment Variables
+
+```bash
+npm install mongodb pg chromadb openai
+```
+
+Create `.env.local` file:
+```env
+OPENAI_API_KEY=your_openai_api_key_here
+CHROMADB_URL=http://localhost:8000
+```
+
+### Step 3: Use Components
+
+```javascript
+// app/page.tsx
+'use client';
+import { Chatbot, AdminSetup } from 'nextjs-chatbot-ui';
+
+export default function Home() {
+  return (
+    <div>
+      <AdminSetup />
+      <Chatbot config={{ backendUrl: '/api/chat' }} />
+    </div>
+  );
+}
+```
+
+**That's it!** 🎉 
+
+- Use `<AdminSetup />` to connect to your database and process embeddings
+- Use `<Chatbot />` to ask questions about your data
+- Everything else is handled automatically!
+
+## Quick Start (Minimal Code)
+
+### Simplest Usage (Just 2 files!)
+
+**1. Add to your page:**
+```javascript
+// app/page.tsx
+'use client';
+import { Chatbot } from 'nextjs-chatbot-ui';
+
+export default function Home() {
+  return <Chatbot config={{ backendUrl: '/api/chat' }} />;
+}
+```
+
+**2. Create API endpoint:**
+```javascript
+// app/api/chat/route.ts
+import { NextResponse } from 'next/server';
+
+export async function POST(req: Request) {
+  const { message } = await req.json();
+  return NextResponse.json({ message: `You said: ${message}` });
+}
+```
+
+**Done!** See `SIMPLE_SETUP.md` for more examples.
+
 ## Usage
 
 ### Basic Setup
@@ -230,7 +326,9 @@ interface ChatbotConfig {
 
 ### Backend API Requirements
 
-Your backend should accept POST requests with the following format:
+**✅ Works with ANY backend!** Express, FastAPI, Flask, Django, NestJS, Go, or any other framework.
+
+Your backend just needs to implement **one POST endpoint** that accepts and returns JSON:
 
 **Request:**
 ```json
@@ -243,7 +341,7 @@ Your backend should accept POST requests with the following format:
 }
 ```
 
-**Response:**
+**Response (either format works):**
 ```json
 {
   "message": "Bot's response text",
@@ -260,7 +358,10 @@ or
 }
 ```
 
-**Note:** The `suggestedReplies` or `suggestions` field is optional and will display as clickable buttons below the bot's message, similar to Sendbird's interface.
+**Note:** 
+- The `suggestedReplies` or `suggestions` field is optional
+- The component accepts either `message` or `response` in the response
+- See `BACKEND_INTEGRATION.md` for examples with different backend frameworks (Express, FastAPI, Flask, Django, NestJS, Go, etc.)
 
 ### Example Implementation
 
@@ -500,6 +601,45 @@ If the database connection is not establishing:
 
 5. **Verify database credentials**: Ensure your database host, port, username, password, and database name are correct.
 
+## RAG Chatbot Architecture
+
+This package supports RAG (Retrieval-Augmented Generation) chatbot architecture for answering questions about your database.
+
+### Architecture Flow
+
+```
+React UI → Express API → MongoDB + ChromaDB → OpenAI
+```
+
+1. **Setup Phase**: Use `AdminSetup` component to connect to database, select collections/columns, and process embeddings
+2. **Query Phase**: Use `Chatbot` component to ask questions, which are answered using vector search and LLM generation
+
+### Quick Start with RAG
+
+1. **Set up backend** (see `server.js` or `example-nextjs-api-routes.md`):
+   - Express server with MongoDB, ChromaDB, and OpenAI integration
+   - Endpoints: `/api/search`, `/api/database/process-embeddings`
+
+2. **Configure chatbot**:
+   ```javascript
+   const config: ChatbotConfig = {
+     backendUrl: '/api/search', // RAG search endpoint
+     labels: {
+       title: 'RAG Chatbot',
+       placeholder: 'Ask me anything about your data...',
+     },
+   };
+   ```
+
+3. **Use AdminSetup** to:
+   - Connect to your database
+   - Select collections and columns
+   - Process embeddings (fetches data → converts to embeddings → stores in ChromaDB)
+
+4. **Query your data** using the Chatbot component
+
+For complete RAG architecture documentation, see `RAG_ARCHITECTURE.md`.
+
 ## License
 
 MIT

package/api/chat.ts

@@ -0,0 +1,97 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { ChromaClient } from 'chromadb';
+import OpenAI from 'openai';
+
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+});
+
+const chromaClient = new ChromaClient({
+  path: process.env.CHROMADB_URL || 'http://localhost:8000',
+});
+
+export async function POST(request: NextRequest) {
+  try {
+    const { message, userInfo } = await request.json();
+    
+    if (!message) {
+      return NextResponse.json(
+        { error: 'Message is required' },
+        { status: 400 }
+      );
+    }
+    
+    if (!process.env.OPENAI_API_KEY) {
+      return NextResponse.json(
+        { error: 'OPENAI_API_KEY is not set in environment variables' },
+        { status: 500 }
+      );
+    }
+    
+    // Get query embedding
+    const queryEmbedding = await openai.embeddings.create({
+      model: 'text-embedding-3-small',
+      input: message,
+    });
+    
+    // Search in ChromaDB
+    const collectionName = process.env.CHROMA_COLLECTION_NAME || 'db_default';
+    let chromaCollection;
+    
+    try {
+      chromaCollection = await chromaClient.getCollection({
+        name: collectionName,
+      });
+    } catch (error) {
+      // If collection doesn't exist, return a helpful message
+      return NextResponse.json({
+        message: 'Vector database not initialized. Please use AdminSetup to process embeddings first.',
+        response: 'Vector database not initialized. Please use AdminSetup to process embeddings first.',
+      });
+    }
+    
+    const results = await chromaCollection.query({
+      queryEmbeddings: [queryEmbedding.data[0].embedding],
+      nResults: 5,
+    });
+    
+    // Extract context
+    const contexts = results.documents[0] || [];
+    const contextText = contexts.length > 0 
+      ? contexts.join('\n\n') 
+      : 'No relevant context found.';
+    
+    // Generate response with OpenAI
+    const completion = await openai.chat.completions.create({
+      model: process.env.OPENAI_MODEL || 'gpt-3.5-turbo',
+      messages: [
+        {
+          role: 'system',
+          content: 'You are a helpful assistant that answers questions based on the provided context. If the context does not contain relevant information, say so politely.',
+        },
+        {
+          role: 'user',
+          content: `Context:\n${contextText}\n\nQuestion: ${message}\n\nAnswer:`,
+        },
+      ],
+      temperature: 0.7,
+      max_tokens: 500,
+    });
+    
+    const answer = completion.choices[0].message.content;
+    
+    return NextResponse.json({
+      message: answer,
+      response: answer,
+    });
+  } catch (error: any) {
+    console.error('Chat error:', error);
+    return NextResponse.json(
+      { 
+        message: error.message || 'Failed to process message',
+        response: error.message || 'Failed to process message',
+      },
+      { status: 500 }
+    );
+  }
+}

package/api/database/collections.ts

@@ -0,0 +1,80 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { MongoClient } from 'mongodb';
+import { Client } from 'pg';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { databaseType, connection } = await request.json();
+    
+    if (!databaseType || !connection) {
+      return NextResponse.json(
+        { collections: [], tables: [] },
+        { status: 400 }
+      );
+    }
+    
+    if (databaseType === 'mongodb') {
+      try {
+        const uri = connection.connectionString || 
+          `mongodb://${connection.username ? `${connection.username}:${connection.password}@` : ''}${connection.host}:${connection.port || 27017}/${connection.database}`;
+        
+        const client = new MongoClient(uri);
+        await client.connect();
+        const db = client.db(connection.database);
+        const collections = await db.listCollections().toArray();
+        await client.close();
+        
+        return NextResponse.json({
+          collections: collections.map(c => c.name),
+          tables: collections.map(c => c.name),
+        });
+      } catch (error: any) {
+        return NextResponse.json(
+          { collections: [], tables: [], error: error.message },
+          { status: 500 }
+        );
+      }
+    } else if (databaseType === 'postgresql') {
+      try {
+        const client = new Client({
+          host: connection.host,
+          port: connection.port || 5432,
+          database: connection.database,
+          user: connection.username,
+          password: connection.password,
+        });
+        
+        await client.connect();
+        const result = await client.query(`
+          SELECT table_name 
+          FROM information_schema.tables 
+          WHERE table_schema = 'public'
+        `);
+        await client.end();
+        
+        const tables = result.rows.map(row => row.table_name);
+        
+        return NextResponse.json({
+          collections: tables,
+          tables: tables,
+        });
+      } catch (error: any) {
+        return NextResponse.json(
+          { collections: [], tables: [], error: error.message },
+          { status: 500 }
+        );
+      }
+    } else {
+      return NextResponse.json(
+        { collections: [], tables: [] },
+        { status: 400 }
+      );
+    }
+  } catch (error: any) {
+    console.error('Fetch collections error:', error);
+    return NextResponse.json(
+      { collections: [], tables: [], error: error.message },
+      { status: 500 }
+    );
+  }
+}

package/api/database/columns.ts

@@ -0,0 +1,80 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { MongoClient } from 'mongodb';
+import { Client } from 'pg';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { databaseType, connection, collection } = await request.json();
+    
+    if (!databaseType || !connection || !collection) {
+      return NextResponse.json(
+        { columns: [] },
+        { status: 400 }
+      );
+    }
+    
+    if (databaseType === 'mongodb') {
+      try {
+        const uri = connection.connectionString || 
+          `mongodb://${connection.username ? `${connection.username}:${connection.password}@` : ''}${connection.host}:${connection.port || 27017}/${connection.database}`;
+        
+        const client = new MongoClient(uri);
+        await client.connect();
+        const db = client.db(connection.database);
+        const mongoCollection = db.collection(collection);
+        
+        // Get a sample document to extract keys
+        const sampleDoc = await mongoCollection.findOne({});
+        await client.close();
+        
+        const columns = sampleDoc ? Object.keys(sampleDoc).filter(key => key !== '_id') : [];
+        
+        return NextResponse.json({ columns });
+      } catch (error: any) {
+        return NextResponse.json(
+          { columns: [], error: error.message },
+          { status: 500 }
+        );
+      }
+    } else if (databaseType === 'postgresql') {
+      try {
+        const client = new Client({
+          host: connection.host,
+          port: connection.port || 5432,
+          database: connection.database,
+          user: connection.username,
+          password: connection.password,
+        });
+        
+        await client.connect();
+        const result = await client.query(`
+          SELECT column_name 
+          FROM information_schema.columns 
+          WHERE table_schema = 'public' 
+          AND table_name = $1
+        `, [collection]);
+        await client.end();
+        
+        const columns = result.rows.map(row => row.column_name);
+        
+        return NextResponse.json({ columns });
+      } catch (error: any) {
+        return NextResponse.json(
+          { columns: [], error: error.message },
+          { status: 500 }
+        );
+      }
+    } else {
+      return NextResponse.json(
+        { columns: [] },
+        { status: 400 }
+      );
+    }
+  } catch (error: any) {
+    console.error('Fetch columns error:', error);
+    return NextResponse.json(
+      { columns: [], error: error.message },
+      { status: 500 }
+    );
+  }
+}

package/api/database/process-embeddings.ts

@@ -0,0 +1,154 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { MongoClient } from 'mongodb';
+import { Client } from 'pg';
+import { ChromaClient } from 'chromadb';
+import OpenAI from 'openai';
+
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+});
+
+const chromaClient = new ChromaClient({
+  path: process.env.CHROMADB_URL || 'http://localhost:8000',
+});
+
+export async function POST(request: NextRequest) {
+  try {
+    const { connection, collections, columnSelection } = await request.json();
+    
+    if (!process.env.OPENAI_API_KEY) {
+      return NextResponse.json(
+        { success: false, message: 'OPENAI_API_KEY is not set in environment variables' },
+        { status: 500 }
+      );
+    }
+    
+    if (!connection || !collections || !Array.isArray(collections) || collections.length === 0) {
+      return NextResponse.json(
+        { success: false, message: 'Connection and collections are required' },
+        { status: 400 }
+      );
+    }
+    
+    const databaseType = connection.type || 'mongodb';
+    const dbName = connection.database;
+    
+    // Initialize database connection
+    let db: any;
+    let client: any;
+    
+    if (databaseType === 'mongodb') {
+      const uri = connection.connectionString || 
+        `mongodb://${connection.username ? `${connection.username}:${connection.password}@` : ''}${connection.host}:${connection.port || 27017}/${dbName}`;
+      client = new MongoClient(uri);
+      await client.connect();
+      db = client.db(dbName);
+    } else if (databaseType === 'postgresql' || databaseType === 'postgres') {
+      client = new Client({
+        host: connection.host,
+        port: connection.port || 5432,
+        database: dbName,
+        user: connection.username,
+        password: connection.password,
+      });
+      await client.connect();
+    } else {
+      return NextResponse.json(
+        { success: false, message: 'Unsupported database type' },
+        { status: 400 }
+      );
+    }
+    
+    // Get or create ChromaDB collection
+    const collectionName = process.env.CHROMA_COLLECTION_NAME || `db_${dbName}`;
+    let chromaCollection;
+    try {
+      chromaCollection = await chromaClient.getOrCreateCollection({
+        name: collectionName,
+      });
+    } catch (error) {
+      chromaCollection = await chromaClient.createCollection({
+        name: collectionName,
+      });
+    }
+    
+    let totalProcessed = 0;
+    
+    // Process each collection
+    for (const collConfig of collections) {
+      const { collection: collName, columns } = collConfig;
+      
+      if (!columns || columns.length === 0) continue;
+      
+      let documents: any[] = [];
+      
+      if (databaseType === 'mongodb') {
+        const mongoCollection = db.collection(collName);
+        documents = await mongoCollection.find({}).toArray();
+      } else if (databaseType === 'postgresql' || databaseType === 'postgres') {
+        const query = `SELECT ${columns.join(', ')} FROM ${collName}`;
+        const result = await client.query(query);
+        documents = result.rows;
+      }
+      
+      for (const doc of documents) {
+        const text = columns
+          .map((col: string) => {
+            const value = doc[col];
+            return value !== null && value !== undefined ? `${col}: ${value}` : '';
+          })
+          .filter(Boolean)
+          .join(' ');
+        
+        if (!text.trim()) continue;
+        
+        try {
+          // Generate embedding
+          const embeddingResponse = await openai.embeddings.create({
+            model: 'text-embedding-3-small',
+            input: text,
+          });
+          
+          const embedding = embeddingResponse.data[0].embedding;
+          const docId = `${collName}_${doc._id || doc.id || Date.now()}_${totalProcessed}`;
+          
+          // Store in ChromaDB
+          await chromaCollection.add({
+            ids: [docId],
+            embeddings: [embedding],
+            documents: [text],
+            metadatas: [{
+              collection: collName,
+              documentId: (doc._id || doc.id || totalProcessed).toString(),
+              columns: columns.join(','),
+            }],
+          });
+          
+          totalProcessed++;
+        } catch (error: any) {
+          console.error(`Error processing document in ${collName}:`, error);
+          // Continue with next document
+        }
+      }
+    }
+    
+    // Close database connection
+    if (databaseType === 'mongodb') {
+      await client.close();
+    } else if (databaseType === 'postgresql' || databaseType === 'postgres') {
+      await client.end();
+    }
+    
+    return NextResponse.json({
+      success: true,
+      message: `Successfully processed ${totalProcessed} documents`,
+      totalProcessed,
+    });
+  } catch (error: any) {
+    console.error('Process embeddings error:', error);
+    return NextResponse.json(
+      { success: false, message: error.message || 'Failed to process embeddings' },
+      { status: 500 }
+    );
+  }
+}

package/api/database/test.ts

@@ -0,0 +1,67 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { MongoClient } from 'mongodb';
+import { Client } from 'pg';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { databaseType, connection } = await request.json();
+    
+    if (!databaseType || !connection) {
+      return NextResponse.json(
+        { success: false, message: 'Database type and connection details are required' },
+        { status: 400 }
+      );
+    }
+    
+    if (databaseType === 'mongodb') {
+      try {
+        const uri = connection.connectionString || 
+          `mongodb://${connection.username ? `${connection.username}:${connection.password}@` : ''}${connection.host}:${connection.port || 27017}/${connection.database}`;
+        
+        const client = new MongoClient(uri);
+        await client.connect();
+        await client.db().admin().ping();
+        await client.close();
+        
+        return NextResponse.json({ success: true, message: 'Connection successful' });
+      } catch (error: any) {
+        return NextResponse.json(
+          { success: false, message: error.message || 'MongoDB connection failed' },
+          { status: 500 }
+        );
+      }
+    } else if (databaseType === 'postgresql') {
+      try {
+        const client = new Client({
+          host: connection.host,
+          port: connection.port || 5432,
+          database: connection.database,
+          user: connection.username,
+          password: connection.password,
+        });
+        
+        await client.connect();
+        await client.query('SELECT 1');
+        await client.end();
+        
+        return NextResponse.json({ success: true, message: 'Connection successful' });
+      } catch (error: any) {
+        return NextResponse.json(
+          { success: false, message: error.message || 'PostgreSQL connection failed' },
+          { status: 500 }
+        );
+      }
+    } else {
+      return NextResponse.json(
+        { success: false, message: 'Unsupported database type' },
+        { status: 400 }
+      );
+    }
+  } catch (error: any) {
+    console.error('Test connection error:', error);
+    return NextResponse.json(
+      { success: false, message: error.message || 'Connection test failed' },
+      { status: 500 }
+    );
+  }
+}