Skip to content

README.md

Latest commit

 

History

History
123 lines (96 loc) · 3.7 KB

README.md

File metadata and controls

123 lines (96 loc) · 3.7 KB

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