Muyue
7574f353ee
Add new iterative collaboration mode where Lead Architect creates initial document,
then 3-7 specialized agents review and refine it through sequential rounds until
convergence. Complete with WebSocket real-time updates, document versioning, and
timeline tracking.
Backend:
- New collaborativeOrchestrator service with round-based iteration logic
- Document versioning and diff tracking
- Three new DB tables: collaborative_sessions, document_versions, document_rounds
- New /api/collaborate routes for session management
- WebSocket support for sessionId in addition to debateId
Frontend:
- New collaboration store (Pinia) for session state management
- CollaborativeInput component for creating sessions with format/agent selection
- CollaborativeSession component with real-time document viewer and timeline
- DocumentViewer with basic Markdown rendering and text support
- App.vue refactored with mode selector (Classic Debate vs Collaborative Design)
- Enhanced useWebSocket composable supporting both debateId and sessionId
Features:
- 7 specialized agents: Lead Architect, Backend Engineer, Frontend Engineer, UI Designer, DevOps Engineer, Product Manager, Security Specialist
- Flexible document formats: Markdown (.md) and plain text (.txt)
- Automatic convergence detection when no changes in full round
- Complete modification history with who changed what and why
- Download final document in chosen format
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
234 lines
8.3 KiB
Markdown
234 lines
8.3 KiB
Markdown
# Project Agora
|
|
|
|
## Description
|
|
|
|
Project Agora est une plateforme web open-source permettant à plusieurs intelligences artificielles de **collaborer entre elles** pour concevoir la structure complète d'un projet logiciel à partir d'un **prompt utilisateur** ou d'un **document explicatif**.
|
|
|
|
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 :
|
|
|
|
- Architecte logiciel
|
|
- Développeur backend
|
|
- Développeur frontend
|
|
- Designer UI/UX
|
|
- Data engineer
|
|
- Chef de projet
|
|
- Éventuellement d'autres rôles selon la complexité du prompt.
|
|
|
|
Cependant, l'aspect le plus crucial de ces IA réside dans leur capacité à **échanger, négocier, voire s'opposer** pour déterminer collectivement la meilleure approche à adopter.
|
|
|
|
---
|
|
|
|
## 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
|
|
|
|
```mermaid
|
|
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
|
|
|
|
### Deux modes de collaboration
|
|
|
|
#### 1. **Mode Débat Classique** (Original)
|
|
- **4 agents spécialisés** qui débattent en parallèle : Architecte logiciel, Ingénieur backend, Ingénieur frontend, Designer UI/UX
|
|
- **Sélection automatique** des agents pertinents selon le contexte du projet
|
|
- **Débat collaboratif** : Les agents échangent et négocient pour converger vers la meilleure solution
|
|
- **Système de consensus** avec vote pondéré (l'architecte a une voix prépondérante)
|
|
- Résultats reçus simultanément
|
|
|
|
#### 2. **Mode Conception Collaborative** (Nouveau 🚀)
|
|
- **7 agents spécialisés** : Architecte Lead, Ingénieur backend, Ingénieur frontend, Designer UI/UX, Ingénieur DevOps, Chef de produit, Spécialiste Sécurité
|
|
- **Création itérative** : L'Architecte Lead crée d'abord un document initial complet
|
|
- **Tours de table** : Chaque agent revoit séquentiellement le document et propose des améliorations
|
|
- **Document évolutif** : Le document s'améliore à chaque passage d'agent
|
|
- **Convergence naturelle** : Le processus continue jusqu'à ce qu'aucun agent ne propose de modifications
|
|
- **Traçabilité complète** : Historique complet de toutes les modifications avec justifications
|
|
- **Format flexible** : Support Markdown (.md) et texte brut (.txt)
|
|
- **Export facile** : Téléchargez le document final en format désiré
|
|
|
|
### 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é
|
|
- **Visualisation en temps réel** des échanges entre agents via WebSocket
|
|
- **Affichage structuré** des propositions avec justifications et niveaux de confiance
|
|
- **Rendu automatique** de diagrammes Mermaid intégrés dans les réponses
|
|
- **Indicateurs de progression** et statuts du débat
|
|
|
|
### Architecture et stockage
|
|
- **API REST** pour gestion des débats et récupération des résultats
|
|
- **WebSocket** pour streaming temps réel des réponses des agents
|
|
- **Base SQLite** pour persistance des débats et historique
|
|
- **Gestion d'erreurs** avec fallbacks et réponses de secours
|
|
|
|
---
|
|
|
|
## Démarrage rapide
|
|
|
|
### Prérequis
|
|
|
|
- Node.js 18+
|
|
- Clé API Mistral AI ([obtenir ici](https://console.mistral.ai/))
|
|
|
|
### Installation
|
|
|
|
**1. Backend**
|
|
```bash
|
|
cd backend
|
|
npm install
|
|
cp .env.example .env
|
|
# Éditer .env et ajouter votre MISTRAL_API_KEY
|
|
npm start
|
|
```
|
|
|
|
**2. Frontend**
|
|
```bash
|
|
cd frontend
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
**3. Accéder à l'application**
|
|
- Frontend: http://localhost:5173
|
|
- Backend API: http://localhost:3000
|
|
- WebSocket: ws://localhost:3000
|
|
|
|
---
|
|
|
|
## Flux utilisateur
|
|
|
|
### Mode Débat Classique
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant User
|
|
participant Orchestrator
|
|
participant AI_Architect
|
|
participant AI_Designer
|
|
participant AI_Engineer
|
|
User->>Orchestrator: Prompt project
|
|
Orchestrator->>AI_Architect: Generate approach
|
|
Orchestrator->>AI_Designer: Discuss UI/UX
|
|
Orchestrator->>AI_Engineer: Suggest modules
|
|
AI_Architect-->>Orchestrator: Architecture proposal
|
|
AI_Designer-->>Orchestrator: Interface ideas
|
|
AI_Engineer-->>Orchestrator: Technical design
|
|
Orchestrator-->>User: Final structured response + diagram
|
|
```
|
|
|
|
### Mode Conception Collaborative
|
|
```mermaid
|
|
sequenceDiagram
|
|
participant User
|
|
participant Orchestrator
|
|
participant Lead_Architect
|
|
participant Agents
|
|
User->>Orchestrator: Prompt project + format choice
|
|
Orchestrator->>Lead_Architect: Create initial document
|
|
Lead_Architect-->>Orchestrator: v1 Document
|
|
Orchestrator->>Agents: Review document Round 1
|
|
Agents-->>Orchestrator: Modifications proposed
|
|
Orchestrator->>Agents: Review document Round 2
|
|
Agents-->>Orchestrator: No changes OR more modifications
|
|
Orchestrator-->>User: Final document + full history
|
|
```
|
|
|
|
---
|
|
|
|
## Utilisation du Mode Conception Collaborative
|
|
|
|
### Étapes
|
|
|
|
1. **Sélectionner le mode** : Cliquez sur "Collaborative Design" depuis l'écran d'accueil
|
|
2. **Décrire le projet** : Entrez une description détaillée de votre projet logiciel
|
|
3. **Configurer** :
|
|
- **Format du document** : Choisissez entre Markdown (.md) ou Texte brut (.txt)
|
|
- **Nombre d'agents** : 3 (Quick), 5 (Balanced), ou 7 (Comprehensive)
|
|
4. **Lancer la session** : Cliquez sur "Start Collaborative Design Session"
|
|
5. **Suivre la progression** :
|
|
- Visualisez le document en évolution en temps réel
|
|
- Consultez la timeline pour voir qui a fait quoi
|
|
- Lancez les tours de table avec le bouton "Next Review Round"
|
|
6. **Convergence automatique** : Le système arrête automatiquement quand tous les agents sont satisfaits
|
|
7. **Télécharger** : Exportez le document final en format choisi
|
|
|
|
### Exemple d'utilisation
|
|
|
|
**Prompt utilisateur** :
|
|
```
|
|
Je veux créer une plateforme de gestion de projets collaboratifs en temps réel,
|
|
avec support pour les équipes distribuées. Fonctionnalités clés: gestion des tâches,
|
|
communication temps réel, partage de fichiers, intégrations externes.
|
|
Besoin de scalabilité pour 10,000+ utilisateurs simultanés.
|
|
```
|
|
|
|
**Résultat** :
|
|
- **Round 1** : Lead Architect crée le document initial avec architecture générale
|
|
- **Round 2** : Backend Engineer revoit et ajoute détails API et base de données
|
|
- **Round 3** : Frontend Engineer améliore avec structure UI et composants
|
|
- **Round 4** : UI Designer ajoute guidelines UX et patterns
|
|
- **Round 5** : DevOps Engineer propose infrastructure et déploiement
|
|
- **Round 6** : Product Manager aligne avec besoins métier
|
|
- **Round 7** : Security Specialist ajoute mesures de sécurité
|
|
- **Convergence** : Plus aucune modification proposée ✓
|
|
|
|
Document final : Spécification architecturale complète et cohérente !
|
|
|
|
---
|
|
|
|
## Licence
|
|
|
|
MIT License — Open-source
|