How jasper-zh/multi-agent-playground works
Multi-Agent Playground is a browser and Electron application for configuring agents and model settings, assembling workflows, and running them with streamed traces and saved conversations. The principal path is user interaction in the Vue app → backend API → workflow execution → model/tool activity → run results and conversation history. The README documents five workflow types and installed skills; the graph preserves those branches, plus settings, SkillHub sync, and desktop launch. Some route and runtime wiring is unsampled, so only documented or excerpt-supported links are shown.
Main entry points: routes.py FastAPI Routes · App.vue Vue App · runtime.py LLM Runtime · main.py Backend Service
Components 21
User Interface
- Vue App
frontend/src/App.vue - API Client
frontend/src/api.js - Agent Manager
frontend/src/components/AgentManager.vue - Workflow Manager
frontend/src/components/WorkflowManager.vue - Chat Runner
frontend/src/components/ChatRunner.vue - Graph and Trace Views
frontend/src/components/GraphViewer.vue - Settings Page
frontend/src/pages/SettingsPage.vue
Backend API
- FastAPI Routes
backend/app/routes.py - SQLite Store
backend/app/store.py - Settings Bridge
backend/app/settings_bridge.py - Backend Service
backend/app/main.py
Workflow Execution
- Single-Agent Chat
backend/app/workflows/single_agent_chat/workflow.py - Router Specialists
backend/app/workflows/router_specialists/workflow.py - Planner Executor
backend/app/workflows/planner_executor/workflow.py - Dynamic Supervisor
backend/app/workflows/supervisor_dynamic/workflow.py - Peer Handoff
backend/app/workflows/peer_handoff/workflow.py
Models and Skills
- LLM Runtime
backend/app/runtime.py - Local Skills
backend/skills - SkillHub
Desktop App
- Electron Launcher
desktop/main.cjs
Other components
- User
Connections 26
- User → Vue App: interacts
- Vue App → API Client: requests data
- API Client → FastAPI Routes: calls API
- Vue App → Agent Manager: manages agents
- Vue App → Workflow Manager: manages workflows
- Vue App → Chat Runner: runs chat
- Vue App → Graph and Trace Views: shows graph and trace
- Vue App → Settings Page: edits settings
- FastAPI Routes → SQLite Store: reads and writes
- FastAPI Routes → Settings Bridge: normalizes settings
- FastAPI Routes → SkillHub: fetches skills
- FastAPI Routes → Local Skills: validates installed skills
- FastAPI Routes → Single-Agent Chat: dispatches runs
- FastAPI Routes → Router Specialists: dispatches runs
- FastAPI Routes → Planner Executor: dispatches runs
- FastAPI Routes → Dynamic Supervisor: dispatches runs
- FastAPI Routes → Peer Handoff: dispatches runs
- Single-Agent Chat → LLM Runtime: requests model
- Router Specialists → LLM Runtime: requests model
- Planner Executor → LLM Runtime: requests model
- Dynamic Supervisor → LLM Runtime: requests model
- Peer Handoff → LLM Runtime: requests model
- Backend Service → FastAPI Routes: mounts routes
- Backend Service → SQLite Store: seeds and reads settings
- Electron Launcher → Backend Service: starts service
- Electron Launcher → Vue App: opens interface