Implement MCP WebSocket Integration for Web UI Dashboard (87 Tools)
- 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
Assessment
This issue has not been assessed yet.