Claude Flow Web Portal

A modern React-based web dashboard for monitoring and managing Claude Flow AI agent orchestration.

Features

• 🎯 Real-time Dashboard - Monitor agent status, swarm health, and system metrics
• 🤖 Agent Management - Spawn, configure, and monitor individual agents
• 🐝 Swarm Coordination - View and manage swarm operations
• 📋 Task Queue - Track and manage task execution
• 🔧 Settings - Configure system preferences and API connections
• 🌓 Dark Mode - Toggle between light and dark themes
• 📱 Responsive Design - Works on desktop and mobile devices

Prerequisites

• Node.js 18+
• Claude Flow CLI installed and running (for backend API)

Quick Start

Installation

# Clone the repository
git clone https://github.com/ruvnet/claude-flow-web-portal.git
cd claude-flow-web-portal

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env

# Edit .env with your Claude Flow API URL
# VITE_API_URL=http://localhost:3000/api
# VITE_WS_URL=ws://localhost:3000

Development

# Start development server
npm run dev

# The app will be available at http://localhost:3001

Production

# Build for production
npm run build

# Serve the built app
npm run serve

# Or preview the build
npm run preview

Configuration

Environment Variables

| Variable | Default | Description | |----------|---------|-------------| | VITE_API_URL | http://localhost:3000/api | Claude Flow API endpoint | | VITE_WS_URL | ws://localhost:3000 | WebSocket endpoint | | VITE_DEV_MODE | true | Enable development features | | VITE_LOG_LEVEL | debug | Logging level |

API Connection

The web portal connects to a running Claude Flow instance. Make sure:

1. Claude Flow CLI is installed: npm install -g claude-flow-novice
2. Start the API server: claude-flow-novice start --port 3000
3. Update your .env file with the correct API URL

Architecture

src/
├── components/     # Reusable React components
├── contexts/       # React contexts (WebSocket, Theme)
├── pages/          # Page components
├── services/       # API service layer
├── hooks/          # Custom React hooks
├── utils/          # Utility functions
├── types/          # TypeScript type definitions
└── assets/         # Static assets

Features Overview

Dashboard

• System overview with key metrics
• Real-time agent status
• Performance monitoring
• Recent activity feed

Agent Management

• View all active agents
• Spawn new agents
• Configure agent parameters
• Monitor agent performance

Swarm Status

• Real-time swarm health
• Agent coordination visualization
• Resource utilization graphs

Task Queue

• View pending and running tasks
• Task priority management
• Execution history

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

License

MIT © rUv

Support

• 📖 Documentation
• 🐛 Issues
• 💬 Discussions