A beautiful, modern web interface for the Memory Context Manager v2 MCP server, built with RedwoodJS and Chakra UI. This UI showcases our Continuous Self-Evolution System and provides real-time monitoring of our autonomous AI capabilities.
- Real-time System Health monitoring with beautiful progress bars
- Evolution Engine Status showing continuous self-improvement
- MCP Server Metrics with connection and tool availability
- Recent Activity Feed tracking all system operations
- Quick Actions for immediate system control
- Comprehensive Evolution Metrics with detailed breakdowns
- Scheduled Tasks Management with priority and timing
- Recent Evolutions History showing learning progress
- Learning Sources Tracking from documentation ingestion
- System Health Monitoring with background processes
- Chakra UI Components for consistent, accessible design
- Responsive Layout that works on all devices
- Custom Theme with brand colors and evolution accents
- Interactive Elements with hover effects and animations
- Professional Dashboard layout with sidebar navigation
- RedwoodJS - Full-stack React framework
- Chakra UI - Modern component library
- TypeScript - Type-safe development
- React Icons - Beautiful iconography
- MCP Server - Memory Context Manager v2
- Evolution Engine - Continuous self-improvement
- Real-time Data - Live system monitoring
- API Endpoints - RESTful communication
- Node.js 18+
- Yarn package manager
- MCP Server running (Memory Context Manager v2)
-
Clone the repository
git clone <repository-url> cd mcp-server-ui
-
Install dependencies
yarn install
-
Start the development server
yarn rw dev
-
Open your browser Navigate to
http://localhost:8910
- System Health Overview: Real-time metrics with progress bars
- Evolution Engine Status: Current evolution progress and statistics
- MCP Server Status: Connection status and tool availability
- Recent Activity: Timeline of system operations
- Quick Actions: Immediate system control buttons
- Evolution Metrics: Detailed breakdown of system improvements
- Scheduled Tasks: Management of upcoming evolution tasks
- Recent Evolutions: History of completed improvements
- Learning Sources: Documentation sources and learning progress
- System Health: Background processes and resource usage
- Brand Colors: Professional blue tones for primary elements
- Evolution Colors: Purple accents for evolution-related features
- Status Colors: Green (success), Yellow (warning), Red (error)
- Neutral Colors: Gray scale for text and borders
- Cards: Clean, elevated containers for content
- Progress Bars: Visual representation of metrics
- Badges: Status indicators and labels
- Tables: Organized data presentation
- Tabs: Organized content sections
- Alerts: Important information notifications
# MCP Server Configuration
MCP_SERVER_URL=http://localhost:8000
MCP_SERVER_TIMEOUT=30000
# Evolution Engine Settings
EVOLUTION_CHECK_INTERVAL=5000
EVOLUTION_MAX_CONCURRENT=3The Chakra UI theme can be customized in web/src/App.tsx:
const theme = extendTheme({
colors: {
brand: {
/* Custom brand colors */
},
evolution: {
/* Custom evolution colors */
},
},
components: {
Button: {
/* Custom button styles */
},
},
})- Real-time Updates: Live data from evolution engine
- Status Monitoring: Server health and connection status
- Tool Management: Available MCP tools and their status
- Performance Metrics: System performance indicators
- Learning Progress: Documentation ingestion status
- Evolution Metrics: Performance improvements over time
- Task Scheduling: Upcoming evolution tasks
- System Health: Resource usage and background processes
# Build the application
yarn rw build
# Start production server
yarn rw serve# Build Docker image
docker build -t mcp-server-ui .
# Run container
docker run -p 8910:8910 mcp-server-ui- Overall Health Score: Composite system performance
- Performance Metrics: Speed and efficiency indicators
- Intelligence Score: AI capability measurements
- Adaptability Rating: System flexibility and learning
- Success Rate: Percentage of successful evolutions
- Learning Sources: Documentation sources and impact
- Improvement Trends: Performance over time
- Resource Usage: Memory and CPU consumption
# Unit tests
yarn rw test
# Integration tests
yarn rw test --watch
# E2E tests
yarn rw test:e2e# Generate coverage report
yarn rw test --coverage- Fork the repository
- Create a feature branch
- Make your changes
- Add tests for new functionality
- Submit a pull request
- TypeScript: Strict type checking enabled
- ESLint: Code quality and consistency
- Prettier: Code formatting
- Chakra UI: Component library usage
- MCP Server Tools: Available MCP server functions
- Evolution Engine: Continuous self-improvement API
- System Health: Monitoring and metrics endpoints
- Chakra UI Components: Usage examples and props
- Custom Components: Dashboard-specific components
- Layout System: Responsive design patterns
This UI demonstrates the power of our Continuous Self-Evolution System:
- ๐ฏ Autonomous Learning: System learns from documentation automatically
- ๐ Performance Improvement: Real-time metrics showing system evolution
- ๐ Background Processing: Continuous optimization without user intervention
- ๐ง Intelligent Adaptation: System adapts to new knowledge sources
- ๐ Visual Monitoring: Beautiful dashboards for system oversight
- Real-time WebSocket updates for live data
- Advanced Analytics with charts and graphs
- User Management with role-based access
- API Documentation with interactive testing
- Mobile App for on-the-go monitoring
- Grafana Dashboards for advanced metrics
- Slack Notifications for system alerts
- GitHub Integration for code-based learning
- CI/CD Pipeline for automated deployment
This project is licensed under the MIT License - see the LICENSE file for details.
- RedwoodJS Team for the amazing full-stack framework
- Chakra UI Team for the beautiful component library
- MCP Community for the Model Context Protocol
- Open Source Contributors for inspiration and tools
Built with โค๏ธ using RedwoodJS + Chakra UI
Showcasing the future of autonomous AI systems ๐๐ง โจ