Start the UI Server

# Launch the web interface server
python ui_server.py

# The interface will be available at:
# http://localhost:8888

Open in Browser

Navigate to http://localhost:8888 in your web browser to access the dashboard.

Dynamic Tool Configuration

The main dashboard provides a comprehensive view of all available tools:

• Tool Discovery: Automatically scans the tools/ directory for Python modules
• Status Indicators: Visual checkboxes show enabled/disabled state
• Tool Descriptions: Extracted from module docstrings and comments
• Bulk Operations: Select All / Deselect All buttons for quick configuration

Quick Actions:

# Enable all mathematical tools
# Use the web interface to quickly enable:
# - Basic Math (add, subtract, multiply, divide)
# - Advanced Math (factorial, fibonacci, prime_check)
# - Statistics (mean, median, mode)

# Enable file operation tools
# Toggle on file-related tools:
# - File Operations (create, read, write, delete)
# - Directory Operations (list, create, remove)
# - Archive Operations (zip, unzip, tar)

Real-time Server Metrics

The metrics panel displays live server information updated every 5 seconds:

Real-time Log Monitoring

Monitor server activity with the integrated log viewer:

• Server-Sent Events: Real-time log streaming without page refresh
• Color Coding: Different colors for INFO, WARNING, ERROR levels
• Auto-scroll: Automatically scrolls to show the latest entries
• Buffer Management: Maintains the last 100 log entries in memory

Log Levels:

• 🟢 INFO: General information and successful operations
• 🟡 WARNING: Potential issues or important notices
• 🔴 ERROR: Errors and exceptions

Zero-Downtime Updates

The web interface provides seamless configuration updates:

1. Make Changes: Toggle tools on/off using the checkboxes
2. Auto-Save: Configuration is automatically saved to config.json
3. Hot Reload: Server reloads configuration without stopping
4. Immediate Effect: Changes take effect instantly

Automatic Backup System

# Configuration files are automatically backed up before changes
# Backup location: config.json.backup.timestamp

# Example backup files:
config.json.backup.2024-01-15-10-30-00
config.json.backup.2024-01-15-11-45-30
config.json.backup.2024-01-15-14-20-15

# Restore from backup if needed:
cp config.json.backup.2024-01-15-10-30-00 config.json
# Then restart the server

Tool Management API

Programmatic Configuration

# Get available tools
import requests

# List all tools with status
response = requests.get('http://localhost:8888/api/tools/available')
tools_info = response.json()

print(f"Total tools: {len(tools_info['tools'])}")
for tool in tools_info['tools']:
    status = "✅" if tool['enabled'] else "❌"
    print(f"{status} {tool['name']}: {tool['description']}")

# Update tool configuration
new_config = {
    "enabled_tools": [
        "add", "subtract", "multiply", "divide",
        "create_file", "read_file", "list_files"
    ]
}

response = requests.post(
    'http://localhost:8888/api/tools/configure',
    json=new_config
)

if response.status_code == 200:
    print("✅ Configuration updated successfully")
else:
    print(f"❌ Error: {response.text}")

Metrics Collection

The web interface integrates with the existing Prometheus monitoring system:

• Tool Usage Metrics: Track which tools are most frequently used
• Configuration Changes: Monitor configuration update frequency
• UI Access: Track web interface usage patterns
• Error Rates: Monitor configuration errors and failures

Example Metrics:

# View metrics endpoint
curl http://localhost:8888/api/metrics

# Example response:
{
  "ui_server": {
    "uptime_seconds": 3600,
    "total_configurations": 15,
    "active_sessions": 2
  },
  "nexus_server": {
    "enabled_tools": 25,
    "total_tools": 120,
    "active_connections": 3
  }
}

Reverse Proxy with Authentication

# Example Nginx configuration for secured access
server {
    listen 80;
    server_name nexus-ui.yourdomain.com;
    
    # Basic authentication
    auth_basic "Nexus MCP UI";
    auth_basic_user_file /etc/nginx/.htpasswd;
    
    location / {
        proxy_pass http://localhost:8888;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        # WebSocket support for SSE
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

# Create authentication file
sudo htpasswd -c /etc/nginx/.htpasswd admin

UI Server Won't Start

# Check what's using port 8888
sudo netstat -tlnp | grep :8888

# Or use lsof
sudo lsof -i :8888

# Start on different port
python ui_server.py --port 8889

# Verify main server is running
curl http://localhost:9999/

# Check UI server logs
python ui_server.py --log-level DEBUG

# Verify configuration file exists
ls -la config.json

Debug Mode

# Run UI server in debug mode
python ui_server.py --debug

# Enable verbose logging
python ui_server.py --log-level DEBUG

# Check server status
python ui_server.py --status

Customization Options

The web interface supports customization through CSS variables and themes:

• Dark/Light Mode: Automatic theme switching based on system preference
• Custom CSS: Override styles with custom CSS files
• Responsive Design: Mobile-friendly interface
• Accessibility: ARIA labels and keyboard navigation support

Extending the Interface

The web interface can be extended with custom plugins:

# Example plugin structure
# plugins/custom_dashboard.py

class CustomDashboardPlugin:
    def __init__(self, ui_server):
        self.ui_server = ui_server
    
    def register_routes(self):
        @self.ui_server.app.route('/api/custom/dashboard')
        def custom_dashboard():
            return {"custom_data": "example"}
    
    def get_widget_html(self):
        return '''
        

            
Custom Dashboard
            
Your custom content here
        
        '''

# Load plugin
plugin = CustomDashboardPlugin(ui_server)
plugin.register_routes()