RAG Chatbot (Vercel Style)

A premium, high-performance RAG (Retrieval-Augmented Generation) Chatbot built with Next.js 15, Vercel AI SDK, and Shadcn UI. This project features a minimalist "Claude-style" chat interface and a modern "Knowledge Base" dashboard for managing document context.

✨ Features

• 🧠 Advanced RAG Engine: context-aware responses using your own data.
• 🎨 Premium Aesthetic: Vercel-inspired dark mode design with glassmorphism and subtle animations.
• 💬 Minimalist Chat UI:
  • Distraction-free, centered chat experience.
  • "Card-style" floating input with integrated tool toggles.
  • Subtle message actions (Copy, Regenerate).
• 📂 Smart Knowledge Base:
  • Drag-and-drop PDF upload zone.
  • Real-time processing feedback.
• 🔒 Secure Authentication: Integrated with Clerk for robust user management.
• 📱 Mobile-First: Fully responsive layout with optimized interactions for touch devices.

🛠️ Tech Stack

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS & Shadcn UI
• AI Integration: Vercel AI SDK
• Database: PostgreSQL (via Neon) & Drizzle ORM
• Vector Search: pgvector for similarity search.
• Auth: Clerk

🚀 Getting Started

Prerequisites

• Node.js 18+
• PostgreSQL Database (with pgvector extension)
• Clerk Account
• OpenAI API Key

Installation

1. Clone the repository:

   git clone https://github.com/EternalKnight002/rag-vercel.git
   cd rag-vercel

2. Install dependencies:

   npm install
   # or
   pnpm install
   # or
   yarn install

3. Set up Environment Variables: Create a .env.local file in the root directory and add the following:

   # Database
   DATABASE_URL=postgresql://...
   
   # Auth (Clerk)
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
   CLERK_SECRET_KEY=sk_test_...
   
   # AI
   OPENAI_API_KEY=sk-...

4. Run Migrations:

   npm run db:push

5. Start the Development Server:

   npm run dev

   Open http://localhost:3000 in your browser.

👤 Author

EternalKnight002

• GitHub: @EternalKnight002
• Email: resoamankumar@gmail.com