mindXdashboard/docs/book/journal/api/dojo/inference/governance/origin
philosophymanifestothesisoriginwhitepaperataraxiaroadmappress|archovervieworchestrationcodebasehierarchycore|agentsmindXagentceomastermindbdievolutionauthorall
govdaiocivilizationidentitysecurity|memorypgvectorembedaglmmemory|inferencevllmollamamistralgemini|timeoracle
toolsindextoolsa2amcpshell|publishauthoragentbookjournal|deployproductionsecuritymonitoring|apireferenceswagger|learnusageguidehackathon
mindxfrontend.md · 12.1 KB

MindX Frontend Documentation

Overview

The MindX Frontend is a sophisticated web-based control panel for managing the MindX Augmentic Intelligence system. It provides a cyberpunk-themed interface with real-time monitoring, agent management, and system control capabilities.

Architecture

Frontend Components

mindx_frontend_ui/
├── index.html          # Main application interface
├── app.js             # Core JavaScript functionality (34,341+ tokens)
├── styles3.css        # Enhanced cyberpunk styling
├── styles.css         # Fallback basic styling
├── corporate.css      # Corporate theme styling
├── server.js          # Express.js static server
├── package.json       # Node.js dependencies
├── debug.html         # Debug interface
└── test.html          # Test interface

Technology Stack

Installation & Setup

Prerequisites

Quick Start

  1. Start the frontend:
   ./mindX.sh --frontend
  1. Access the interface:
- Main Interface: http://localhost:3000 - Debug Interface: http://localhost:3000/debug.html - Test Interface: http://localhost:3000/test.html

Manual Setup

  1. Install dependencies:
   cd mindx_frontend_ui
   npm install
  1. Start the server:
   node server.js

Configuration

Environment Variables

Port Configuration

The frontend automatically detects and configures ports:

User Interface

Main Interface Features

Navigation Tabs

Visual Design

- Primary: Electric blue (#00ffff) - Secondary: Neon green (#00ff00) - Accent: Hot pink (#ff00ff) - Background: Dark (#0a0a0a)

Real-time Updates

API Integration

Complete REST API Endpoints

The frontend communicates with the MindX backend through a comprehensive REST API. The system has two main API servers:

Primary API Server (api/api_server.py) - Version 2.0.0

System & Commands

Coordinator

Agents

Identities

Core Agent Activity

Legacy API Server (mindx_backend_service/main_service.py) - Version 1.3.4

Commands

Status & Registry

Identities

Coordinator

Agents

Core & BDI

Simple Coder

Logs

Root

API Request Examples

System Status

fetch('/system/status')
  .then(response => response.json())
  .then(data => console.log(data));

Evolve System

fetch('/system/evolve', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ directive: 'Improve the user interface' })
})
.then(response => response.json())
.then(data => console.log(data));

Query Coordinator

fetch('/coordinator/query', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ query: 'What is the current system status?' })
})
.then(response => response.json())
.then(data => console.log(data));

Create Agent

fetch('/agents/', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    agent_type: 'custom_agent',
    agent_id: 'my_agent_001',
    config: { capability: 'analysis' }
  })
})
.then(response => response.json())
.then(data => console.log(data));

AGInt Streaming

const eventSource = new EventSource('/commands/agint/stream');
eventSource.onmessage = function(event) {
  const data = JSON.parse(event.data);
  console.log('AGInt Update:', data);
};

Features

Agent Management

System Monitoring

Command Interface

Debug Tools

Development

Code Structure

app.js - Main Application Logic

- Tab management and navigation - Real-time data updates - API communication - UI state management - Event handling

styles3.css - Enhanced Styling

- Responsive design - Animation effects - Color schemes - Typography

server.js - Express Server

- Static file serving - CORS configuration - Error handling - Logging

Customization

Themes

Configuration

Troubleshooting

Common Issues

Port Conflicts

# Check if port is in use
lsof -i :3000


Kill process using port

kill -9 $(lsof -t -i:3000)

Backend Connection Issues

Dependency Issues

# Clear npm cache
npm cache clean --force


Reinstall dependencies

rm -rf node_modules package-lock.json
npm install

Debug Mode

Enable debug mode for detailed logging: 

DEBUG=true node server.js

Security

CORS Configuration

Command Execution

API Security

Performance

Optimization Features

Monitoring

Future Enhancements

Planned Features

Architecture Improvements

Contributing

Development Setup

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Test thoroughly
  5. Submit a pull request

Code Standards

License

This project is part of the MindX Augmentic Intelligence system. See the main project license for details.

Support

For issues and questions:

Last updated: 2025-01-15 Version: 2.0.0

All DocumentsDocument IndexThe Book of mindXImprovement JournalAPI Reference