VRIN Frontend - Smart Memory Dashboard

Enterprise-grade React dashboard for VRIN's Hybrid RAG system, featuring interactive knowledge graph visualization, real-time updates, and user-defined AI specialization management.

🚀 Architecture Overview

VRIN's frontend is a Next.js 15 application that provides a comprehensive dashboard for managing AI-powered knowledge graphs and expert specializations.

Core Technology Stack

• Framework: Next.js 15 with App Router
• Runtime: React 19 with concurrent features
• Language: TypeScript with strict typing
• Styling: Tailwind CSS + shadcn/ui components
• State Management: TanStack Query + custom hooks
• Real-time: Socket.IO client for live updates
• Visualization: Cytoscape.js for knowledge graphs

🏗️ Frontend Architecture

Modern Next.js 15 Structure

app/ # Next.js App Router
├── layout.tsx # Root layout with providers
├── page.tsx # Landing page
├── dashboard/ # Main dashboard interface
├── auth/ # Authentication pages
├── api/ # API route handlers
└── knowledge-graph/ # Graph visualization pages
components/ # Feature-organized components
├── dashboard/ # Dashboard-specific components
│ ├── sections/ # Main dashboard sections
│ ├── knowledge-graph/ # Graph visualization
│ ├── layout/ # Navigation and layout
│ └── providers.tsx # Context providers
├── ui/ # shadcn/ui base components
└── [feature-components] # Landing page components
hooks/ # Custom React hooks
├── use-auth.ts # Authentication state
├── use-api-keys.ts # API key management
├── use-knowledge-graph.ts # Graph data fetching
└── use-real-time-updates.ts # Live updates
config/ # Configuration
└── api.ts # Centralized API endpoints
types/ # TypeScript definitions
└── knowledge-graph.ts # Core data models

State Management Architecture

TanStack Query for server state:

• API caching and synchronization
• Optimistic updates
• Background refetching
• Error handling and retries

Custom Hooks for domain logic:

• use-auth.ts - User authentication and session management
• use-knowledge-graph.ts - Graph data fetching and real-time updates
• use-api-keys.ts - API key CRUD operations
• use-vrin-service.ts - Backend service integration

Real-time Updates:

• Socket.IO client for live graph updates
• Conflict resolution for simultaneous edits
• Real-time statistics and status indicators

🎯 Key Features

Interactive Knowledge Graph Dashboard

• Real-time Visualization: Live graph updates using Cytoscape.js
• Multi-section Interface: Home, API Docs, API Keys, Settings
• Temporal Timeline: Time-based knowledge graph operations
• Conflict Resolution: Automatic handling of contradictory information
• Node Details: Interactive exploration of entities and relationships

User-Defined AI Specialization

• Custom Expert Configuration: Define domain-specific AI reasoning
• Specialization Management: Save and manage multiple expert profiles
• Analysis Depth Control: Surface, detailed, or expert-level analysis
• Reasoning Focus: Cross-document synthesis, causal chains, pattern detection

Enterprise Authentication

• Multi-key Support: Users can create multiple API keys
• Bearer Token Authentication: Secure JWT-based authentication
• User Isolation: Complete data separation by user_id
• Account Management: Registration, login, email verification

Production-Ready UI Components

• shadcn/ui Foundation: Accessible, customizable component library
• Radix UI Primitives: Headless UI components with full accessibility
• Theme Support: Dark/light mode with next-themes
• Responsive Design: Mobile-first approach with Tailwind CSS

🔧 Development Setup

Prerequisites

• Node.js 18+
• npm/yarn/pnpm
• Git

Installation

# Clone the repository
git clone <repository-url>cd vrin
# Install dependencies
npm install
# Start development server
npm run dev

Development Commands

• Development server: npm run dev (http://localhost:3000)
• Production build: npm run build
• Start production: npm start
• Lint code: npm run lint

🌐 Backend Integration

API Configuration

The frontend connects to VRIN's production AWS infrastructure:

• Auth API: https://gp7g651udc.execute-api.us-east-1.amazonaws.com/Prod
• RAG API: https://thuiu23t0c.execute-api.us-east-1.amazonaws.com/dev
• Authentication: Bearer token with JWT
• Real-time: Socket.IO for live updates

API Integration Pattern

// Centralized API configurationexportconstapiCall=async(endpoint: string,options: RequestInit={},apiKey?: string)=>{consturl=`${API_CONFIG.BASE_URL}${endpoint}`;constresponse=awaitfetch(url,{headers: getAuthHeaders(apiKey),
...options});returnresponse.json();};// Custom hooks for data fetchingexportconstuseKnowledgeGraph=()=>{returnuseQuery({queryKey: ['knowledge-graph'],queryFn: ()=>apiCall('/graph'),refetchInterval: 30000,// Real-time updates});};

📊 Core Data Models

Knowledge Graph Types

// Temporal knowledge graph with provenanceinterfaceTriple{subject: string;predicate: string;object: string;confidence?: number;timestamp?: Date;source?: string;status?: 'active'|'deprecated'|'conflicted';}// Interactive graph visualizationinterfaceNode{id: string;name: string;type: string;connections?: number;position?: {x: number;y: number};}// Real-time updatesinterfaceGraphUpdate{type: 'node_added'|'edge_updated'|'conflict_resolved';timestamp: Date;data: Node|Edge|ConflictResolution;}

🎨 Design System

Component Architecture

• Atomic Design: Atoms (buttons) → Molecules (forms) → Organisms (sections)
• Feature Organization: Components grouped by dashboard sections
• Consistent Theming: CSS variables with Tailwind for dark/light modes
• Accessibility: ARIA compliance through Radix UI primitives

Styling Approach

// Tailwind with custom theme configurationconstconfig: Config={darkMode: "class",theme: {extend: {colors: {background: "hsl(var(--background))",foreground: "hsl(var(--foreground))",primary: {DEFAULT: "hsl(var(--primary))",foreground: "hsl(var(--primary-foreground))",},// ... comprehensive design tokens}}}}

🔒 Security & Performance

Security Features

• Authentication: JWT tokens with secure storage
• API Security: Bearer token authentication for all requests
• Data Isolation: User-specific data filtering
• Input Validation: Client-side validation with server verification

Performance Optimizations

• Next.js 15: Latest optimizations and concurrent features
• TanStack Query: Intelligent caching and background updates
• Code Splitting: Automatic route-based splitting
• Asset Optimization: Next.js built-in image and font optimization

🚀 Deployment

Production Deployment

• Platform: Vercel (recommended) or any Node.js hosting
• Build: Static generation with dynamic API routes
• Environment: Production API endpoints configured
• Monitoring: Real-time error tracking and performance monitoring

Environment Configuration

# Production environment variables
NEXT_PUBLIC_API_URL=https://api.vrin.cloud
NEXT_PUBLIC_AUTH_URL=https://auth.vrin.cloud
NEXT_PUBLIC_SOCKET_URL=https://realtime.vrin.cloud

🎯 What Makes VRIN Frontend Unique

vs. Traditional Dashboards

• ✅ Real-time Knowledge Graphs - Live visualization of AI memory
• ✅ User-Defined Experts - Customize AI reasoning for any domain
• ✅ Temporal Intelligence - Time-aware fact management
• ✅ Conflict Resolution - Automatic handling of contradictory information

vs. Basic Admin Interfaces

• ✅ Interactive Visualization - Cytoscape.js graph exploration
• ✅ Modern React Architecture - Next.js 15 with latest features
• ✅ Enterprise Authentication - Multi-key, secure user management
• ✅ Production-Ready - Full AWS integration with real-time updates

📚 Documentation

• Architecture: See CLAUDE.md for development guidelines
• API Integration: Check config/api.ts for endpoint configuration
• Component Library: shadcn/ui documentation for UI components
• State Management: TanStack Query docs for data fetching patterns

---

🎉 VRIN Frontend represents the next generation of AI dashboard interfaces - combining real-time knowledge graph visualization with user-defined AI specialization management in a production-ready Next.js application.

Last updated: August 16, 2025 - Next.js 15 with React 19