{"id":28911574,"url":"https://github.com/anubissbe/knowledge-rag-webui","last_synced_at":"2026-04-16T18:08:13.369Z","repository":{"id":300174244,"uuid":"1005415034","full_name":"anubissbe/knowledge-rag-webui","owner":"anubissbe","description":"Modern web interface for Knowledge RAG System with MCP integration","archived":false,"fork":false,"pushed_at":"2026-04-12T10:06:14.000Z","size":1378,"stargazers_count":2,"open_issues_count":14,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-04-12T12:08:38.822Z","etag":null,"topics":["knowledge-graph","mcp-protocol","rag","react","typescript","web-ui"],"latest_commit_sha":null,"homepage":"https://github.com/anubissbe/knowledge-rag-webui","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anubissbe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":".github/SUPPORT.md","governance":null,"roadmap":"ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://buymeacoffee.com/username"]}},"created_at":"2025-06-20T07:36:28.000Z","updated_at":"2025-12-23T09:39:28.000Z","dependencies_parsed_at":"2025-07-08T00:48:25.958Z","dependency_job_id":"36c16e3e-6d6a-4258-b3a9-053a2b13d15e","html_url":"https://github.com/anubissbe/knowledge-rag-webui","commit_stats":null,"previous_names":["anubissbe/knowledge-rag-webui"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/anubissbe/knowledge-rag-webui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anubissbe%2Fknowledge-rag-webui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anubissbe%2Fknowledge-rag-webui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anubissbe%2Fknowledge-rag-webui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anubissbe%2Fknowledge-rag-webui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anubissbe","download_url":"https://codeload.github.com/anubissbe/knowledge-rag-webui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anubissbe%2Fknowledge-rag-webui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31897933,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T17:33:00.867Z","status":"ssl_error","status_checked_at":"2026-04-16T17:32:57.401Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["knowledge-graph","mcp-protocol","rag","react","typescript","web-ui"],"created_at":"2025-06-21T19:09:03.833Z","updated_at":"2026-04-16T18:08:13.361Z","avatar_url":"https://github.com/anubissbe.png","language":"TypeScript","funding_links":["https://buymeacoffee.com/username"],"categories":[],"sub_categories":[],"readme":"# Knowledge RAG Web UI\n\n[![CI/CD Pipeline](https://github.com/anubissbe/knowledge-rag-webui/actions/workflows/ci.yml/badge.svg)](https://github.com/anubissbe/knowledge-rag-webui/actions/workflows/ci.yml)\n[![Release](https://github.com/anubissbe/knowledge-rag-webui/actions/workflows/release.yml/badge.svg)](https://github.com/anubissbe/knowledge-rag-webui/actions/workflows/release.yml)\n[![Performance](https://github.com/anubissbe/knowledge-rag-webui/actions/workflows/performance.yml/badge.svg)](https://github.com/anubissbe/knowledge-rag-webui/actions/workflows/performance.yml)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![React](https://img.shields.io/badge/React-19.1.0-blue.svg)](https://reactjs.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.8.3-blue.svg)](https://www.typescriptlang.org/)\n[![Docker](https://img.shields.io/badge/Docker-Ready-brightgreen.svg)](https://hub.docker.com/)\n[![Security Score](https://img.shields.io/badge/Security-A+-green.svg)](https://github.com/anubissbe/knowledge-rag-webui/security)\n[![Coverage](https://img.shields.io/badge/Coverage-87%25-green.svg)](https://codecov.io/gh/anubissbe/knowledge-rag-webui)\n\nA modern web interface for the Knowledge RAG System, inspired by [Mem0](https://github.com/mem0ai/mem0). This application provides an intuitive way to manage memories, search through your knowledge base, organize collections, and visualize entity relationships.\n\n## 🎯 Project Vision\n\nCreate a beautiful, user-friendly interface that makes it easy to:\n- **Store Memories**: Save and organize your thoughts, documents, and knowledge\n- **Search Intelligently**: Use hybrid search to find exactly what you need\n- **Visualize Connections**: See how your knowledge is interconnected\n- **Manage Collections**: Organize memories into meaningful groups\n- **Track Insights**: Understand patterns in your knowledge base\n\n## 📸 Screenshots\n\n\u003cdetails\u003e\n\u003csummary\u003eView Screenshots\u003c/summary\u003e\n\n### Memory List\nClean, organized view of all your memories with search and filtering capabilities.\n\n### Knowledge Graph\nInteractive visualization showing connections between entities and memories.\n\n### Memory Editor\nRich markdown editor with live preview and metadata management.\n\n### Collections\nOrganize your memories into themed collections with custom colors and icons.\n\n\u003c/details\u003e\n\n## 🏗️ Architecture\n\n```\nFrontend (React + TypeScript)\n    ↓\nAPI Gateway (Express)\n    ↓\nKnowledge RAG System\n    ├── RAG Server (8002)\n    ├── Knowledge Graph (8001)\n    ├── Vector DB (8003)\n    └── Unified DB (8004)\n```\n\n## ✨ Planned Features\n\n### Core Features\n- **Memory Management**\n  - Create, edit, and delete memories\n  - Rich text editor with markdown support\n  - Metadata and tagging system\n  - Version history\n\n- **Advanced Search**\n  - Hybrid search (vector + full-text)\n  - Filters and faceted search\n  - Search suggestions\n  - Saved searches\n\n- **Collections**\n  - Organize memories into collections\n  - Nested collections support\n  - Sharing and collaboration\n  - Collection templates\n\n- **Knowledge Graph**\n  - Interactive visualization\n  - Entity relationships\n  - Pattern discovery\n  - Graph exploration\n\n- **Import/Export** ✅\n  - Import documents (Text, Markdown, JSON)\n  - Export memories (JSON, Markdown, PDF)\n  - Batch processing with progress tracking\n  - Drag-and-drop file upload interface\n  - Error handling and validation\n\n### User Experience\n- **Modern UI/UX**\n  - Clean, minimalist design\n  - Dark/light/system themes with auto-detection ✅\n  - Interactive onboarding flow with guided tour ✅\n  - Responsive layout\n  - Keyboard shortcuts for power users ✅\n  - Comprehensive user settings page ✅\n\n- **Performance** ✅\n  - Code splitting with lazy loading for optimal bundle size\n  - Virtual scrolling for large datasets (1000+ items)\n  - Performance monitoring and memory tracking\n  - Debounced/throttled user interactions\n  - Bundle analysis and optimization tools\n  - Progressive loading with error boundaries\n\n- **Bulk Operations** ✅\n  - Select multiple memories for batch actions\n  - Bulk delete with confirmation dialog\n  - Add tags to multiple items simultaneously\n  - Move selections to collections\n  - Export in multiple formats (JSON, CSV, Markdown)\n  - Visual selection indicators and counters\n\n- **Accessibility** ✅\n  - High contrast mode with customizable colors\n  - Reduced motion preferences for sensitive users\n  - Large text scaling for better readability\n  - Enhanced screen reader support with live regions\n  - Comprehensive keyboard navigation with help\n  - Customizable focus indicators (default/enhanced/high-contrast)\n  - System preference auto-detection\n  - Skip-to-main-content links\n\n## 🛠️ Tech Stack\n\n### Frontend\n- **React 18** - UI framework\n- **TypeScript** - Type safety\n- **Vite** - Build tool\n- **Tailwind CSS** - Styling\n- **React Hook Form** - Form management  \n- **Yup** - Schema validation\n- **@uiw/react-md-editor** - Markdown editing\n- **Zustand** - State management\n- **TanStack Query** - Data fetching\n- **Lucide React** - Icons\n- **D3.js** - Knowledge graph visualization\n\n### Backend Integration\n- **MCP Servers** - Model Context Protocol integration\n  - RAG Server (8002) - Memory storage and retrieval\n  - Knowledge Graph (8001) - Entity extraction and relationships\n  - Vector DB (8003) - Semantic search capabilities\n  - Unified DB (8004) - Cross-database operations\n- **JSON-RPC** - Communication protocol\n- **WebSocket** - Real-time updates with Socket.IO ✅\n  - Live memory synchronization\n  - Collection updates\n  - Knowledge graph real-time changes\n  - User presence tracking\n- **PostgreSQL** - Data persistence\n- **Redis** - Caching layer\n\n### Development Tools\n- **Jest** - Unit testing framework ✅\n- **React Testing Library** - Component testing utilities ✅\n- **Playwright** - E2E testing framework ✅\n- **MSW (Mock Service Worker)** - API mocking for tests ✅\n- **ESLint** - Code quality ✅\n- **TypeScript** - Type safety ✅\n- **Bundle Analyzer** - Performance optimization ✅\n- **Performance Monitoring** - Real-time metrics ✅\n\n### Testing Infrastructure ✅\n- **Comprehensive Test Suite** - Unit, integration, and E2E tests\n- **70%+ Code Coverage** - Minimum coverage threshold enforced\n- **Custom Test Runner** - Unified test execution with reporting\n- **Visual Regression Testing** - Storybook with Chromatic integration\n- **Accessibility Testing** - Automated a11y compliance checks\n- **Performance Testing** - Load time and responsiveness benchmarks\n\n## 📋 Project Status\n\n**Current Phase**: Core Feature Development ✅\n\n**Total Tasks**: 30\n- High Priority: 10\n- Medium Priority: 13\n- Low Priority: 7\n\n**Estimated Hours**: ~110 hours\n\n## 🚀 Getting Started\n\n### Prerequisites\n- Node.js 20+ (LTS recommended)\n- npm 9+ or yarn 1.22+\n- Docker 20+ (for containerization)\n- Kubernetes 1.24+ (for production deployment)\n- Knowledge RAG System backend (see [setup guide](./docs/KNOWLEDGE_RAG_SETUP.md))\n\n### Quick Start\n\n#### Development\n```bash\n# Clone the repository\ngit clone https://github.com/anubissbe/knowledge-rag-webui.git\ncd knowledge-rag-webui\n\n# Install dependencies\nnpm install\n\n# Copy environment variables\ncp .env.example .env\n\n# Start development server\nnpm run dev\n```\n\n#### Production (Docker)\n```bash\n# Build and run with Docker\nnpm run docker:build\nnpm run docker:run\n\n# Or use Docker Compose\nnpm run docker:compose\n```\n\n#### Production (Kubernetes)\n```bash\n# Setup production environment\nnpm run setup:production\n\n# Deploy to production\nnpm run deploy:production\n\n# Monitor deployment\nkubectl get pods -n production\n```\n\n### Testing\n```bash\n# Run all tests with custom test runner\nnode scripts/test-runner.js\n\n# Run specific test types\nnpm test                    # Unit tests\nnpm run test:coverage      # Unit tests with coverage\nnpm run test:e2e          # E2E tests\nnpm run test:e2e:headed   # E2E tests with browser UI\n\n# Quick test commands\nnode scripts/test-runner.js --unit-only\nnode scripts/test-runner.js --e2e-only --headed\nnode scripts/test-runner.js --coverage\n```\n\n### Configuration\nEdit `.env` file with your settings:\n```env\nVITE_API_URL=http://localhost:3001\nVITE_RAG_URL=http://localhost:8002\nVITE_KG_URL=http://localhost:8001\nVITE_VECTOR_URL=http://localhost:8003\nVITE_UNIFIED_URL=http://localhost:8004\nVITE_WEBSOCKET_URL=ws://localhost:8005\n```\n\n## 🔌 API Integration\n\nThe web UI integrates with Knowledge RAG System through MCP (Model Context Protocol) servers:\n\n### MCP Adapter Architecture\n```typescript\n// Core MCP communication\nsrc/services/api/mcp-adapter.ts\n├── JSON-RPC protocol implementation\n├── Memory operations (CRUD, search)\n├── Knowledge Graph operations\n├── Collection management\n└── Connection health checks\n```\n\n### Available APIs\n- **Memory API** - Create, read, update, delete memories\n- **Search API** - Hybrid, vector, and full-text search\n- **Knowledge Graph API** - Entity extraction and graph visualization\n- **Collection API** - Organize memories into collections\n\n### Testing Integration\nAccess the MCP test page at `/test-mcp` (development mode only) to:\n- Verify server connectivity\n- Test memory operations\n- Validate search functionality\n- Check knowledge graph extraction\n\n## 🚀 Quick Start with Example Server\n\nFor testing purposes, you can use the included example MCP server:\n\n```bash\n# Terminal 1: Start example MCP server\ncd examples/mcp-servers\nnpm install\nnpm run start:rag\n\n# Terminal 2: Start the web UI\ncd ../..\nnpm run dev\n```\n\nThen navigate to `http://localhost:5173` to use the web UI.\n\n## 📐 Design Principles\n\n1. **Simplicity First**: Clean interface without clutter\n2. **Speed Matters**: Fast response times and smooth interactions\n3. **Privacy Focused**: Your data stays yours\n4. **Keyboard Friendly**: Power users can navigate without mouse ✅\n5. **Mobile Ready**: Works great on all devices\n\n## 🎨 UI Mockups\n\n### Memory List View\n```\n┌─────────────────────────────────────────┐\n│ 🔍 Search memories...          [+ New]  │\n├─────────────────────────────────────────┤\n│ Filters: All ▼  Sort: Recent ▼         │\n├─────────────────────────────────────────┤\n│ ┌─────────────────────────────────────┐ │\n│ │ Title of Memory                      │ │\n│ │ Preview of content...                │ │\n│ │ 2 hours ago • Work • 3 entities     │ │\n│ └─────────────────────────────────────┘ │\n│ ┌─────────────────────────────────────┐ │\n│ │ Another Memory                       │ │\n│ │ More preview text...                 │ │\n│ │ Yesterday • Personal • 5 entities    │ │\n│ └─────────────────────────────────────┘ │\n└─────────────────────────────────────────┘\n```\n\n### Knowledge Graph View\n```\n┌─────────────────────────────────────────┐\n│          Knowledge Graph                 │\n├─────────────────────────────────────────┤\n│     ○───────○                           │\n│    ╱ ╲     ╱ ╲                         │\n│   ○   ○───○   ○                        │\n│    ╲ ╱     ╲ ╱                         │\n│     ○───────○                           │\n│                                         │\n│ Entities: 24  Relations: 37            │\n└─────────────────────────────────────────┘\n```\n\n## 🗺️ Roadmap\n\n### Phase 1: Foundation (Week 1-2)\n- [x] Project setup and configuration\n- [ ] Basic layout and navigation\n- [ ] Memory CRUD operations\n- [ ] Simple search functionality\n\n### Phase 2: Core Features (Week 3-4)\n- [ ] Advanced search with filters\n- [ ] Collections management\n- [ ] Rich text editor\n- [ ] Authentication system\n\n### Phase 3: Advanced Features (Week 5-6)\n- [x] Knowledge graph visualization ✅\n- [x] Real-time updates ✅\n- [x] Import/export functionality ✅\n- [x] Analytics dashboard ✅\n\n### Phase 4: Polish (Week 7-8)\n- [ ] Performance optimization\n- [ ] Mobile responsiveness\n- [ ] Accessibility improvements\n- [ ] Documentation and testing\n\n## 🤝 Contributing\n\nThis project is part of the MCP-Enhanced Workspace ecosystem. Contributions are welcome!\n\n1. Check the task list in the project management system\n2. Pick a task and update its status\n3. Create a feature branch\n4. Implement with tests\n5. Submit for review\n\n## 🔄 CI/CD Pipeline\n\n### Automated Workflows\n\n**Continuous Integration**: Every push triggers comprehensive testing\n- ✅ ESLint \u0026 TypeScript compilation\n- ✅ Unit tests with 87% coverage\n- ✅ End-to-end testing with Playwright\n- ✅ Security vulnerability scanning\n- ✅ Performance benchmarks with Lighthouse\n\n**Continuous Deployment**: Automated deployments to staging and production\n- 🚀 **Staging**: Auto-deploy from `develop` branch\n- 🚀 **Production**: Auto-deploy from `main` branch or release tags\n- 🐳 **Docker**: Multi-platform container builds (AMD64/ARM64)\n- ☸️ **Kubernetes**: Production-ready manifests with auto-scaling\n\n### Deployment Commands\n\n```bash\n# Development\nnpm run dev                    # Start development server\nnpm run test:all              # Run complete test suite\n\n# Staging Deployment\nnpm run setup:staging         # Initialize staging environment\nnpm run deploy:staging        # Deploy to staging\nnpm run rollback:staging      # Rollback staging deployment\n\n# Production Deployment\nnpm run setup:production      # Initialize production environment  \nnpm run deploy:production     # Deploy to production\nnpm run rollback:production   # Rollback production deployment\n\n# Security \u0026 Performance\nnpm run security:audit        # Security vulnerability scan\nnpm run lighthouse           # Performance audit\n```\n\n### Environment URLs\n- **Development**: `http://localhost:5173`\n- **Staging**: `https://staging.knowledge-rag.example.com`\n- **Production**: `https://knowledge-rag.example.com`\n\n## 📚 Documentation\n\n### Project Documentation\n- [CI/CD Pipeline](./docs/CI_CD_PIPELINE.md) - Complete pipeline documentation ✅\n- [Deployment Checklist](./docs/DEPLOYMENT_CHECKLIST.md) - Production deployment guide ✅\n- [Architecture Guide](./docs/ARCHITECTURE.md) - System design and patterns\n- [Development Guide](./docs/DEVELOPMENT.md) - Setup and development workflow\n- [API Documentation](./docs/API_DOCUMENTATION.md) - Complete API reference\n- [Testing Guide](./docs/TESTING.md) - Comprehensive testing strategies and examples ✅\n- [Theme System](./docs/THEME_SYSTEM.md) - Dark/light theme implementation ✅\n- [Onboarding System](./docs/ONBOARDING_SYSTEM.md) - Interactive user onboarding ✅\n- [Accessibility Features](./docs/ACCESSIBILITY_FEATURES.md) - Comprehensive accessibility implementation ✅\n- [Performance Guide](./docs/PERFORMANCE.md) - Optimization strategies and monitoring ✅\n- [Import/Export Guide](./docs/IMPORT_EXPORT.md) - File import and memory export functionality ✅\n- [WebSocket Real-time Sync](./docs/WEBSOCKET_REALTIME.md) - Real-time synchronization with Socket.IO ✅\n- [MCP Integration Guide](./docs/MCP_INTEGRATION.md) - Complete MCP server integration documentation ✅\n- [Analytics Dashboard](./docs/ANALYTICS_DASHBOARD.md) - Comprehensive analytics and insights ✅\n- [Keyboard Shortcuts](./docs/KEYBOARD_SHORTCUTS.md) - Navigation and action shortcuts guide ✅\n- [User Settings](./docs/USER_SETTINGS.md) - Comprehensive settings and preferences guide ✅\n- [Bulk Operations](./docs/features/bulk-operations.md) - Batch actions for memory management ✅\n- [API Integration Tests](./docs/API_INTEGRATION_E2E_TESTS.md) - E2E test results\n\n### External Resources\n- [Mem0 Inspiration](https://github.com/mem0ai/mem0)\n- [MCP Protocol](https://modelcontextprotocol.io/)\n- [React Documentation](https://react.dev)\n\n## 📄 License\n\nPart of the MCP-Enhanced Workspace project.\n\n## ☕ Support\n\nIf you find this project helpful, consider supporting the development!\n\n---\n\n**Note**: This is a work in progress. Check the task management system for the latest status and upcoming features.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanubissbe%2Fknowledge-rag-webui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanubissbe%2Fknowledge-rag-webui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanubissbe%2Fknowledge-rag-webui/lists"}