A modern web interface for the Knowledge RAG System, inspired by Mem0. This application provides an intuitive way to manage memories, search through your knowledge base, organize collections, and visualize entity relationships.
Create a beautiful, user-friendly interface that makes it easy to:
- Store Memories: Save and organize your thoughts, documents, and knowledge
- Search Intelligently: Use hybrid search to find exactly what you need
- Visualize Connections: See how your knowledge is interconnected
- Manage Collections: Organize memories into meaningful groups
- Track Insights: Understand patterns in your knowledge base
View Screenshots
Clean, organized view of all your memories with search and filtering capabilities.
Interactive visualization showing connections between entities and memories.
Rich markdown editor with live preview and metadata management.
Organize your memories into themed collections with custom colors and icons.
Frontend (React + TypeScript)
↓
API Gateway (Express)
↓
Knowledge RAG System
├── RAG Server (8002)
├── Knowledge Graph (8001)
├── Vector DB (8003)
└── Unified DB (8004)
-
Memory Management
- Create, edit, and delete memories
- Rich text editor with markdown support
- Metadata and tagging system
- Version history
-
Advanced Search
- Hybrid search (vector + full-text)
- Filters and faceted search
- Search suggestions
- Saved searches
-
Collections
- Organize memories into collections
- Nested collections support
- Sharing and collaboration
- Collection templates
-
Knowledge Graph
- Interactive visualization
- Entity relationships
- Pattern discovery
- Graph exploration
-
Import/Export ✅
- Import documents (Text, Markdown, JSON)
- Export memories (JSON, Markdown, PDF)
- Batch processing with progress tracking
- Drag-and-drop file upload interface
- Error handling and validation
-
Modern UI/UX
- Clean, minimalist design
- Dark/light/system themes with auto-detection ✅
- Interactive onboarding flow with guided tour ✅
- Responsive layout
- Keyboard shortcuts for power users ✅
- Comprehensive user settings page ✅
-
Performance ✅
- Code splitting with lazy loading for optimal bundle size
- Virtual scrolling for large datasets (1000+ items)
- Performance monitoring and memory tracking
- Debounced/throttled user interactions
- Bundle analysis and optimization tools
- Progressive loading with error boundaries
-
Bulk Operations ✅
- Select multiple memories for batch actions
- Bulk delete with confirmation dialog
- Add tags to multiple items simultaneously
- Move selections to collections
- Export in multiple formats (JSON, CSV, Markdown)
- Visual selection indicators and counters
-
Accessibility ✅
- High contrast mode with customizable colors
- Reduced motion preferences for sensitive users
- Large text scaling for better readability
- Enhanced screen reader support with live regions
- Comprehensive keyboard navigation with help
- Customizable focus indicators (default/enhanced/high-contrast)
- System preference auto-detection
- Skip-to-main-content links
- React 18 - UI framework
- TypeScript - Type safety
- Vite - Build tool
- Tailwind CSS - Styling
- React Hook Form - Form management
- Yup - Schema validation
- @uiw/react-md-editor - Markdown editing
- Zustand - State management
- TanStack Query - Data fetching
- Lucide React - Icons
- D3.js - Knowledge graph visualization
- MCP Servers - Model Context Protocol integration
- RAG Server (8002) - Memory storage and retrieval
- Knowledge Graph (8001) - Entity extraction and relationships
- Vector DB (8003) - Semantic search capabilities
- Unified DB (8004) - Cross-database operations
- JSON-RPC - Communication protocol
- WebSocket - Real-time updates with Socket.IO ✅
- Live memory synchronization
- Collection updates
- Knowledge graph real-time changes
- User presence tracking
- PostgreSQL - Data persistence
- Redis - Caching layer
- Jest - Unit testing framework ✅
- React Testing Library - Component testing utilities ✅
- Playwright - E2E testing framework ✅
- MSW (Mock Service Worker) - API mocking for tests ✅
- ESLint - Code quality ✅
- TypeScript - Type safety ✅
- Bundle Analyzer - Performance optimization ✅
- Performance Monitoring - Real-time metrics ✅
- Comprehensive Test Suite - Unit, integration, and E2E tests
- 70%+ Code Coverage - Minimum coverage threshold enforced
- Custom Test Runner - Unified test execution with reporting
- Visual Regression Testing - Storybook with Chromatic integration
- Accessibility Testing - Automated a11y compliance checks
- Performance Testing - Load time and responsiveness benchmarks
Current Phase: Core Feature Development ✅
Total Tasks: 30
- High Priority: 10
- Medium Priority: 13
- Low Priority: 7
Estimated Hours: ~110 hours
- Node.js 20+ (LTS recommended)
- npm 9+ or yarn 1.22+
- Docker 20+ (for containerization)
- Kubernetes 1.24+ (for production deployment)
- Knowledge RAG System backend (see setup guide)
# Clone the repository
git clone https://github.com/anubissbe/knowledge-rag-webui.git
cd knowledge-rag-webui
# Install dependencies
npm install
# Copy environment variables
cp .env.example .env
# Start development server
npm run dev# Build and run with Docker
npm run docker:build
npm run docker:run
# Or use Docker Compose
npm run docker:compose# Setup production environment
npm run setup:production
# Deploy to production
npm run deploy:production
# Monitor deployment
kubectl get pods -n production# Run all tests with custom test runner
node scripts/test-runner.js
# Run specific test types
npm test # Unit tests
npm run test:coverage # Unit tests with coverage
npm run test:e2e # E2E tests
npm run test:e2e:headed # E2E tests with browser UI
# Quick test commands
node scripts/test-runner.js --unit-only
node scripts/test-runner.js --e2e-only --headed
node scripts/test-runner.js --coverageEdit .env file with your settings:
VITE_API_URL=http://localhost:3001
VITE_RAG_URL=http://localhost:8002
VITE_KG_URL=http://localhost:8001
VITE_VECTOR_URL=http://localhost:8003
VITE_UNIFIED_URL=http://localhost:8004
VITE_WEBSOCKET_URL=ws://localhost:8005The web UI integrates with Knowledge RAG System through MCP (Model Context Protocol) servers:
// Core MCP communication
src/services/api/mcp-adapter.ts
├── JSON-RPC protocol implementation
├── Memory operations (CRUD, search)
├── Knowledge Graph operations
├── Collection management
└── Connection health checks- Memory API - Create, read, update, delete memories
- Search API - Hybrid, vector, and full-text search
- Knowledge Graph API - Entity extraction and graph visualization
- Collection API - Organize memories into collections
Access the MCP test page at /test-mcp (development mode only) to:
- Verify server connectivity
- Test memory operations
- Validate search functionality
- Check knowledge graph extraction
For testing purposes, you can use the included example MCP server:
# Terminal 1: Start example MCP server
cd examples/mcp-servers
npm install
npm run start:rag
# Terminal 2: Start the web UI
cd ../..
npm run devThen navigate to http://localhost:5173 to use the web UI.
- Simplicity First: Clean interface without clutter
- Speed Matters: Fast response times and smooth interactions
- Privacy Focused: Your data stays yours
- Keyboard Friendly: Power users can navigate without mouse ✅
- Mobile Ready: Works grea 9E7A t on all devices
┌─────────────────────────────────────────┐
│ 🔍 Search memories... [+ New] │
├─────────────────────────────────────────┤
│ Filters: All ▼ Sort: Recent ▼ │
├─────────────────────────────────────────┤
│ ┌─────────────────────────────────────┐ │
│ │ Title of Memory │ │
│ │ Preview of content... │ │
│ │ 2 hours ago • Work • 3 entities │ │
│ └─────────────────────────────────────┘ │
│ ┌─────────────────────────────────────┐ │
│ │ Another Memory │ │
│ │ More preview text... │ │
│ │ Yesterday • Personal • 5 entities │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────┘
┌─────────────────────────────────────────┐
│ Knowledge Graph │
├─────────────────────────────────────────┤
│ ○───────○ │
│ ╱ ╲ ╱ ╲ │
│ ○ ○───○ ○ │
│ ╲ ╱ ╲ ╱ │
│ ○───────○ │
│ │
│ Entities: 24 Relations: 37 │
└─────────────────────────────────────────┘
- Project setup and configuration
- Basic layout and navigation
- Memory CRUD operations
- Simple search functionality
- Advanced search with filters
- Collections management
- Rich text editor
- Authentication system
- Knowledge graph visualization ✅
- Real-time updates ✅
- Import/export functionality ✅
- Analytics dashboard ✅
- Performance optimization
- Mobile responsiveness
- Accessibility improvements
- Documentation and testing
This project is part of the MCP-Enhanced Workspace ecosystem. Contributions are welcome!
- Check the task list in the project management system
- Pick a task and update its status
- Create a feature branch
- Implement with tests
- Submit for review
Continuous Integration: Every push triggers comprehensive testing
- ✅ ESLint & TypeScript compilation
- ✅ Unit tests with 87% coverage
- ✅ End-to-end testing with Playwright
- ✅ Security vulnerability scanning
- ✅ Performance benchmarks with Lighthouse
Continuous Deployment: Automated deployments to staging and production
- 🚀 Staging: Auto-deploy from
developbranch - 🚀 Production: Auto-deploy from
mainbranch or release tags - 🐳 Docker: Multi-platform container builds (AMD64/ARM64)
- ☸️ Kubernetes: Production-ready manifests with auto-scaling
# Development
npm run dev # Start development server
npm run test:all # Run complete test suite
# Staging Deployment
npm run setup:staging # Initialize staging environment
npm run deploy:staging # Deploy to staging
npm run rollback:staging # Rollback staging deployment
# Production Deployment
npm run setup:production # Initialize production environment
npm run deploy:production # Deploy to production
npm run rollback:production # Rollback production deployment
# Security & Performance
npm run security:audit # Security vulnerability scan
npm run lighthouse # Performance audit- Development:
http://localhost:5173 - Staging:
https://staging.knowledge-rag.example.com - Production:
https://knowledge-rag.example.com
- CI/CD Pipeline - Complete pipeline documentation ✅
- Deployment Checklist - Production deployment guide ✅
- Architecture Guide - System design and patterns
- Development Guide - Setup and development workflow
- API Documentation - Complete API reference
- Testing Guide - Comprehensive testing strategies and examples ✅
- Theme System - Dark/light theme implementation ✅
- Onboarding System - Interactive user onboarding ✅
- Accessibility Features - Comprehensive accessibility implementation ✅
- Performance Guide - Optimization strategies and monitoring ✅
- Import/Export Guide - File import and memory export functionality ✅
- WebSocket Real-time Sync - Real-time synchronization with Socket.IO ✅
- MCP Integration Guide - Complete MCP server integration documentation ✅
- Analytics Dashboard - Comprehensive analytics and insights ✅
- Keyboard Shortcuts - Navigation and action shortcuts guide ✅
- User Settings - Comprehensive settings and preferences guide ✅
- Bulk Operations - Batch actions for memory management ✅
- API Integration Tests - E2E test results
Part of the MCP-Enhanced Workspace project.
If you find this project helpful, consider supporting the development!
Note: This is a work in progress. Check the task management system for the latest status and upcoming features.