@retrivora-ai/rag-engine 1.9.6 → 1.9.7

package/src/app/constants.tsx

@@ -1,217 +1,177 @@
 import React from 'react';
 import {
-  Zap,
-  Database,
-  Layers,
-  Search,
-  Box,
-  Package,
-  Activity,
-  Hexagon,
-  Sparkles,
-  Bot,
-  Brain,
-  Rabbit,
-  Code,
-  Terminal,
-  FileText,
-  Puzzle,
-  MessageSquare,
+    Zap,
+    Database,
+    Layers,
+    Search,
+    Box,
+    Package,
+    Activity,
+    Hexagon,
+    Sparkles,
+    Bot,
+    Brain,
+    Rabbit,
+    Code,
+    Terminal,
+    FileText,
+    Puzzle,
+    MessageSquare,
 } from 'lucide-react';
 import { ArchitectureCardProps, Snippet, PipelineStep, ProviderPill } from './types';
 
 export const LANDING_PAGE_CONTENT = {
-  hero: {
-    badge: 'Dynamic & Universal Retrivora AI',
-    title: 'The Universal Bridge for Generative AI',
-    subtitle: 'Retrivora AI is a vendor-agnostic RAG engine that connects any Document to any LLM and Vector Database in minutes.',
-  },
-  lifecycle: {
-    title: 'The RAG Lifecycle',
-  },
-  guide: {
-    title: 'Interactive Guide',
-    subtitle: 'Universal RAG integration for your Next.js applications in minutes.',
-  }
+    hero: {
+        badge: 'Dynamic & Universal Retrivora AI',
+        title: 'The Universal Bridge for Generative AI',
+        subtitle: 'Retrivora AI is a vendor-agnostic RAG engine that connects any Document to any LLM and Vector Database in minutes.',
+    },
+    lifecycle: {
+        title: 'The RAG Lifecycle',
+    },
+    guide: {
+        title: 'Interactive Guide',
+        subtitle: 'Universal RAG integration for your Next.js applications in minutes.',
+    }
 };
 
 export const VECTOR_DATABASES: ProviderPill[] = [
-  { Icon: Zap, label: 'Pinecone' },
-  { Icon: Database, label: 'PostgreSQL' },
-  { Icon: Layers, label: 'MongoDB' },
-  { Icon: Box, label: 'Qdrant' },
-  { Icon: Search, label: 'Milvus' },
-  { Icon: Package, label: 'ChromaDB' },
-  { Icon: Activity, label: 'Redis' },
-  { Icon: Hexagon, label: 'Weaviate' },
+    { Icon: Zap, label: 'Pinecone' },
+    { Icon: Database, label: 'PostgreSQL' },
+    { Icon: Layers, label: 'MongoDB' },
+    { Icon: Box, label: 'Qdrant' },
+    { Icon: Search, label: 'Milvus' },
+    { Icon: Package, label: 'ChromaDB' },
+    { Icon: Activity, label: 'Redis' },
+    { Icon: Hexagon, label: 'Weaviate' },
 ];
 
 export const AI_MODELS: ProviderPill[] = [
-  { Icon: Rabbit, label: 'Ollama' },
-  { Icon: Sparkles, label: 'OpenAI' },
-  { Icon: Bot, label: 'Anthropic' },
-  { Icon: Brain, label: 'Gemini' },
-  { Icon: Code, label: 'Copilot' },
-  { Icon: Terminal, label: 'LiteLLM' },
+    { Icon: Rabbit, label: 'Ollama' },
+    { Icon: Sparkles, label: 'OpenAI' },
+    { Icon: Bot, label: 'Anthropic' },
+    { Icon: Brain, label: 'Gemini' },
+    { Icon: Code, label: 'Copilot' },
+    { Icon: Terminal, label: 'LiteLLM' },
 ];
 
 export const PIPELINE_STEPS: PipelineStep[] = [
-  {
-    step: '01',
-    Icon: FileText,
-    title: 'Ingest',
-    desc: 'Universal support for PDF, DOCX, CSV, and JSON. Documents are parsed, chunked, and embedded.',
-    colors: { from: '#10b981', to: '#14b8a6' },
-  },
-  {
-    step: '02',
-    Icon: Search,
-    title: 'Retrieve',
-    desc: 'Queries are converted to vectors. Semantic search finds context across any configured Vector DB.',
-    colors: { from: '#14b8a6', to: '#06b6d4' },
-  },
-  {
-    step: '03',
-    Icon: Puzzle,
-    title: 'Augment',
-    desc: 'Retrieved context is injected into the LLM prompt with namespaced project isolation.',
-    colors: { from: '#06b6d4', to: '#3b82f6' },
-  },
-  {
-    step: '04',
-    Icon: MessageSquare,
-    title: 'Generate',
-    desc: 'Providers like OpenAI, Anthropic, or Gemini produce grounded, source-cited responses.',
-    colors: { from: '#3b82f6', to: '#6366f1' },
-  },
+    {
+        step: '01',
+        Icon: FileText,
+        title: 'Ingest',
+        desc: 'Universal support for PDF, DOCX, CSV, and JSON. Documents are parsed, chunked, and embedded.',
+        colors: { from: '#10b981', to: '#14b8a6' },
+    },
+    {
+        step: '02',
+        Icon: Search,
+        title: 'Retrieve',
+        desc: 'Queries are converted to vectors. Semantic search finds context across any configured Vector DB.',
+        colors: { from: '#14b8a6', to: '#06b6d4' },
+    },
+    {
+        step: '03',
+        Icon: Puzzle,
+        title: 'Augment',
+        desc: 'Retrieved context is injected into the LLM prompt with namespaced project isolation.',
+        colors: { from: '#06b6d4', to: '#3b82f6' },
+    },
+    {
+        step: '04',
+        Icon: MessageSquare,
+        title: 'Generate',
+        desc: 'Providers like OpenAI, Anthropic, or Gemini produce grounded, source-cited responses.',
+        colors: { from: '#3b82f6', to: '#6366f1' },
+    },
 ];
 
 export const SNIPPETS: Snippet[] = [
-  {
-    id: 'pipeline',
-    title: 'Retrivora SDK',
-    language: 'typescript',
-    description: 'Create one server-side SDK instance from config; clients never know which providers are used.',
-    code: `import { Retrivora } from '@retrivora-ai/rag-engine/server';
-
-const ai = new Retrivora({
-  projectId: 'support-app',
-  llm: {
-    provider: 'openai',
-    model: 'gpt-5',
-    apiKey: process.env.OPENAI_API_KEY,
-  },
-  embedding: {
-    provider: 'openai',
-    model: 'text-embedding-3-small',
-    apiKey: process.env.OPENAI_API_KEY,
-  },
-  vectorDatabase: {
-    provider: 'pinecone',
-    indexName: 'support-docs',
-    options: { apiKey: process.env.PINECONE_API_KEY },
-  },
-  retrieval: { strategy: 'hybrid', topK: 5 },
-  workflow: { type: 'agentic-rag' },
-});
-
-await ai.ingest([{
+    {
+        id: 'npm-setup',
+        title: 'NPM Setup',
+        language: 'typescript',
+        description: 'How to install and import the client vs server components correctly in your application.',
+        code: `// ─── TERMINAL / BASH ───
+// Run this command to install the package in your project:
+// npm install @retrivora-ai/rag-engine
+
+// ─── SERVER API ROUTER (src/app/api/retrivora/[[...retrivora]]/route.ts) ───
+// Create a single catch-all file to handle all server endpoints dynamically:
+import { createRagHandler } from '@retrivora-ai/rag-engine/handlers';
+
+export const { GET, POST } = createRagHandler();
+
+// ─── CLIENT WIDGET (src/app/layout.tsx) ───
+// Import the React widget and config context (styles are auto-injected!):
+import { ConfigProvider, ChatWidget } from '@retrivora-ai/rag-engine';`,
+    },
+    {
+        id: 'pipeline',
+        title: 'Pipeline API',
+        language: 'typescript',
+        description: 'Orchestrate the full RAG flow programmatically with the Pipeline class.',
+        code: `import { Pipeline, getRagConfig } from '@retrivora-ai/rag-engine/server';
+
+const config = getRagConfig();
+const pipeline = new Pipeline(config);
+
+// Ingest documents
+await pipeline.ingest([{
   docId: 'doc-1',
   content: 'Retrivora AI simplifies RAG...',
   metadata: { source: 'docs' }
 }]);
 
-const { reply, sources } = await ai.ask('How does Retrivora work?');`,
-  },
-  {
-    id: 'handlers',
-    title: 'Next.js Routes',
-    language: 'typescript',
-    description: 'Keep secrets and provider code in App Router handlers, then expose simple API endpoints to React.',
-    code: `// app/api/chat/route.ts
-import { Retrivora, createStreamHandler } from '@retrivora-ai/rag-engine/server';
-
-const ai = new Retrivora({
-  projectId: 'support-app',
-  llm: { provider: 'openai', model: 'gpt-5', apiKey: process.env.OPENAI_API_KEY },
-  embedding: { provider: 'openai', model: 'text-embedding-3-small', apiKey: process.env.OPENAI_API_KEY },
-  vectorDatabase: {
-    provider: 'pinecone',
-    indexName: 'support-docs',
-    options: { apiKey: process.env.PINECONE_API_KEY },
-  },
-});
-
-export const POST = createStreamHandler(ai.config);
-
-// app/api/upload/route.ts
-// export const POST = createUploadHandler(ai.config);`,
-  },
-  {
-    id: 'ui',
-    title: 'React Client UI',
-    language: 'typescript',
-    description: 'Import browser-safe components in Client Components; API keys stay on the server.',
-    code: `'use client';
-
-import { ConfigProvider, ChatWidget } from '@retrivora-ai/rag-engine';
+// Ask a question
+const { reply, sources } = await pipeline.ask('How does Retrivora work?');`,
+    },
+    {
+        id: 'handlers',
+        title: 'Route Handlers',
+        language: 'typescript',
+        description: 'Deploy production-ready API endpoints in seconds using pre-built factories.',
+        code: `// src/app/api/retrivora/[[...retrivora]]/route.ts
+import { createRagHandler } from '@retrivora-ai/rag-engine/handlers';
+
+// Single catch-all handler for GET /health and POST /chat, upload, suggestions
+export const { GET, POST } = createRagHandler();`,
+    },
+    {
+        id: 'ui',
+        title: 'React Components',
+        language: 'typescript',
+        description: 'Embed beautiful, themeable AI interfaces with headless logic or pre-built widgets.',
+        code: `import { ConfigProvider, ChatWidget } from '@retrivora-ai/rag-engine';
 
 export default function Layout({ children }) {
   return (
-    <ConfigProvider
-      config={{
-        projectId: 'support-app',
-        ui: {
-          title: 'AI Assistant',
-          showSources: true,
-          allowUpload: true,
-        },
-      }}
-    >
+    <ConfigProvider config={{ projectId: 'demo' }}>
       {children}
       <ChatWidget position="bottom-right" />
     </ConfigProvider>
   );
 }`,
-  },
-  {
-    id: 'config',
-    title: 'Headless Hook',
-    language: 'typescript',
-    description: 'Build your own chat surface with the same server-backed route.',
-    code: `'use client';
-
-import React from 'react';
-import { useRagChat } from '@retrivora-ai/rag-engine';
-
-export function AskBox() {
-  const [input, setInput] = React.useState('');
-  const { messages, send, isLoading } = useRagChat('support-app', {
-    apiUrl: '/api/chat',
-  });
-
-  return (
-    <form onSubmit={(event) => {
-      event.preventDefault();
-      send(input);
-      setInput('');
-    }}>
-      <input value={input} onChange={(event) => setInput(event.target.value)} />
-      <button disabled={isLoading}>Ask</button>
-
-      {messages.map((message) => (
-        <p key={message.id}>{message.content}</p>
-      ))}
-    </form>
-  );
-}`,
-  },
-  {
-    id: 'env',
-    title: 'Environment',
-    language: 'bash',
-    description: 'The exact environment variable structure required for auto-configuration.',
-    code: `# Project Identity
+    },
+    {
+        id: 'config',
+        title: 'Config Builder',
+        language: 'typescript',
+        description: 'Fluent, type-safe configuration builder for granular control over providers.',
+        code: `import { ConfigBuilder } from '@retrivora-ai/rag-engine/server';
+
+const config = new ConfigBuilder()
+  .vectorDb('pinecone', { apiKey: '...', indexName: 'docs' })
+  .llm('ollama', 'llama3.2')
+  .embedding('ollama', 'nomic-embed-text')
+  .build();`,
+    },
+    {
+        id: 'env',
+        title: 'Environment',
+        language: 'bash',
+        description: 'The exact environment variable structure required for auto-configuration.',
+        code: `# Project Identity
 RAG_PROJECT_ID=my-project
 
 # Vector DB
@@ -223,53 +183,58 @@ VECTOR_DB_INDEX=products
 LLM_PROVIDER=openai
 LLM_MODEL=gpt-4o
 OPENAI_API_KEY=sk-...`,
-  },
+    },
 ];
 
 export const ARCHITECTURE_CARDS: ArchitectureCardProps[] = [
-  {
-    icon: <Database className="text-indigo-600" />,
-    title: 'Vector Store',
-    description: 'Universal support for Pinecone, PGVector, MongoDB, Milvus, Qdrant, and more.',
-    badge: 'Vector DB',
-    badgeColor: 'bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border-indigo-200 dark:border-indigo-500/20',
-  },
-  {
-    icon: <Zap className="text-amber-500" />,
-    title: 'Embeddings',
-    description: 'Seamlessly switch between OpenAI, Ollama, or custom embedding providers.',
-    badge: 'Models',
-    badgeColor: 'bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-200 dark:border-amber-500/20',
-  },
-  {
-    icon: <Bot className="text-emerald-500" />,
-    title: 'LLM Orchestration',
-    description: 'Optimized inference across OpenAI, Anthropic, Gemini, and local LLMs.',
-    badge: 'Inference',
-    badgeColor: 'bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-200 dark:border-emerald-500/20',
-  },
+    {
+        icon: <Database className="text-indigo-600" />,
+        title: 'Vector Store',
+        description: 'Universal support for Pinecone, PGVector, MongoDB, Milvus, Qdrant, and more.',
+        badge: 'Vector DB',
+        badgeColor: 'bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border-indigo-200 dark:border-indigo-500/20',
+    },
+    {
+        icon: <Zap className="text-amber-500" />,
+        title: 'Embeddings',
+        description: 'Seamlessly switch between OpenAI, Ollama, or custom embedding providers.',
+        badge: 'Models',
+        badgeColor: 'bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-200 dark:border-amber-500/20',
+    },
+    {
+        icon: <Bot className="text-emerald-500" />,
+        title: 'LLM Orchestration',
+        description: 'Optimized inference across OpenAI, Anthropic, Gemini, and local LLMs.',
+        badge: 'Inference',
+        badgeColor: 'bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-200 dark:border-emerald-500/20',
+    },
 ];
 
 export const QUICK_START_STEPS = [
-  'Install @retrivora-ai/rag-engine',
-  'Configure your .env.local',
-  'Mount the API handlers',
-  'Drop the ChatWidget'
+    { id: 'npm-setup', text: 'Install Package & CSS' },
+    { id: 'env', text: 'Configure .env.local' },
+    { id: 'handlers', text: 'Mount API Handlers' },
+    { id: 'ui', text: 'Drop ChatWidget UI' },
+];
+
+export const ADVANCED_STEPS = [
+    { id: 'pipeline', text: 'Programmatic SDK' },
+    { id: 'config', text: 'Fluent Config Builder' },
 ];
 
 export const API_ENDPOINTS = ['chat', 'health', 'ingest', 'upload'];
 
 export const CHAT_SUGGESTIONS = [
-  'What can you help me with?',
-  'Summarise the key topics',
-  'Show me an example'
+    'What can you help me with?',
+    'Summarise the key topics',
+    'Show me an example'
 ];
 
 export const BORDER_RADIUS_MAP: Record<string, string> = {
-  none: 'rounded-none',
-  sm: 'rounded-sm',
-  md: 'rounded-md',
-  lg: 'rounded-lg',
-  xl: 'rounded-xl',
-  full: 'rounded-3xl',
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    full: 'rounded-3xl',
 };

package/src/app/layout.tsx

@@ -1,44 +1,20 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
-import { ConfigProvider } from '@/components/ConfigProvider';
-import { ThemeProvider } from '@/components/ThemeProvider';
-import { getRagConfig } from '@/config/serverConfig';
 
 const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
 
-// Build server-side config once — same singleton source as route handlers.
-const ragConfig = getRagConfig();
-
 export const metadata: Metadata = {
-  title: ragConfig.ui?.title ?? 'Retrivora AI',
+  title: 'Retrivora AI — Plug-and-Play RAG Engine',
   description:
-    ragConfig.ui?.subtitle ??
-    'A configurable Retrieval-Augmented Generation chatbot — generic across any vector database and LLM provider.',
+    'Retrivora AI is the easiest way to add a production-grade RAG chatbot to any React or Next.js application. Plug in your LLM, your vector database, and ship.',
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" className={inter.variable} suppressHydrationWarning>
-      <body className="bg-slate-50 text-slate-900 antialiased transition-colors duration-300" suppressHydrationWarning>
-        <ThemeProvider attribute="class" defaultTheme="light" disableTransitionOnChange>
-          <ConfigProvider
-            config={{
-              projectId: ragConfig.projectId,
-              ui: ragConfig.ui,
-              // Pass embedding model/dimensions so client-side components
-              // (e.g. DocumentUpload) know the vector dimensions in use.
-              embedding: ragConfig.embedding
-                ? {
-                    model: ragConfig.embedding.model,
-                    dimensions: ragConfig.embedding.dimensions,
-                  }
-                : undefined,
-            }}
-          >
-            {children}
-          </ConfigProvider>
-        </ThemeProvider>
+      <body className="bg-slate-50 text-slate-900 antialiased" suppressHydrationWarning>
+        {children}
       </body>
     </html>
   );

package/src/app/types.ts

@@ -1,30 +1,30 @@
 import React from 'react';
 
 export interface ArchitectureCardProps {
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-  badge: string;
-  badgeColor: string;
+    icon: React.ReactNode;
+    title: string;
+    description: string;
+    badge: string;
+    badgeColor: string;
 }
 
 export interface Snippet {
-  id: string;
-  title: string;
-  description: string;
-  code: string;
-  language: string;
+    id: string;
+    title: string;
+    description: string;
+    code: string;
+    language: string;
 }
 
 export interface PipelineStep {
-  step: string;
-  Icon: React.ElementType;
-  title: string;
-  desc: string;
-  colors: { from: string; to: string };
+    step: string;
+    Icon: React.ElementType;
+    title: string;
+    desc: string;
+    colors: { from: string; to: string };
 }
 
 export interface ProviderPill {
-  Icon: React.ElementType;
-  label: string;
+    Icon: React.ElementType;
+    label: string;
 }

package/src/components/ChatWidget.tsx

@@ -46,7 +46,7 @@ const GEMINI_STYLES = `
   }
 `;
 
-export function ChatWidget({ position = 'bottom-right', onAddToCart }: ChatWidgetProps) {
+export function ChatWidget({ position = 'bottom-right', onAddToCart, apiUrl, headers }: ChatWidgetProps) {
   const { ui } = useConfig();
   const [isOpen, setIsOpen] = useState(false);
   const [hasUnread, setHasUnread] = useState(false);
@@ -146,6 +146,8 @@ export function ChatWidget({ position = 'bottom-right', onAddToCart }: ChatWidge
           onMaximize={ui.allowResize !== false ? handleMaximize : undefined}
           isMaximized={isMaximized}
           onAddToCart={onAddToCart}
+          apiUrl={apiUrl}
+          headers={headers}
         />
         {/* Pointer (Tail) */}
         <div

package/src/components/ChatWindow.tsx

@@ -62,7 +62,9 @@ export function ChatWindow({
   isResized = false,
   onMaximize,
   isMaximized = false,
-  onAddToCart
+  onAddToCart,
+  apiUrl,
+  headers
 }: ChatWindowProps) {
   const { ui, projectId } = useConfig();
   const [input, setInput] = useState('');
@@ -73,6 +75,8 @@ export function ChatWindow({
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const { messages, send, clear, isLoading, error, stop } = useRagChat(projectId, {
     namespace: projectId,
+    apiUrl,
+    headers,
   });
 
   const [suggestions, setSuggestions] = useState<string[]>([]);