Muyue affb55df43 Add section deletion and simplify working agent display
- Add deleteSection() method to collaborativeOrchestrator.js for removing sections by header
- Enable IAs to delete sections with 'DELETE: ## Section Name' format
- Modify mistralClient.js prompt to include deletion instructions
- Simplify working agent card UI: show only raised hand animation + agent name
- Remove thinking content display from working agent card for cleaner UX
2025-10-18 23:44:31 +02:00

Project Agora

Description

Project Agora est une plateforme web permettant à plusieurs intelligences artificielles de collaborer pour concevoir une architecture logicielle complète à partir d'une description de projet et optionnellement d'une documentation contexte.

L'objectif est de produire :

  • Une architecture logicielle complète, incluant :
    • Une hiérarchie de fichiers structurée pour le projet
    • Une spécification détaillée du contenu attendu pour chaque fichier (sans implémentation de code, uniquement une description fonctionnelle et technique)
  • Un raisonnement justifié pour chaque choix technique.
  • Des diagrammes explicatifs (Mermaid).
  • Une synthèse finale cohérente prête à être utilisée comme base de développement.

Aucune génération de code direct n'est effectuée : seules des explications, réflexions et structures sont produites.


Objectif

Reproduire une table ronde d'IA spécialistes, chaque agent IA représentant un rôle spécifique :

  • Lead Architect (Architecte logiciel)
  • Backend Engineer (Développeur backend)
  • Frontend Engineer (Développeur frontend)
  • UI Designer (Designer UI/UX)
  • DevOps Engineer (Ingénieur DevOps)
  • Product Manager (Chef de projet)
  • Security Specialist (Spécialiste sécurité)

L'aspect le plus crucial de ces IA réside dans leur capacité à collaborer itérativement pour améliorer collectivement la spécification architecturale jusqu'à convergence naturelle (quand plus aucune amélioration n'est proposée).


Exemple d'utilisation

L'utilisateur entre ceci dans l'interface :

« Je souhaite faire une application de calculatrice scientifique responsive web. »

Le système demande alors à plusieurs IA leur point de vue sur :

  • Le langage ou framework le plus adapté
  • L'organisation du projet (folders, modules)
  • Les fichiers essentiels
  • Les interactions front/back éventuelles
  • Le design minimal (UI/UX conceptuel)

Elles discutent pour converger vers un consensus, puis produisent une fiche conceptuelle du projet au format structuré (JSON + affichage visuel + diagrammes Mermaid).


Architecture technique

Stack principal

  • Frontend: Vue.js 3 + Vite
  • Backend: Node.js + Express
  • AI Layer: Multi-agent système avec Mistral API
  • Storage: SQLite + JSON backup
  • Diagrammes: Mermaid.js

Architecture globale

graph TD
    A[Frontend: Vue.js 3] -->|User Prompt| B[Backend: Node.js]
    B -->|Orchestration| C[AI Layer: Mistral Agents]
    C -->|Debate Data| D[Storage: SQLite/JSON]
    C -->|Diagram Specs| E[Mermaid Engine]
    E -->|SVG/Render| A
    D -->|History| A

Fonctionnalités

Conception Collaborative par IA

  • 7 agents spécialisés : Architecte, Backend Engineer, Frontend Engineer, UI Designer, DevOps Engineer, Product Manager, Security Specialist
  • Création itérative : Lead Architect crée le document initial
  • Tours de table : Chaque agent revoit et propose des améliorations
  • Document évolutif : Amélioration progressive à chaque passage
  • Convergence naturelle : Arrêt automatique quand tous les agents sont satisfaits
  • Traçabilité complète : Historique de toutes les modifications
  • Format Markdown : Output toujours en Markdown (.md)
  • Context files : Support d'upload de fichiers MD/TXT en entrée (optionnel)
  • Network monitoring : Indicateur temps réel de latence et qualité réseau

Système multi-agents IA

  • Intégration Mistral AI pour génération de réponses intelligentes et contextuelles
  • System prompts spécialisés pour chaque rôle d'agent
  • Contexte intelligent : Les agents voient l'historique et le document actuel

Interface et visualisation

  • Saisie de prompt décrivant le projet souhaité
  • Upload optionnel de fichiers contexte (MD/TXT)
  • Visualisation en temps réel des modifications via WebSocket
  • Timeline d'évolution du document avec historique complet
  • Affichage interactif du document Markdown final
  • Indicateurs de progression et statuts du session

Architecture et stockage

  • API REST pour gestion des sessions collaboratives
  • WebSocket pour streaming temps réel des modifications d'agents
  • Base SQLite pour persistance des sessions, versions et historique complet
  • Versioning intelligent : Chaque modification crée une version avec métadonnées (agent, raison, round)

Démarrage rapide

Prérequis

Installation

1. Backend

cd backend
npm install
cp .env.example .env
# Éditer .env et ajouter votre MISTRAL_API_KEY
npm start

2. Frontend

cd frontend
npm install
npm run dev

3. Accéder à l'application


Flux Utilisateur

sequenceDiagram
  participant User
  participant Backend
  participant Agents
  User->>Backend: Project description + optional context file
  Backend->>Agents: Lead Architect creates initial document
  Agents-->>Backend: Document v1
  Backend->>Agents: Round 1: Review and improve
  Agents-->>Backend: Updates proposed
  Backend->>Agents: Round 2-N: Review updated document
  Agents-->>Backend: More updates OR no changes
  Backend-->>User: Final Markdown document + history

Utilisation

Étapes

  1. Décrire le projet : Entrez une description détaillée
  2. Ajouter un contexte (optionnel) : Upload un fichier MD ou TXT
  3. Sélectionner : Nombre d'agents (3, 5, ou 7)
  4. Lancer : Start Design Session
  5. Suivre :
    • Visualisez le document en temps réel
    • Consultez la timeline
    • Lancez les tours avec "Next Review Round"
  6. Résultat : Document Markdown téléchargeable

Exemple

Entrée:

Plateforme gestion projets temps réel, équipes distribuées,
gestion tâches, communication, partage fichiers, 10K+ users

Processus:

  • Round 1: Lead Architect - Architecture générale
  • Round 2: Backend - APIs et base de données
  • Round 3: Frontend - Structure UI
  • Round 4: UI Designer - Guidelines UX
  • Round 5: DevOps - Infrastructure
  • Round 6: Product Manager - Besoins métier
  • Round 7: Security - Mesures sécurité

Sortie: Spécification architecturale Markdown complète


Licence

MIT License — Open-source

Description
No description provided
Readme MIT 430 KiB
Languages
Vue 54.5%
JavaScript 42.6%
CSS 2.6%
HTML 0.3%