Multi-agent AI orchestration demo — watch agents decompose, coordinate, and execute tasks in real-time
An interactive web demo showcasing multi-agent AI workflow orchestration. Type a goal, and watch 8 specialized AI agents decompose the problem, coordinate execution, and synthesize results — all visualized in real-time.
Built to demonstrate how complex tasks can be broken down and handled by specialized agents working together, a core pattern in modern AI-driven development.
- 8 Specialized Agents — Orchestrator, Researcher, Analyst, Creative, Critic, Synthesizer, Coder, Planner
- 4 Workflow Templates — Research, Product Launch, Debug Incident, Content Strategy
- Real-time Visualization — Watch agent activation, task execution, and progress in the workflow canvas
- Live Activity Log — Terminal-style output showing every agent action with timestamps
- Smart Goal Classification — Automatically detects the type of goal and selects the right agent team
- Task Decomposition — Breaks complex goals into dependency-aware subtask graphs
- Result Synthesis — Merges multi-agent outputs into coherent deliverables
┌─────────────────────────────────────────┐
│ USER GOAL INPUT │
└──────────────────┬──────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ ORCHESTRATOR AGENT │
│ (Decomposes goal → subtask graph) │
└──────────────────┬──────────────────────┘
│
┌──────────┼──────────┐
▼ ▼ ▼
┌─────────┐ ┌─────────┐ ┌─────────┐
│RESEARCH │ │ANALYSIS │ │CREATIVE │
│ AGENT │ │ AGENT │ │ AGENT │
└────┬────┘ └────┬────┘ └────┬────┘
│ │ │
└──────────┼──────────┘
▼
┌─────────────────────────────────────────┐
│ SYNTHESIS AGENT │
│ (Merges outputs → coherent result) │
└──────────────────┬──────────────────────┘
▼
┌─────────────────────────────────────────┐
│ FINAL OUTPUT │
└─────────────────────────────────────────┘
# Clone
git clone https://github.com/kone344/agent-workflow-orchestrator.git
cd agent-workflow-orchestrator
# Open in browser
open index.html
# or
python3 -m http.server 8080No build step. No dependencies. Pure HTML/CSS/JS.
| Agent | Icon | Role | Capabilities |
|---|---|---|---|
| Orchestrator | 🧠 | Task Decomposition | Goal parsing, task graph, agent assignment |
| Researcher | 🔍 | Information Gathering | Web search, data extraction, source verification |
| Analyst | 📊 | Data Analysis | Pattern recognition, trend detection, risk assessment |
| Creative | 🎨 | Content Generation | Copywriting, brainstorming, brand voice |
| Critic | 🔎 | Quality Assurance | Fact checking, logic validation, bias detection |
| Synthesizer | ⚡ | Integration | Output merging, conflict resolution, formatting |
| Coder | 💻 | Technical Implementation | Code generation, architecture, debugging |
| Planner | 📋 | Strategic Planning | Timelines, resource allocation, milestones |
- Type a goal in the input field (or click a preset)
- Click Run Agent Swarm
- Watch agents activate, decompose tasks, and execute
- Review the synthesized result
- HTML5 — Semantic structure
- CSS3 — Dark theme, animations, responsive grid
- Vanilla JS — No frameworks, no build step
- SVG — Workflow connection lines
agent-workflow-orchestrator/
├── index.html # Main page structure
├── style.css # Dark theme, animations, responsive layout
├── agents.js # Agent definitions, templates, output generators
├── orchestrator.js # Workflow engine — classification, execution, results
├── ui.js # DOM controller — canvas, terminal, stats
├── README.md # This file
└── LICENSE # MIT
MIT