# jasper-zh/multi-agent-playground architecture

> Architecture diagram of the GitHub repository jasper-zh/multi-agent-playground, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jasper-zh/multi-agent-playground
- Repository: https://github.com/jasper-zh/multi-agent-playground

## Overview

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: [`backend/app/routes.py`](https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/routes.py) (FastAPI Routes), [`frontend/src/App.vue`](https://github.com/jasper-zh/multi-agent-playground/blob/main/frontend/src/App.vue) (Vue App), [`backend/app/runtime.py`](https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/runtime.py) (LLM Runtime), [`backend/app/main.py`](https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/main.py) (Backend Service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["User Interface"]
  node_app["Vue App<br/>[App.vue]"]
  node_api_client["API Client<br/>[api.js]"]
  node_agent_ui["Agent Manager<br/>[AgentManager.vue]"]
  node_workflow_ui["Workflow Manager"]
  node_chat_ui["Chat Runner<br/>[ChatRunner.vue]"]
  node_graph_ui["Graph and Trace Views<br/>[GraphViewer.vue]"]
  node_settings_ui["Settings Page<br/>[SettingsPage.vue]"]
end

subgraph group_api["Backend API"]
  node_api["FastAPI Routes<br/>[routes.py]"]
  node_store[("SQLite Store<br/>[store.py]")]
  node_settings["Settings Bridge<br/>[settings_bridge.py]"]
  node_backend_service["Backend Service<br/>[main.py]"]
end

subgraph group_execution["Workflow Execution"]
  node_single["Single-Agent Chat<br/>[workflow.py]"]
  node_router["Router Specialists<br/>[workflow.py]"]
  node_planner["Planner Executor<br/>[workflow.py]"]
  node_supervisor["Dynamic Supervisor<br/>[workflow.py]"]
  node_handoff["Peer Handoff<br/>[workflow.py]"]
end

subgraph group_integrations["Models and Skills"]
  node_runtime["LLM Runtime<br/>[runtime.py]"]
  node_skills["Local Skills"]
  node_skillhub["SkillHub"]
end

subgraph group_desktop["Desktop App"]
  node_desktop["Electron Launcher<br/>[main.cjs]"]
end

node_user(("User"))

node_user -->|"interacts"| node_app
node_app -->|"requests data"| node_api_client
node_api_client -->|"calls API"| node_api
node_app -->|"manages agents"| node_agent_ui
node_app -->|"manages workflows"| node_workflow_ui
node_app -->|"runs chat"| node_chat_ui
node_app -->|"shows graph and trace"| node_graph_ui
node_app -->|"edits settings"| node_settings_ui
node_api -->|"reads and writes"| node_store
node_api -->|"normalizes settings"| node_settings
node_api -.->|"fetches skills"| node_skillhub
node_api -->|"validates installed skills"| node_skills
node_api -->|"dispatches runs"| node_single
node_api -->|"dispatches runs"| node_router
node_api -->|"dispatches runs"| node_planner
node_api -->|"dispatches runs"| node_supervisor
node_api -->|"dispatches runs"| node_handoff
node_single -->|"requests model"| node_runtime
node_router -->|"requests model"| node_runtime
node_planner -->|"requests model"| node_runtime
node_supervisor -->|"requests model"| node_runtime
node_handoff -->|"requests model"| node_runtime
node_backend_service -->|"mounts routes"| node_api
node_backend_service -->|"seeds and reads settings"| node_store
node_desktop -->|"starts service"| node_backend_service
node_desktop -->|"opens interface"| node_app

click node_app "https://github.com/jasper-zh/multi-agent-playground/blob/main/frontend/src/App.vue"
click node_api_client "https://github.com/jasper-zh/multi-agent-playground/blob/main/frontend/src/api.js"
click node_agent_ui "https://github.com/jasper-zh/multi-agent-playground/blob/main/frontend/src/components/AgentManager.vue"
click node_workflow_ui "https://github.com/jasper-zh/multi-agent-playground/blob/main/frontend/src/components/WorkflowManager.vue"
click node_chat_ui "https://github.com/jasper-zh/multi-agent-playground/blob/main/frontend/src/components/ChatRunner.vue"
click node_graph_ui "https://github.com/jasper-zh/multi-agent-playground/blob/main/frontend/src/components/GraphViewer.vue"
click node_settings_ui "https://github.com/jasper-zh/multi-agent-playground/blob/main/frontend/src/pages/SettingsPage.vue"
click node_api "https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/routes.py"
click node_store "https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/store.py"
click node_settings "https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/settings_bridge.py"
click node_single "https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/workflows/single_agent_chat/workflow.py"
click node_router "https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/workflows/router_specialists/workflow.py"
click node_planner "https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/workflows/planner_executor/workflow.py"
click node_supervisor "https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/workflows/supervisor_dynamic/workflow.py"
click node_handoff "https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/workflows/peer_handoff/workflow.py"
click node_runtime "https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/runtime.py"
click node_skills "https://github.com/jasper-zh/multi-agent-playground/tree/main/backend/skills"
click node_desktop "https://github.com/jasper-zh/multi-agent-playground/blob/main/desktop/main.cjs"
click node_backend_service "https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/main.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_api_client,node_agent_ui,node_workflow_ui,node_chat_ui,node_graph_ui,node_settings_ui,node_user toneBlue
class node_api,node_store,node_settings,node_backend_service toneAmber
class node_single,node_router,node_planner,node_supervisor,node_handoff toneMint
class node_runtime,node_skills,node_skillhub toneRose
class node_desktop toneIndigo
```

## Components

### User Interface

- [Vue App](https://github.com/jasper-zh/multi-agent-playground/blob/main/frontend/src/App.vue): `frontend/src/App.vue`
- [API Client](https://github.com/jasper-zh/multi-agent-playground/blob/main/frontend/src/api.js): `frontend/src/api.js`
- [Agent Manager](https://github.com/jasper-zh/multi-agent-playground/blob/main/frontend/src/components/AgentManager.vue): `frontend/src/components/AgentManager.vue`
- [Workflow Manager](https://github.com/jasper-zh/multi-agent-playground/blob/main/frontend/src/components/WorkflowManager.vue): `frontend/src/components/WorkflowManager.vue`
- [Chat Runner](https://github.com/jasper-zh/multi-agent-playground/blob/main/frontend/src/components/ChatRunner.vue): `frontend/src/components/ChatRunner.vue`
- [Graph and Trace Views](https://github.com/jasper-zh/multi-agent-playground/blob/main/frontend/src/components/GraphViewer.vue): `frontend/src/components/GraphViewer.vue`
- [Settings Page](https://github.com/jasper-zh/multi-agent-playground/blob/main/frontend/src/pages/SettingsPage.vue): `frontend/src/pages/SettingsPage.vue`

### Backend API

- [FastAPI Routes](https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/routes.py): `backend/app/routes.py`
- [SQLite Store](https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/store.py): `backend/app/store.py`
- [Settings Bridge](https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/settings_bridge.py): `backend/app/settings_bridge.py`
- [Backend Service](https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/main.py): `backend/app/main.py`

### Workflow Execution

- [Single-Agent Chat](https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/workflows/single_agent_chat/workflow.py): `backend/app/workflows/single_agent_chat/workflow.py`
- [Router Specialists](https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/workflows/router_specialists/workflow.py): `backend/app/workflows/router_specialists/workflow.py`
- [Planner Executor](https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/workflows/planner_executor/workflow.py): `backend/app/workflows/planner_executor/workflow.py`
- [Dynamic Supervisor](https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/workflows/supervisor_dynamic/workflow.py): `backend/app/workflows/supervisor_dynamic/workflow.py`
- [Peer Handoff](https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/workflows/peer_handoff/workflow.py): `backend/app/workflows/peer_handoff/workflow.py`

### Models and Skills

- [LLM Runtime](https://github.com/jasper-zh/multi-agent-playground/blob/main/backend/app/runtime.py): `backend/app/runtime.py`
- [Local Skills](https://github.com/jasper-zh/multi-agent-playground/tree/main/backend/skills): `backend/skills`
- **SkillHub**

### Desktop App

- [Electron Launcher](https://github.com/jasper-zh/multi-agent-playground/blob/main/desktop/main.cjs): `desktop/main.cjs`

### Other components

- **User**

## Connections

- 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