diff --git a/website/src/components/navbar/index.tsx b/website/src/components/navbar/index.tsx index d15224e2d..f9f720530 100644 --- a/website/src/components/navbar/index.tsx +++ b/website/src/components/navbar/index.tsx @@ -10,6 +10,7 @@ import { ChartBarIcon, ChatBubbleBottomCenterTextIcon, ChatBubbleLeftRightIcon, + CircleStackIcon, CloudArrowUpIcon, CogIcon, CommandLineIcon, @@ -333,6 +334,19 @@ export default function Navbar() { + +
+ +
+ + RAG + + + Retrieval Augmented Generation + +
+
+ {/* Right Column - Open Source Framework */} @@ -678,6 +692,14 @@ export default function Navbar() { + +
+ + + RAG + +
+

Open Source Framework

diff --git a/website/src/pages/voltops/rag.tsx b/website/src/pages/voltops/rag.tsx new file mode 100644 index 000000000..728b3933f --- /dev/null +++ b/website/src/pages/voltops/rag.tsx @@ -0,0 +1,186 @@ +import Head from "@docusaurus/Head"; +import { ArrowRightIcon, CircleStackIcon } from "@heroicons/react/24/outline"; +import { DotPattern } from "@site/src/components/ui/dot-pattern"; +import { Button } from "@site/src/components/voltops/Button"; +import Layout from "@theme/Layout"; +import { motion } from "framer-motion"; +import type React from "react"; + +// Reusable components +const Section = ({ + children, + className = "", +}: { children: React.ReactNode; className?: string }) => ( +
{children}
+); + +const Container = ({ + children, + className = "", +}: { children: React.ReactNode; className?: string }) => ( +
{children}
+); + +const features = [ + { + title: "Upload Your Docs", + description: + "Drop your files and start querying. Supports PDF, DOCX, DOC, PPTX, PPT, XLSX, XLS, CSV, HTML, HTM, XML, MD, MDX, TXT, JSON, VTT, and PROPERTIES. You can also sync from Notion or crawl websites.", + image: "https://cdn.voltagent.dev/website/rag/create.png", + }, + { + title: "One Line to Add RAG", + description: + "Set retriever on your agent for automatic context injection, or add retriever.tool to let the LLM decide when to search. Both options work with a single line of code.", + image: "https://cdn.voltagent.dev/website/rag/usage.png", + }, + { + title: "Automatic Chunking", + description: + "Documents are automatically chunked and embedded. Configure chunk size and overlap if needed, or use the defaults.", + image: "https://cdn.voltagent.dev/website/rag/create-base.png", + }, +]; + +export default function RAGPage(): JSX.Element { + return ( + + + VoltOps RAG - Retrieval Augmented Generation | VoltAgent + + + + + + + + + +
+ {/* Global Background Effects */} +
+
+
+
+
+
+ + + + {/* Hero Section */} +
+ +
+ {/* Left side - Content */} + +
+ + + VoltOps RAG + +
+

+ Give Your Agent a Knowledge Base +

+

+ Upload docs, connect your agent, and start querying. No vector database setup + required. +

+
+ + +
+ + + {/* Right side - Image */} + + VoltOps RAG Dashboard + +
+ +
+ + {/* Features Section */} +
+ +
+ {features.map((feature, index) => ( + +
+ {/* Feature Image */} +
+ {feature.title} +
+ {/* Feature Content */} +
+
+

+ {feature.title} +

+
+

+ {feature.description} +

+
+
+ {/* Divider between features */} + {index < features.length - 1 && ( +
+ )} + + ))} +
+ +
+
+ + ); +}