Multi-Agent Code Assistant - Project Structure

This is the complete project structure for our mock multi-agent system that will be used in Module 1 of the DevContainers workshop.

📁 Project Structure

multi-agent-assistant/
├── backend/
│   ├── main.py              # FastAPI backend with mock agents
│   └── requirements.txt     # Python dependencies
├── frontend/
│   ├── public/
│   │   └── vite.svg        # Default Vite icon (auto-generated)
│   ├── src/
│   │   ├── App.jsx         # Main React component
│   │   ├── App.css         # Component styles
│   │   ├── main.jsx        # React entry point
│   │   └── index.css       # Base styles
│   ├── index.html          # HTML template
│   ├── package.json        # Node.js dependencies
│   └── vite.config.js      # Vite configuration
└── README.md               # This file

🚀 Local Development Setup (Without DevContainers)

Prerequisites

• Python 3.11+
• Node.js 18+
• npm or yarn

Backend Setup

cd backend
uv venv --python 3.11 .venv
source .venv/bin/activate
uv pip install -r requirements.txt
python main.py

Backend will run on: http://localhost:8000

Frontend Setup

cd frontend
npm install
npm run dev

Frontend will run on: http://localhost:3000

🤖 Available Agents

1. Code Review Agent

• Purpose: Reviews code for best practices, bugs, and improvements
• Features: Suggests optimizations, security checks, performance tips
• Mock Responses: Realistic code review feedback

2. Documentation Agent

• Purpose: Generates comprehensive documentation for code
• Features: API docs, setup instructions, usage examples
• Mock Responses: Well-formatted documentation templates

3. Architecture Agent

• Purpose: Provides system design and architecture advice
• Features: Scalability recommendations, technology suggestions, design patterns
• Mock Responses: Architecture analysis and improvement suggestions

🎯 DevContainer Learning Objectives

This project demonstrates:

1. Polyglot Development: Python backend + Node.js frontend
2. Development Workflow: API development with live frontend
3. Port Management: Backend (8000) + Frontend (3000)
4. Environment Consistency: Same setup across all machines
5. Extensions: VS Code extensions for both Python and JavaScript

🔄 Module 1 → Module 2 Transition

Module 1 (Current): Mock agents with hardcoded responses Module 2 (Next): Replace mocks with real LLM integration via:

• Docker AI for code generation
• MCP Toolkit for tool integration
• Real agentic workflows

📝 Usage Examples

Basic Chat

1. Select an agent from the sidebar
2. Type a question: "How can I improve my Python code?"
3. Get realistic mock feedback

Code Review

1. Paste code in the sidebar textarea
2. Select "Code Review Agent"
3. Ask: "Please review this code"
4. Get detailed code analysis

Documentation

1. Add code to the sidebar
2. Select "Documentation Agent"
3. Ask: "Generate docs for this code"
4. Receive formatted documentation

🧪 Testing the Setup

1. Health Check: Visit http://localhost:8000/health
2. API Endpoints: Visit http://localhost:8000/docs
3. Frontend: Interact with agents at http://localhost:3000
4. Cross-Origin: Verify frontend can call backend API

🐳 Next Steps (Module 2)

The DevContainer configuration will include:

• Python 3.11 environment with FastAPI
• Node.js 18 environment with React/Vite
• VS Code extensions for both languages
• Pre-configured port forwarding
• Environment variables for API endpoints
• Development tools and debugging setup