ruvnet / ruvnet/ruflo

Implement MCP WebSocket Integration for Web UI Dashboard (87 Tools)

Open
#452 7 comments 0 reactions 1 assignee Claimed by @ruvnet View on GitHub
Dominant language
TypeScript
Stars
72.7k
Forks
8.6k
Avg merge
2d 23h
Merged PRs (30d)
83

Description

# Implement MCP WebSocket Integration for Web UI Dashboard

## Overview
Currently, the Agentic Flow UI executes MCP tools via CLI (`npx claude-flow@alpha`) instead of using the proper MCP protocol over WebSocket. This issue tracks the implementation of a full MCP WebSocket integration for all 87 tools in the web UI dashboard.

## Current State
- Tools are executed via CLI spawn process in `server.js`
- No real MCP protocol implementation
- Missing proper JSON-RPC communication
- No WebSocket-based MCP server connection

## Required Implementation

### 1. MCP WebSocket Server
- Implement MCP server that listens on WebSocket (suggested port: 3008)
- Support JSON-RPC 2.0 protocol as per MCP specification
- Handle tool discovery, execution, and response streaming
- Implement proper error handling and connection management

### 2. MCP Client Integration
Replace current CLI execution with proper MCP client that:
- Connects to MCP server via WebSocket
- Sends proper JSON-RPC requests
- Handles streaming responses
- Manages connection lifecycle

### 3. Tool Definitions with Parameters
All 87 tools need proper parameter definitions and validation:

#### Coordination Tools (9 tools)
- **swarm_init**: `topology*`, `maxAgents`, `strategy`
- **agent_spawn**: `type*`, `name`, `capabilities`, `swarmId`
- **task_orchestrate**: `task*`, `strategy`, `priority`, `dependencies`
- **swarm_status**: `swarmId`
- **swarm_scale**: `swarmId`, `targetSize`
- **swarm_destroy**: `swarmId*`
- **coordination_sync**: `swarmId`
- **topology_optimize**: `swarmId`
- **load_balance**: `swarmId`, `tasks`

#### Neural Tools (15 tools)
- **neural_status**: `modelId`
- **neural_train**: `pattern_type*`, `training_data*`, `epochs`
- **neural_patterns**: `action*`, `operation`, `outcome`, `metadata`
- **neural_predict**: `modelId*`, `input*`
- **neural_compress**: `modelId*`, `ratio`
- **neural_explain**: `modelId*`, `prediction*`
- **model_load**: `modelPath*`
- **model_save**: `modelId*`, `path*`
- **wasm_optimize**: `operation`
- **inference_run**: `modelId*`, `data*`
- **pattern_recognize**: `data*`, `patterns`
- **cognitive_analyze**: `behavior*`
- **learning_adapt**: `experience*`
- **ensemble_create**: `models*`, `strategy`
- **transfer_learn**: `sourceModel*`, `targetDomain*`

#### Memory Tools (11 tools)
- **memory_usage**: `action*`, `key`, `value`, `namespace`, `ttl`
- **memory_search**: `pattern*`, `namespace`, `limit`
- **memory_persist**: `sessionId`
- **memory_namespace**: `namespace*`, `action*`
- **memory_backup**: `path`
- **memory_restore**: `backupPath*`
- **memory_compress**: `namespace`
- **memory_sync**: `target*`
- **cache_manage**: `action*`, `key`
- **state_snapshot**: `name`
- **context_restore**: `snapshotId*`
- **memory_analytics**: `timeframe`

#### Monitoring Tools (5 tools)
- **agent_list**: `swarmId`
- **agent_metrics**: `agentId`
- **swarm_monitor**: `swarmId`, `interval`
- **task_status**: `taskId*`
- **task_results**: `taskId*`

#### Performance Tools (10 tools)
- **performance_report**: `timeframe`, `format`
- **bottleneck_analyze**: `component`, `metrics`
- **token_usage**: `operation`, `timeframe`
- **benchmark_run**: `suite`
- **metrics_collect**: `components`
- **trend_analysis**: `metric*`, `period`
- **cost_analysis**: `timeframe`
- **quality_assess**: `target*`, `criteria`
- **error_analysis**: `logs`
- **usage_stats**: `component`
- **health_check**: `components`

#### Workflow Tools (9 tools)
- **workflow_create**: `name*`, `steps*`, `triggers`
- **workflow_execute**: `workflowId*`, `params`
- **workflow_export**: `workflowId*`, `format`
- **automation_setup**: `rules*`
- **pipeline_create**: `config*`
- **scheduler_manage**: `action*`, `schedule`
- **trigger_setup**: `events*`, `actions*`
- **workflow_template**: `action*`, `template`
- **batch_process**: `items*`, `operation*`
- **parallel_execute**: `tasks*`

#### GitHub Tools (7 tools)
- **github_repo_analyze**: `repo*`, `analysis_type`
- **github_pr_manage**: `repo*`, `pr_number`, `action*`
- **github_issue_track**: `repo*`, `action*`
- **github_release_coord**: `repo*`, `version*`
- **github_workflow_auto**: `repo*`, `workflow*`
- **github_code_review**: `repo*`, `pr*`
- **github_sync_coord**: `repos*`
- **github_metrics**: `repo*`

#### DAA Tools (7 tools)
- **daa_agent_create**: `agent_type*`, `capabilities`, `resources`
- **daa_capability_match**: `task_requirements*`, `available_agents`
- **daa_resource_alloc**: `resources*`, `agents`
- **daa_lifecycle_manage**: `agentId*`, `action*`
- **daa_communication**: `from*`, `to*`, `message*`
- **daa_consensus**: `agents*`, `proposal*`
- **daa_fault_tolerance**: `agentId*`, `strategy`
- **daa_optimization**: `target*`, `metrics`

#### System Tools (12 tools)
- **terminal_execute**: `command*`, `args`
- **config_manage**: `action*`, `config`
- **features_detect**: `component`
- **security_scan**: `target*`, `depth`
- **backup_create**: `components`, `destination`
- **restore_system**: `backupId*`
- **log_analysis**: `logFile*`, `patterns`
- **diagnostic_run**: `components`
- **sparc_mode**: `mode*`, `task_description*`, `options`

Note: * indicates required parameters

### 4. UI Components Update
- Update `MCPTools.tsx` to use WebSocket client
- Remove CLI execution logic from `mcp-bridge.ts`
- Add real-time streaming support for long-running tools
- Implement proper loading states and error handling

### 5. Server Implementation
Replace `server.js` MCP handler with:
- WebSocket server for MCP protocol
- JSON-RPC request/response handling
- Tool registry with parameter validation
- Streaming response support
- Connection management

## Technical Requirements

### MCP Protocol Implementation
- Follow MCP specification: https://modelcontextprotocol.io/docs
- Implement JSON-RPC 2.0 over WebSocket
- Support tool discovery via `tools/list` method
- Handle `tools/call` with proper parameter validation
- Stream responses for long-running operations

### WebSocket Architecture
```
UI (MCPTools.tsx) <--> WebSocket Client <--> MCP WebSocket Server <--> Claude Flow Core
```

### Message Format
```json
{
"jsonrpc": "2.0",
"method": "tools/call",
"params": {
"name": "swarm_init",
"arguments": {
"topology": "mesh",
"maxAgents": 5,
"strategy": "balanced"
}
},
"id": "unique-request-id"
}
```

## Implementation Plan for 5-Agent Swarm

### Agent 1: MCP Server Implementation
- Create WebSocket MCP server
- Implement JSON-RPC handler
- Tool registry system
- Connection management

### Agent 2: Client Integration
- WebSocket client in browser
- Update mcp-bridge.ts
- Remove CLI execution
- Add streaming support

### Agent 3: Tool Definitions
- Define all 87 tools with parameters
- Implement validation logic
- Create tool schemas
- Parameter type checking

### Agent 4: UI Updates
- Update MCPTools.tsx component
- Add streaming response display
- Improve error handling
- Real-time status updates

### Agent 5: Testing & Documentation
- Integration tests for all tools
- WebSocket connection tests
- Parameter validation tests
- Update documentation

## Acceptance Criteria
- [ ] All 87 tools executable via MCP WebSocket
- [ ] No CLI execution in the web UI
- [ ] Proper parameter validation for all tools
- [ ] Real-time streaming for long operations
- [ ] Error handling and recovery
- [ ] Connection state management
- [ ] Full MCP protocol compliance
- [ ] Comprehensive test coverage

## Resources
- MCP Specification: https://modelcontextprotocol.io/
- Current Implementation: `/ui/agentic-flow/server.js`
- Tool Definitions: `/ui/agentic-flow/src/api/mcp-bridge.ts`
- UI Component: `/ui/agentic-flow/src/components/mcp/MCPTools.tsx`

## Related Issues
- Parent issue: #[original-issue-number]
- Implements proper MCP protocol as requested in the original Agentic Flow UI issue

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.