create-rag-app 0.1.0

package/README.md

@@ -0,0 +1,49 @@
+# Create RAG App
+
+Scaffold a production-ready RAG (Retrieval Augmented Generation) application in seconds.
+
+## Features
+
+- 🚀 **Next.js & React**: Modern frontend with Tailwind setup.
+- 🦜 **LangChain**: Best-in-class RAG pipeline.
+- 🗄️ **ChromaDB**: Built-in local vector database.
+- 🤖 **Multi-LLM Support**: Switch between OpenAI, Groq, and Ollama.
+- 📄 **Document Ingestion**: Simple script to index PDFs and Text files.
+
+## Usage
+
+```bash
+# Run directly with npx
+npx create-rag-app my-ai-project
+
+# Or install globally
+npm install -g create-rag-app
+create-rag-app my-ai-project
+```
+
+## Structure Result
+
+The created app will have:
+
+- `src/app`: User Interface (Chat)
+- `src/lib`: RAG Utilities
+- `scripts/ingest.js`: Document processor
+- `documents/`: Folder to drop your knowledge base
+
+## Development
+
+```bash
+# Clone the repo
+git clone https://github.com/your-username/create-rag-app.git
+
+# Install dependencies
+npm install
+
+# Test locally
+npm link
+create-rag-app test-project
+```
+
+## License
+
+MIT

package/bin/cli.js

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+import { main } from "../src/index.js";
+
+main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+});

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "create-rag-app",
+  "version": "0.1.0",
+  "description": "Scaffold a new RAG application",
+  "type": "module",
+  "bin": {
+    "create-rag-app": "./bin/cli.js"
+  },
+  "main": "src/index.js",
+  "files": [
+    "bin",
+    "src",
+    "templates"
+  ],
+  "scripts": {
+    "start": "node bin/cli.js"
+  },
+  "keywords": [
+    "rag",
+    "cli",
+    "scaffold",
+    "create-rag-app",
+    "langchain",
+    "chroma",
+    "ai"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^5.6.2",
+    "commander": "^14.0.3",
+    "fs-extra": "^11.3.3",
+    "inquirer": "^13.2.2",
+    "ora": "^9.3.0"
+  }
+}

package/src/index.js

@@ -0,0 +1,65 @@
+import path from "path";
+import fs from "fs-extra";
+import chalk from "chalk";
+import { Command } from "commander";
+import { getOptions } from "./prompts.js";
+import { checkDir, copyTemplate, installDependencies } from "./utils.js";
+
+const packageJson = JSON.parse(
+    await fs.readFile(new URL("../package.json", import.meta.url))
+);
+
+export async function main() {
+    console.log(chalk.bold.cyan("\n🚀 Welcome to Create RAG App!\n"));
+
+    let projectName;
+
+    const program = new Command(packageJson.name)
+        .version(packageJson.version)
+        .arguments('[project-directory]')
+        .usage(`${chalk.green('[project-directory]')} [options]`)
+        .action((name) => {
+            projectName = name;
+        })
+        .parse(process.argv);
+
+    const options = await getOptions(projectName);
+    const projectPath = path.resolve(process.cwd(), options.projectName);
+
+    console.log(`\nCreating a new RAG app in: ${chalk.green(projectPath)}\n`);
+
+    // Ensure directory doesn't exist
+    checkDir(projectPath);
+
+    // Copy template
+    // We need to map the template option to a folder name
+    // The 'value' in prompts.js choices is 'nextjs-rag', so ensure that folder exists in templates/
+    const templateName = options.template;
+    await copyTemplate(templateName, projectPath);
+
+    // Configure Environment Variables
+    const envExamplePath = path.join(projectPath, ".env.example");
+    const envPath = path.join(projectPath, ".env");
+
+    if (await fs.pathExists(envExamplePath)) {
+        await fs.copy(envExamplePath, envPath);
+        console.log(chalk.green("✔ Created .env file from example"));
+
+        // Inject selected provider config
+        let envContent = await fs.readFile(envPath, "utf-8");
+        envContent += `\n# Auto-generated config\n`;
+        envContent += `LLM_PROVIDER=${options.provider}\n`;
+        envContent += `VECTOR_DB=${options.vectorDb}\n`;
+        await fs.writeFile(envPath, envContent);
+    }
+
+    // Install Dependencies (user requested automatic installation)
+    await installDependencies(projectPath);
+
+    // Final Success Message
+    console.log(chalk.bold.green("\n🎉 Success! Your RAG app is ready."));
+    console.log(chalk.yellow("\nNext steps:"));
+    console.log(chalk.cyan(`  cd ${options.projectName}`));
+    console.log(chalk.cyan(`  npm run dev`));
+    console.log("");
+}

package/src/prompts.js

@@ -0,0 +1,66 @@
+
+import inquirer from "inquirer";
+
+export async function getOptions(initialProjectName) {
+    let questions = [
+        {
+            type: "input",
+            name: "projectName",
+            message: "What is your project named?",
+            default: "my-rag-app",
+            validate: (input) => {
+                if (/^([a-z0-9\-\_\.]+)$/.test(input)) return true;
+                return "Project name may only include letters, numbers, dashes, and underscores.";
+            },
+        },
+        {
+            type: "list",
+            name: "template",
+            message: "Which template would you like to use?",
+            choices: [
+                { name: "Next.js + LangChain + ChromaDB (Recommended)", value: "nextjs-rag" },
+                { name: "Express API + PDF Processor (Backend Only)", value: "express-rag" }, // Future scope
+            ],
+            default: "nextjs-rag",
+        },
+        {
+            type: "list",
+            name: "provider",
+            message: "Which LLM provider do you want configured?",
+            choices: [
+                { name: "OpenAI (GPT-4o, GPT-3.5)", value: "openai" },
+                { name: "Groq (Llama 3, Mixtral - Fast!)", value: "groq" },
+                { name: "Ollama (Local Models)", value: "ollama" },
+                { name: "Gemini (Google DeepMind)", value: "gemini" },
+            ],
+            default: "openai",
+        },
+        {
+            type: "list",
+            name: "vectorDb",
+            message: "Which Vector Database do you want to use?",
+            choices: [
+                { name: "ChromaDB (Local)", value: "chroma" },
+                { name: "Supabase pgvector (Cloud)", value: "supabase" },
+            ],
+            default: "chroma",
+        },
+    ];
+
+    if (initialProjectName) {
+        if (/^([a-z0-9\-\_\.]+)$/.test(initialProjectName)) {
+            // Valid project name provided via CLI, skip the prompt
+            questions = questions.filter(q => q.name !== "projectName");
+        } else {
+            console.log("⚠ Invalid project name provided via CLI.");
+            initialProjectName = null; // Force prompt
+        }
+    }
+
+    const answers = await inquirer.prompt(questions);
+
+    return {
+        projectName: initialProjectName || answers.projectName,
+        ...answers
+    };
+}

package/src/utils.js

@@ -0,0 +1,62 @@
+
+import fs from "fs-extra";
+import path from "path";
+import chalk from "chalk";
+import { exec } from "child_process";
+import util from "util";
+import ora from "ora";
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const execAsync = util.promisify(exec);
+
+export function checkDir(targetPath) {
+    if (fs.existsSync(targetPath)) {
+        console.error(chalk.red(`\n❌ Error: Directory ${path.basename(targetPath)} already exists.`));
+        process.exit(1);
+    }
+}
+
+export async function copyTemplate(templateName, targetPath) {
+    const spinner = ora("Copying project files...").start();
+
+    // Assuming templates live in ../templates relative to this file
+    const templateDir = path.resolve(__dirname, "../templates", templateName);
+
+    if (!fs.existsSync(templateDir)) {
+        spinner.fail(chalk.red(`Template ${templateName} not found at ${templateDir}`));
+        process.exit(1);
+    }
+
+    try {
+        await fs.copy(templateDir, targetPath);
+        spinner.succeed(chalk.green("Project files created successfully."));
+    } catch (err) {
+        spinner.fail(chalk.red("Failed to copy files."));
+        console.error(err);
+        process.exit(1);
+    }
+}
+
+export async function installDependencies(targetPath) {
+    const spinner = ora("Installing dependencies... This might take a moment.").start();
+
+    try {
+        // Run npm install in the new directory
+        await execAsync("npm install", { cwd: targetPath });
+        spinner.succeed(chalk.green("Dependencies installed via npm."));
+    } catch (err) {
+        // Fallback for peer dependency conflicts common in AI libraries
+        try {
+            spinner.text = "Retrying with --legacy-peer-deps...";
+            await execAsync("npm install --legacy-peer-deps", { cwd: targetPath });
+            spinner.succeed(chalk.green("Dependencies installed with legacy peer deps."));
+        } catch (retryErr) {
+            spinner.fail(chalk.red("Failed to install dependencies."));
+            console.log(chalk.yellow("You can try installing manually:"));
+            console.log(chalk.cyan(`  cd ${path.basename(targetPath)}`));
+            console.log(chalk.cyan("  npm install --legacy-peer-deps"));
+        }
+    }
+}

package/templates/nextjs-rag/.env.example

@@ -0,0 +1,13 @@
+
+# AI Provider Keys
+OPENAI_API_KEY=sk-your-key-here
+GROQ_API_KEY=your-groq-key
+GOOGLE_API_KEY=your-gemini-key-here
+
+# Vector DB
+# Default to local persistent client
+CHROMA_URL=http://localhost:8000
+COLLECTION_NAME=rag-docs
+
+# App Config
+NEXT_PUBLIC_APP_NAME="My RAG App"

package/templates/nextjs-rag/documents/readme.txt

@@ -0,0 +1,2 @@
+Put your PDF or .txt files here to be ingested by the RAG pipeline.
+Then run `npm run ingest` to build the vector index.

package/templates/nextjs-rag/jsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    // Useful for Next.js strict mode and modern JS features
+    "target": "ESNext",
+    "module": "ESNext",
+    "jsx": "preserve",
+    "strict": false
+  },
+  "include": ["next-env.d.ts", "**/*.js", "**/*.jsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/nextjs-rag/next.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    reactStrictMode: true,
+    serverExternalPackages: ["chromadb"],
+};
+
+export default nextConfig;

package/templates/nextjs-rag/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "my-rag-app",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "ingest": "node scripts/ingest.js"
+  },
+  "dependencies": {
+    "next": "15.0.3",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "langchain": "^0.3.5",
+    "@langchain/openai": "^0.3.11",
+    "@langchain/ollama": "^0.1.2",
+    "@langchain/google-genai": "^0.1.3",
+    "@langchain/community": "^0.3.11",
+    "@langchain/core": "^0.3.15",
+    "@langchain/textsplitters": "^0.1.0",
+    "chromadb": "^1.9.4",
+    "pdf-parse": "1.1.1",
+    "openai": "^4.71.1",
+    "dotenv": "^16.4.5"
+  },
+  "devDependencies": {
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
+    "autoprefixer": "^10.4.20"
+  }
+}

package/templates/nextjs-rag/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

package/templates/nextjs-rag/scripts/ingest.js

@@ -0,0 +1,25 @@
+import "dotenv/config";
+import { ingestDocuments } from "../src/lib/ingest.js";
+
+/**
+ * Script entry point for manual document ingestion.
+ * Run this via `npm run ingest` to index all files in the ./documents folder.
+ * 
+ * Usage:
+ *  npm run ingest
+ * 
+ * This script ensures that all documents in the local directory are 
+ * processed, split, and embedded into the ChromaDB vector store.
+ */
+const run = async () => {
+    try {
+        console.log("🚀 Starting document ingestion process...");
+        await ingestDocuments("./documents");
+    } catch (error) {
+        console.error("❌ Document ingestion failed:");
+        console.error(error);
+        process.exit(1);
+    }
+};
+
+run();

package/templates/nextjs-rag/src/app/api/chat/route.js

@@ -0,0 +1,52 @@
+import { getLLM, getEmbeddings } from "@/lib/llm";
+import { Chroma } from "@langchain/community/vectorstores/chroma";
+import { PromptTemplate } from "@langchain/core/prompts";
+
+export async function POST(req) {
+    try {
+        const body = await req.json();
+        const message = body?.message;
+
+        if (!message || typeof message !== "string") {
+            return Response.json(
+                { error: "Invalid request. 'message' must be a string." },
+                { status: 400 }
+            );
+        }
+
+        const vectorStore = await Chroma.fromExistingCollection(getEmbeddings(), {
+            collectionName: process.env.COLLECTION_NAME || "rag-docs",
+            url: process.env.CHROMA_URL || "http://localhost:8000"
+        });
+
+        const retriever = vectorStore.asRetriever();
+        const llm = getLLM();
+
+        // 🔥 manually retrieve documents
+        const docs = await retriever.invoke(message);
+
+        const context = docs.map((doc) => doc.pageContent).join("\n\n");
+
+        const prompt = PromptTemplate.fromTemplate(`
+Answer the question based only on the following context:
+
+{context}
+
+Question: {question}
+`);
+
+        const formattedPrompt = await prompt.format({
+            context,
+            question: message
+        });
+
+        const result = await llm.invoke(formattedPrompt);
+
+        return Response.json({
+            response: result.content
+        });
+    } catch (error) {
+        console.error(error);
+        return Response.json({ error: error.message }, { status: 500 });
+    }
+}

package/templates/nextjs-rag/src/app/api/ingest/route.js

@@ -0,0 +1,51 @@
+import { NextResponse } from "next/server";
+import { ingestDocuments } from "@/lib/ingest";
+import fs from "fs/promises";
+import path from "path";
+
+/**
+ * Handle document uploads and immediate ingestion into ChromaDB.
+ * This route accepts a file upload, saves it locally, and triggers the vector store ingestion.
+ * 
+ * @param {Request} req 
+ * @returns {NextResponse}
+ */
+export async function POST(req) {
+    try {
+        const formData = await req.formData();
+        const file = formData.get("file");
+
+        if (!file) {
+            return NextResponse.json({ error: "No file uploaded" }, { status: 400 });
+        }
+
+        // Validate file type (basic)
+        const allowedExtensions = [".pdf", ".txt"];
+        const ext = path.extname(file.name).toLowerCase();
+        if (!allowedExtensions.includes(ext)) {
+            return NextResponse.json({ error: "Unsupported file type. Only PDF and TXT are allowed." }, { status: 400 });
+        }
+
+        const buffer = Buffer.from(await file.arrayBuffer());
+        const uploadDir = path.resolve(process.cwd(), "documents");
+
+        // Ensure the upload directory exists
+        try {
+            await fs.mkdir(uploadDir, { recursive: true });
+        } catch (e) {
+            // Directory likely already exists
+        }
+
+        const filePath = path.join(uploadDir, file.name);
+        await fs.writeFile(filePath, buffer);
+
+        // Run ingestion for this specific file
+        console.log(`Starting ingestion for: ${file.name}`);
+        await ingestDocuments(`documents/${file.name}`, true);
+
+        return NextResponse.json({ success: true, message: "File uploaded and ingested successfully." });
+    } catch (error) {
+        console.error("Upload/Ingest Error:", error);
+        return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+}

package/templates/nextjs-rag/src/app/globals.css

@@ -0,0 +1,44 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-zinc-950 text-zinc-100 antialiased;
+  }
+}
+
+@layer utilities {
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    @apply bg-zinc-800 rounded-full;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    @apply bg-zinc-700;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out forwards;
+}

package/templates/nextjs-rag/src/app/layout.js

@@ -0,0 +1,17 @@
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+    title: "Create RAG App",
+    description: "Generated by create-rag-app",
+};
+
+export default function RootLayout({ children }) {
+    return (
+        <html lang="en">
+            <body className={inter.className}>{children}</body>
+        </html>
+    );
+}

package/templates/nextjs-rag/src/app/page.js

@@ -0,0 +1,352 @@
+"use client";
+import React, { useState, useRef, useEffect } from "react";
+
+/**
+ * Main Chat Interface Component.
+ * Features:
+ * - Real-time chat with RAG backend
+ * - Document upload and ingestion
+ * - Modern, responsive UI with Tailwind CSS
+ */
+export default function Home() {
+    const [messages, setMessages] = useState([
+        {
+            role: "bot",
+            content: "Hello! I'm your AI assistant. How can I help you with your documents today?",
+        },
+    ]);
+    const [query, setQuery] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [uploading, setUploading] = useState(false);
+    const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
+
+    const messagesEndRef = useRef(null);
+    const fileInputRef = useRef(null);
+
+    /**
+     * Auto-scroll to the bottom of the chat when new messages arrive.
+     */
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    };
+
+    useEffect(() => {
+        scrollToBottom();
+    }, [messages]);
+
+    /**
+     * Handle sending a query to the chat API.
+     */
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!query.trim()) return;
+
+        const currentQuery = query;
+        setQuery("");
+        setLoading(true);
+
+        // Optimistically add user message
+        setMessages((prev) => [
+            ...prev,
+            { role: "user", content: currentQuery },
+        ]);
+
+        try {
+            const res = await fetch("/api/chat", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ message: currentQuery }),
+            });
+
+            const data = await res.json();
+            setMessages((prev) => [
+                ...prev,
+                { role: "bot", content: data.response },
+            ]);
+        } catch (err) {
+            console.error("Chat Error:", err);
+            setMessages((prev) => [
+                ...prev,
+                { role: "bot", content: "Sorry, I encountered an error processing your request." },
+            ]);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    /**
+     * Handle file selection and upload to the ingestion API.
+     */
+    const handleFileUpload = async (e) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        // Validate file size (e.g., max 5MB)
+        if (file.size > 5 * 1024 * 1024) {
+            alert("File size exceeds 5MB limit.");
+            return;
+        }
+
+        setUploading(true);
+        const formData = new FormData();
+        formData.append("file", file);
+
+        try {
+            const res = await fetch("/api/ingest", {
+                method: "POST",
+                body: formData,
+            });
+            const data = await res.json();
+
+            if (data.success) {
+                // Success feedback
+                setIsUploadModalOpen(false);
+                setMessages((prev) => [
+                    ...prev,
+                    { role: "bot", content: `✅ I have processed the document: **${file.name}**. You can now ask questions about it.` },
+                ]);
+            } else {
+                alert("Error uploading file: " + (data.error || "Unknown error"));
+            }
+        } catch (err) {
+            console.error("Upload Error:", err);
+            alert("Failed to upload file. Please try again.");
+        } finally {
+            setUploading(false);
+            // Reset input so same file can be selected again if needed
+            if (fileInputRef.current) fileInputRef.current.value = "";
+        }
+    };
+
+    return (
+        <div className="flex flex-col h-screen bg-zinc-950 text-zinc-100 font-sans selection:bg-indigo-500/30">
+            {/* Header */}
+            <header className="fixed top-0 inset-x-0 z-50 bg-zinc-950/80 backdrop-blur-md border-b border-zinc-900 h-16 flex items-center justify-between px-4">
+                <div className="flex items-center gap-2">
+                    <div className="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center shadow-lg shadow-indigo-500/20">
+                        <svg
+                            className="w-5 h-5 text-white"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M13 10V3L4 14h7v7l9-11h-7z"
+                            />
+                        </svg>
+                    </div>
+                    <h1 className="text-xl font-bold bg-gradient-to-r from-white to-zinc-400 bg-clip-text text-transparent hidden sm:block">
+                        RAG Assistant
+                    </h1>
+                </div>
+
+                <button
+                    onClick={() => setIsUploadModalOpen(true)}
+                    className="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-zinc-300 bg-zinc-900 border border-zinc-800 rounded-lg hover:bg-zinc-800 hover:text-white transition-all focus:ring-2 focus:ring-indigo-500/50 outline-none"
+                    aria-label="Upload Document"
+                >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+                    </svg>
+                    Upload Doc
+                </button>
+            </header>
+
+            {/* Main Chat Area */}
+            <main className="flex-1 overflow-y-auto pt-24 pb-32 px-4 scroll-smooth scrollbar-thin scrollbar-thumb-zinc-800 scrollbar-track-transparent">
+                <div className="max-w-3xl mx-auto space-y-8">
+                    {messages.map((msg, idx) => (
+                        <div
+                            key={idx}
+                            className={`flex items-start gap-4 animate-fade-in ${msg.role === "user" ? "flex-row-reverse" : ""
+                                }`}
+                        >
+                            {/* Avatar */}
+                            <div
+                                className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${msg.role === "user"
+                                        ? "bg-indigo-600 text-white shadow-lg shadow-indigo-500/20"
+                                        : "bg-zinc-800 text-zinc-400 border border-zinc-700"
+                                    }`}
+                            >
+                                {msg.role === "user" ? (
+                                    <svg
+                                        className="w-5 h-5"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        viewBox="0 0 24 24"
+                                    >
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth={2}
+                                            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                                        />
+                                    </svg>
+                                ) : (
+                                    <svg
+                                        className="w-5 h-5"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        viewBox="0 0 24 24"
+                                    >
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth={2}
+                                            d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                                        />
+                                    </svg>
+                                )}
+                            </div>
+
+                            {/* Message Bubble */}
+                            <div
+                                className={`group relative max-w-[85%] px-5 py-3 rounded-2xl shadow-sm leading-relaxed text-sm sm:text-base ${msg.role === "user"
+                                        ? "bg-indigo-600 text-white rounded-tr-none"
+                                        : "bg-zinc-900 border border-zinc-800 text-zinc-200 rounded-tl-none"
+                                    }`}
+                            >
+                                <div className="bg-transparent whitespace-pre-wrap break-words">
+                                    {msg.content}
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+
+                    {/* Loading Indicator */}
+                    {loading && (
+                        <div className="flex items-start gap-4 animate-fade-in">
+                            <div className="w-8 h-8 rounded-full bg-zinc-800 text-zinc-400 flex items-center justify-center flex-shrink-0 border border-zinc-700">
+                                <svg
+                                    className="w-5 h-5 animate-spin"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <circle
+                                        className="opacity-25"
+                                        cx="12"
+                                        cy="12"
+                                        r="10"
+                                        stroke="currentColor"
+                                        strokeWidth="4"
+                                    ></circle>
+                                    <path
+                                        className="opacity-75"
+                                        fill="currentColor"
+                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                    ></path>
+                                </svg>
+                            </div>
+                            <div className="bg-zinc-900 border border-zinc-800 px-5 py-3 rounded-2xl rounded-tl-none text-zinc-400 text-sm">
+                                Reasoning...
+                            </div>
+                        </div>
+                    )}
+                    <div ref={messagesEndRef} />
+                </div>
+            </main>
+
+            {/* Input Area */}
+            <div className="fixed bottom-0 inset-x-0 bg-gradient-to-t from-zinc-950 pt-20 pb-8 z-40 pointer-events-none">
+                <div className="max-w-3xl mx-auto px-4 pointer-events-auto">
+                    <form
+                        onSubmit={handleSubmit}
+                        className="relative flex items-center gap-2 bg-zinc-900/90 backdrop-blur-xl border border-zinc-800 p-2 rounded-2xl shadow-2xl shadow-black/50 transition-all focus-within:ring-2 focus-within:ring-indigo-500/20 focus-within:border-indigo-500/50"
+                        autoComplete="off"
+                    >
+                        <input
+                            type="text"
+                            name="message"
+                            value={query}
+                            onChange={(e) => setQuery(e.target.value)}
+                            placeholder="Ask anything about your documents..."
+                            className="flex-1 bg-transparent text-zinc-100 placeholder-zinc-500 px-4 py-3 outline-none min-w-0"
+                        />
+                        <button
+                            type="submit"
+                            disabled={loading || !query.trim()}
+                            className="p-3 mr-1 rounded-xl bg-indigo-600 text-white hover:bg-indigo-500 disabled:opacity-50 disabled:hover:bg-indigo-600 transition-all duration-200 shadow-lg shadow-indigo-900/20 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
+                            aria-label="Send message"
+                        >
+                            <svg
+                                className="w-5 h-5"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M5 12h14M12 5l7 7-7 7"
+                                />
+                            </svg>
+                        </button>
+                    </form>
+                    <div className="mt-3 text-center">
+                        <p className="text-xs text-zinc-600">
+                            AI can make mistakes. Please verify important information.
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            {/* Upload Modal Overlay */}
+            {isUploadModalOpen && (
+                <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in">
+                    <div className="bg-zinc-900 border border-zinc-800 rounded-2xl max-w-md w-full p-6 shadow-2xl relative">
+                        <div className="flex justify-between items-center mb-6">
+                            <h2 className="text-xl font-bold text-white">Upload Document</h2>
+                            <button
+                                onClick={() => setIsUploadModalOpen(false)}
+                                className="text-zinc-500 hover:text-white transition-colors"
+                                aria-label="Close modal"
+                            >
+                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                            </button>
+                        </div>
+
+                        <div className="space-y-4">
+                            {/* Drag & Drop Zone */}
+                            <div
+                                className="border-2 border-dashed border-zinc-800 rounded-xl p-8 hover:bg-zinc-800/50 hover:border-zinc-600 transition-all text-center cursor-pointer group"
+                                onClick={() => fileInputRef.current?.click()}>
+                                <input
+                                    type="file"
+                                    ref={fileInputRef}
+                                    className="hidden"
+                                    onChange={handleFileUpload}
+                                    accept=".txt,.pdf"
+                                    disabled={uploading}
+                                />
+                                <div className="w-12 h-12 rounded-full bg-indigo-500/20 text-indigo-400 mx-auto flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
+                                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+                                    </svg>
+                                </div>
+                                <p className="text-sm text-zinc-400 font-medium group-hover:text-zinc-200 transition-colors">Click to upload or drag and drop</p>
+                                <p className="text-xs text-zinc-600 mt-1">Supported formats: PDF, TXT (Max 5MB)</p>
+                            </div>
+
+                            {uploading && (
+                                <div className="flex items-center justify-center gap-3 text-sm text-zinc-400 animate-pulse">
+                                    <span className="relative flex h-3 w-3">
+                                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
+                                        <span className="relative inline-flex rounded-full h-3 w-3 bg-indigo-500"></span>
+                                    </span>
+                                    Processing document... This may take a moment.
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

package/templates/nextjs-rag/src/lib/ingest.js

@@ -0,0 +1,123 @@
+import { DirectoryLoader } from "langchain/document_loaders/fs/directory";
+import { TextLoader } from "langchain/document_loaders/fs/text";
+import { PDFLoader } from "@langchain/community/document_loaders/fs/pdf";
+import { RecursiveCharacterTextSplitter } from "@langchain/textsplitters";
+import { Chroma } from "@langchain/community/vectorstores/chroma";
+import { GoogleGenerativeAIEmbeddings } from "@langchain/google-genai";
+import { OpenAIEmbeddings } from "@langchain/openai";
+import path from "path";
+
+/**
+ * Sanitizes metadata values to ensure they are compatible with vector database storage (e.g., ChromaDB).
+ * Vector stores often only support string, number, or boolean values for metadata.
+ * 
+ * @param {Object} metadata - The original metadata object.
+ * @returns {Object} - The clean metadata object.
+ */
+function cleanMetadata(metadata = {}) {
+    const clean = {};
+
+    for (const [key, value] of Object.entries(metadata)) {
+        if (
+            typeof value === "string" ||
+            typeof value === "number" ||
+            typeof value === "boolean" ||
+            value === null
+        ) {
+            clean[key] = value;
+        } else {
+            // Convert complex objects/arrays to strings to prevent DB injection errors
+            clean[key] = JSON.stringify(value);
+        }
+    }
+
+    return clean;
+}
+
+/**
+ * Ingests documents into the vector database.
+ * Supports loading from a directory or a specific single file.
+ * 
+ * @param {string} source - The path to the document directory or single file.
+ * @param {boolean} isSingleFile - Flag to indicate if the source is a single file path.
+ * @returns {Promise<Object>} - Result object indicating success/failure and chunk count.
+ */
+export async function ingestDocuments(source = "./documents", isSingleFile = false) {
+    try {
+        const absoluteSource = path.resolve(process.cwd(), source);
+        let loader;
+
+        // Determine the Loader Strategy
+        if (isSingleFile) {
+            const ext = path.extname(source).toLowerCase();
+            if (ext === ".pdf") {
+                loader = new PDFLoader(absoluteSource);
+            } else if (ext === ".txt") {
+                loader = new TextLoader(absoluteSource);
+            } else {
+                throw new Error(`Unsupported file extension: ${ext}`);
+            }
+            console.log(`📥 Loading document: ${source}...`);
+        } else {
+            // Load entire directory
+            const absoluteDocsDir = path.resolve(process.cwd(), source);
+            loader = new DirectoryLoader(absoluteDocsDir, {
+                ".txt": (filePath) => new TextLoader(filePath),
+                ".pdf": (filePath) => new PDFLoader(filePath)
+            });
+            console.log(`📥 Loading documents from ${source}...`);
+        }
+
+        const docs = await loader.load();
+
+        if (docs.length === 0) {
+            console.log("⚠ No documents found.");
+            return { success: false, message: "No documents found." };
+        }
+
+        // Split text into manageable chunks for the LLM context window
+        const splitter = new RecursiveCharacterTextSplitter({
+            chunkSize: 1000,
+            chunkOverlap: 200
+        });
+
+        console.log("✂ Splitting documents...");
+        const splitDocs = await splitter.splitDocuments(docs);
+
+        // Clean metadata to avoid database errors
+        const cleanDocs = splitDocs.map((doc) => ({
+            ...doc,
+            metadata: cleanMetadata(doc.metadata),
+        }));
+
+        console.log(`✅ Split into ${splitDocs.length} chunks.`);
+        console.log("📌 Generating embeddings and storing in Chroma...");
+
+        // Initialize Embeddings Provider
+        const provider = process.env.LLM_PROVIDER || "openai";
+        let embeddings;
+
+        if (provider === "gemini") {
+            embeddings = new GoogleGenerativeAIEmbeddings({
+                apiKey: process.env.GOOGLE_API_KEY,
+                modelName: "gemini-embedding-001"
+            });
+        } else {
+            embeddings = new OpenAIEmbeddings({
+                apiKey: process.env.OPENAI_API_KEY
+            });
+        }
+
+        // Store vectors in ChromaDB
+        await Chroma.fromDocuments(cleanDocs, embeddings, {
+            collectionName: process.env.COLLECTION_NAME || "rag-docs",
+            url: process.env.CHROMA_URL || "http://localhost:8000"
+        });
+
+        console.log("🎉 ✅ Ingestion Complete!");
+        return { success: true, chunks: splitDocs.length };
+    } catch (error) {
+        console.error("❌ Ingestion Failed:", error);
+        throw error;
+    }
+}

package/templates/nextjs-rag/src/lib/llm.js

@@ -0,0 +1,54 @@
+import { ChatOpenAI, OpenAIEmbeddings } from "@langchain/openai";
+import { ChatOllama, OllamaEmbeddings } from "@langchain/ollama";
+import {
+    GoogleGenerativeAIEmbeddings,
+    ChatGoogleGenerativeAI
+} from "@langchain/google-genai";
+
+export function getEmbeddings() {
+    const provider = process.env.LLM_PROVIDER || "openai";
+
+    if (provider === "ollama") {
+        return new OllamaEmbeddings({
+            baseUrl: "http://localhost:11434",
+            model: "nomic-embed-text"
+        });
+    }
+
+    if (provider === "gemini") {
+        return new GoogleGenerativeAIEmbeddings({
+            apiKey: process.env.GOOGLE_API_KEY,
+            modelName: "gemini-embedding-001"
+        });
+    }
+
+    return new OpenAIEmbeddings({
+        apiKey: process.env.OPENAI_API_KEY,
+        model: "text-embedding-3-small"
+    });
+}
+
+export function getLLM() {
+    const provider = process.env.LLM_PROVIDER || "openai";
+
+    if (provider === "ollama") {
+        return new ChatOllama({
+            baseUrl: "http://localhost:11434",
+            model: "llama3"
+        });
+    }
+
+    if (provider === "gemini") {
+        return new ChatGoogleGenerativeAI({
+            apiKey: process.env.GOOGLE_API_KEY,
+            modelName: "gemini-3-flash-preview",
+            maxOutputTokens: 2048
+        });
+    }
+
+    return new ChatOpenAI({
+        apiKey: process.env.OPENAI_API_KEY,
+        modelName: "gpt-4o-mini",
+        temperature: 0
+    });
+}

package/templates/nextjs-rag/tailwind.config.js

@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+    theme: {
+        extend: {
+            backgroundImage: {
+                "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+                "gradient-conic":
+                    "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+            },
+        },
+    },
+    plugins: [],
+};