┌─────────────────────────────────────────────────────────────────┐
│ VS Code + GitHub Copilot │
│ │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ InvoiceAI-Frontend│ │ InvoiceAI-Backend│ │
│ │ (Agent 1) │ │ (Agent 2) │ │
│ │ │ │ │ │
│ │ Role: frontend │ │ Role: backend │ │
│ │ Tasks: UI work │ │ Tasks: API work │ │
│ └────────┬─────────┘ └────────┬─────────┘ │
└───────────┼──────────────────────────────────┼──────────────────┘
│ │
│ REST API Calls │
│ (HTTP/JSON) │
│ │
▼ ▼
┌─────────────────────────────────────────────────────────────────┐
│ MCP Server (Port 8080) │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ REST API Layer │ │
│ │ /api/projects /api/agents /api/tasks /api/contexts │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Business Logic Layer │ │
│ │ • Project Management │ │
│ │ • Agent Registration & Status │ │
│ │ │ • Task Creation & Assignment │ │
│ │ • Context/Documentation Storage │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ WebSocket Hub (Real-time) │ │
│ │ • Live task updates │ │
│ │ • Agent status changes │ │
│ │ • Collaboration events │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │ │
└──────────────────────────────┼───────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ PostgreSQL Database (Port 5433) │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ projects │ │ agents │ │ tasks │ │
│ ├──────────────┤ ├──────────────┤ ├──────────────┤ │
│ │ id │ │ id │ │ id │ │
│ │ name │ │ project_id │ │ project_id │ │
│ │ description │ │ name │ │ agent_id │ │
│ │ status │ │ role │ │ title │ │
│ │ created_at │ │ team │ │ status │ │
│ │ updated_at │ │ status │ │ priority │ │
│ └──────────────┘ │ last_seen │ │ dependencies │ │
│ │ created_at │ │ created_at │ │
│ └──────────────┘ │ updated_at │ │
│ └──────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ contexts │ │
│ ├──────────────────────────────────────────────────────┤ │
│ │ id │ │
│ │ task_id │ │
│ │ context (Documentation, notes, implementation details)│ │
│ │ created_at │ │
│ └──────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Developer Workflow │
└─────────────────────────────────────────────────────────────────┘
1. Setup Phase
┌─────────────────────────────────────────────────────────┐
│ $ docker-compose up -d │
│ ✓ MCP Server starts │
│ ✓ PostgreSQL starts │
└─────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ $ .\scripts\setup-agent.ps1 -Interactive │
│ → Create Project: "InvoiceAI" │
│ → Register Agent: "InvoiceAI-Frontend" │
│ → Role: frontend │
│ ✓ agent-config.json created │
│ ✓ agent-helper script created │
└─────────────────────────────────────────────────────────┘
2. Development Phase
┌─────────────────────────────────────────────────────────┐
│ $ . .\agent-helper-InvoiceAI-Frontend.ps1 │
│ ✓ Helper functions loaded │
└─────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ $ Get-MyTasks │
│ → Fetches tasks assigned to this agent │
└─────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ $ New-Task -Title "Build invoice form" -Priority "high"│
│ → Creates new task in MCP system │
│ ✓ Task created with ID │
└─────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ $ Update-TaskStatus -TaskId "xxx" -Status "in_progress"│
│ → Agent starts working on the task │
└─────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ Developer works with AI assistant (Copilot) │
│ • Copilot knows the agent identity │
│ • Can check task list │
│ • Aware of project context │
└─────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ $ Add-TaskContext -TaskId "xxx" -Context "..." │
│ → Documents implementation details │
│ → Shares knowledge with other agents │
└─────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ $ Update-TaskStatus -TaskId "xxx" -Status "done" │
│ → Marks task as complete │
│ ✓ Other agents notified (via WebSocket) │
└─────────────────────────────────────────────────────────┘
3. Collaboration Phase
┌─────────────────────────────────────────────────────────┐
│ Frontend Agent Backend Agent │
│ │
│ Task: Build Invoice UI → Task: Create Invoice API│
│ Status: Pending Status: In Progress │
│ Waiting for API... Working... │
│ │
│ ← API Complete! │
│ Status: Done │
│ Context: API docs shared│
│ │
│ Task Status: In Progress │
│ Uses shared API context │
│ Builds UI components │
│ │
│ Task Complete! │
│ Context: UI patterns shared │
└─────────────────────────────────────────────────────────┘
┌──────────────┐ ┌──────────────┐
│ Agent 1 │ │ Agent 2 │
│ (Frontend) │ │ (Backend) │
└──────┬───────┘ └──────┬───────┘
│ │
│ POST /api/tasks │
│ { title: "Build Invoice Form" } │
├──────────────────────►│ │
│ │ │
│ 201 Created │ │
│ { id: "task-123" } │ │
│◄──────────────────────┤ │
│ │ │
│ │ POST /api/tasks │
│ │ { title: "Create API" } │
│ │◄─────────────────────────┤
│ │ │
│ │ 201 Created │
│ ├─────────────────────────►│
│ │ │
│ WebSocket Connection │ WebSocket Connection │
├──────────────────────►│◄─────────────────────────┤
│ │ │
│ │ PUT /api/tasks/xxx/status│
│ │ { status: "done" } │
│ │◄─────────────────────────┤
│ │ │
│ ◄─── WS Event ────────┤ │
│ { type: "task_complete", task_id: "xxx" } │
│ │ │
│ GET /api/tasks/xxx/documentation │
├──────────────────────►│ │
│ │ │
│ 200 OK (API docs) │ │
│◄──────────────────────┤ │
│ │ │
│ Now can start UI work │ │
│ │ │
┌─────────────────────────────────────────────────────────────────┐
│ Project Level │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Project: InvoiceAI │ │
│ │ ID: 2da7e7e6-0f8c-4f33-9ae8-f3dfb6f0ec8a │ │
│ │ Status: active │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │ │
│ ┌─────────────────┴─────────────────┐ │
│ ▼ ▼ │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ Agent: Frontend │ │ Agent: Backend │ │
│ │ ID: 8f3e7b1c... │ │ ID: 9a2b3c4d... │ │
│ │ Role: frontend │ │ Role: backend │ │
│ │ Status: active │ │ Status: active │ │
│ └────────┬─────────┘ └────────┬─────────┘ │
│ │ │ │
│ ┌───────┴───────┐ ┌───────┴───────┐ │
│ ▼ ▼ ▼ ▼ │
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │Task 1│ │Task 2│ │Task 3│ │Task 4│ │
│ │UI │ │Forms │ │API │ │Auth │ │
│ └──┬───┘ └──┬───┘ └──┬───┘ └──┬───┘ │
│ │ │ │ │ │
│ ▼ ▼ ▼ ▼ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Context/Documentation │ │
│ │ • Implementation notes │ │
│ │ • Code patterns │ │
│ │ • API contracts │ │
│ │ • Shared between agents │ │
│ └──────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
InvoiceAI Project Timeline
Backend Tasks (InvoiceAI-Backend)
├─ [✓] Setup Database Schema
├─ [✓] Create Invoice API Endpoints
│ └─ POST /api/invoices
│ └─ GET /api/invoices
│ └─ GET /api/invoices/:id
│ └─ PUT /api/invoices/:id
│ └─ DELETE /api/invoices/:id
└─ [⏳] Add Invoice Validation
Frontend Tasks (InvoiceAI-Frontend)
├─ [⏸️] Setup React Project (pending backend API)
│ ↑ depends on: "Create Invoice API Endpoints"
├─ [⏸️] Build Invoice List Component (pending backend API)
│ ↑ depends on: "Create Invoice API Endpoints"
├─ [⏸️] Build Invoice Form (pending backend API)
│ ↑ depends on: "Create Invoice API Endpoints"
└─ [ ] Add Invoice Export Feature
Legend:
[✓] Done
[⏳] In Progress
[⏸️] Blocked (waiting on dependency)
[ ] Pending
Time: 10:00 AM
┌─────────────────────────────────────────────────────────────────┐
│ Backend Agent (InvoiceAI-Backend) │
│ $ Get-MyTasks │
│ → Task: "Create Invoice REST API" [in_progress] │
│ │
│ [Working with Copilot to generate API endpoints...] │
└─────────────────────────────────────────────────────────────────┘
Time: 10:30 AM
┌─────────────────────────────────────────────────────────────────┐
│ Backend Agent completes API │
│ $ Update-TaskStatus -TaskId "xxx" -Status "done" │
│ $ Add-TaskContext -TaskId "xxx" -Context "API Documentation..." │
│ │
│ ✓ WebSocket notification sent to all agents │
└─────────────────────────────────────────────────────────────────┘
│
▼ (Real-time notification)
┌─────────────────────────────────────────────────────────────────┐
│ Frontend Agent (InvoiceAI-Frontend) │
│ 🔔 Notification: "InvoiceAI-Backend completed Create Invoice API"│
│ │
│ $ Get-MyTasks │
│ → Task: "Build Invoice List" [pending] ✓ Can now start! │
│ │
│ $ Update-TaskStatus -TaskId "yyy" -Status "in_progress" │
│ [Starts working with Copilot using API documentation...] │
└─────────────────────────────────────────────────────────────────┘
Time: 11:00 AM
┌─────────────────────────────────────────────────────────────────┐
│ Frontend Agent │
│ $ Add-TaskContext -TaskId "yyy" -Context "UI Components..." │
│ $ Update-TaskStatus -TaskId "yyy" -Status "done" │
│ │
│ Both agents have shared knowledge base! │
└─────────────────────────────────────────────────────────────────┘
- Coordination: Agents know what others are working on
- Context Sharing: Documentation shared between agents
- Dependency Management: Tasks blocked until dependencies complete
- Real-time Updates: WebSocket notifications for collaboration
- Accountability: Track who did what and when
- Knowledge Base: Accumulated context helps onboarding new agents
For full setup instructions, see AGENT_SETUP_GUIDE.md