v2/examples/browser-dashboard/README.md
A browser-based real-time swarm orchestration dashboard that demonstrates WebAssembly potential for Claude Flow. This proof of concept shows how Claude Flow's multi-agent coordination could run entirely in the browser using WebSocket transport instead of stdio.
Key Features:
┌─────────────────────────────────────────────┐
│ Browser (Client) │
│ ┌──────────────────────────────────────┐ │
│ │ index.html (UI) │ │
│ │ dashboard.js (WebSocket Client) │ │
│ │ - Agent monitoring │ │
│ │ - Byzantine consensus tracker │ │
│ │ - Canvas visualization │ │
│ └──────────────────────────────────────┘ │
│ │ WebSocket │
│ ▼ │
└─────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────┐
│ Backend (Optional) │
│ ┌──────────────────────────────────────┐ │
│ │ server.js (WebSocket Bridge) │ │
│ │ - MCP command routing │ │
│ │ - Agent state management │ │
│ │ - Consensus simulation │ │
│ └──────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────┐ │
│ │ Claude Flow MCP Tools │ │
│ │ - agents_spawn_parallel │ │
│ │ - query_control │ │
│ │ - swarm_status │ │
│ │ - verify_consensus │ │
│ └──────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
index.html - Dashboard UI with real-time visualizationdashboard.js - WebSocket client and swarm monitoring logicserver.js - WebSocket bridge server (Node.js)README.md - This fileOpen index.html directly in your browser. The dashboard runs in simulation mode with mock data.
# Simple HTTP server
cd examples/browser-dashboard
python3 -m http.server 8080
# or
npx http-server -p 8080
# Open browser
open http://localhost:8080
Run the WebSocket bridge server to connect to real Claude Flow MCP tools.
# Install dependencies
cd examples/browser-dashboard
npm install ws
# Start WebSocket server
node server.js
# Server starts on http://localhost:8080
# Dashboard: http://localhost:8080/index.html
# WebSocket: ws://localhost:8080
Then open the dashboard and click "Connect to Server".
{
"jsonrpc": "2.0",
"method": "mcp__claude-flow__agents_spawn_parallel",
"params": {
"agents": [
{ "type": "researcher", "name": "Agent1", "priority": "high" }
],
"maxConcurrency": 5
},
"id": 1727654321000
}
{
"jsonrpc": "2.0",
"result": {
"success": true,
"agentsSpawned": 5,
"estimatedTime": "150ms"
},
"id": 1727654321000
}
{
"type": "agent_update",
"agent": {
"id": "agent-123",
"name": "Researcher-1",
"type": "researcher",
"status": "active"
}
}
This proof of concept demonstrates how Claude Flow could leverage the SDK's wasm32 compilation target:
Current State:
yoga.wasm (87KB) for layout renderingwasm32 listed in prebuilt platform targetsFuture Possibility:
// Hypothetical WASM deployment
import { query, createSdkMcpServer } from '@anthropic-ai/claude-code/wasm';
const swarmOrchestrator = createSdkMcpServer({
name: 'claude-flow-browser',
tools: [
tool('agents_spawn_parallel', ...),
tool('query_control', ...),
tool('verify_consensus', ...)
]
});
// Runs entirely in browser at ~80-90% native speed
const stream = query({
prompt: 'Spawn 20 agents and verify consensus',
mcpServers: [swarmOrchestrator]
});
Benefits:
Dashboard UI:
Simulated Operations:
Tested Browsers:
Requirements:
Current Implementation (PoC):
Production Requirements:
To integrate with real Claude Flow MCP tools, the server would:
const { createSdkMcpServer, tool } = require('@anthropic-ai/claude-code');
const claudeFlow = require('claude-flow');
const mcpServer = createSdkMcpServer({
name: 'claude-flow-websocket',
tools: [
tool('agents_spawn_parallel', ..., async (params) => {
return await claudeFlow.spawnParallel(params);
}),
tool('query_control', ..., async (params) => {
return await claudeFlow.queryControl(params);
})
]
});
ws.on('message', async (message) => {
const { method, params } = JSON.parse(message);
const result = await mcpServer.callTool(method, params);
ws.send(JSON.stringify({ result }));
});
Phase 1: PoC ✅ COMPLETE
Phase 2: Real Integration (Future)
Phase 3: WASM Deployment (Future)
Phase 4: Production (Future)
MIT - Same as Claude Flow
Built as proof of concept for Claude Flow v2.5.0-alpha.130+ demonstrating WebAssembly potential for browser-based multi-agent orchestration.
Related PRs:
Remember: This is a proof of concept demonstrating WebSocket-based browser orchestration. For production use, implement proper security, authentication, and error handling.