Concorde Framework

Framework de composants Web basé sur Lit Element avec un système de thèmes, de data binding et de composants réutilisables.

📁 Structure du projet

concorde/
├── src/                    # Code source principal
│   ├── core/              # Cœur du framework
│   │   ├── components/    # Composants UI et fonctionnels
│   │   ├── mixins/        # Mixins réutilisables
│   │   ├── utils/         # Utilitaires
│   │   └── _types/        # Types TypeScript
│   ├── docs/              # Composants de documentation
│   └── index.ts           # Point d'entrée principal
├── docs/                  # Documentation générée
├── dist/                  # Fichiers de build
├── public/                # Assets publics
├── mcp-server/            # 🆕 Serveur MCP pour l'IA
│   ├── concorde-mcp-server.js    # Serveur Node.js
│   ├── concorde-mcp-server.py   # Serveur Python
│   ├── test-mcp.js              # Tests Node.js
│   ├── test-mcp.py              # Tests Python
│   ├── install-mcp-nodejs.sh    # Installation Node.js
│   ├── install-mcp.sh           # Installation Python
│   ├── cursor-mcp-config*.json  # Configurations Cursor
│   └── README.md                # Documentation MCP
├── package.json           # Configuration npm
├── vite.config.mts        # Configuration Vite
└── tailwind.config.js     # Configuration Tailwind

🚀 Serveur MCP pour l'IA

Le dossier mcp-server/ contient un serveur MCP (Model Context Protocol) qui permet à l'IA de Cursor d'accéder facilement à toute la documentation et au code de Concorde.

Installation rapide

# Version Node.js (recommandée)
cd mcp-server
./install-mcp-nodejs.sh

# Version Python
cd mcp-server
./install-mcp.sh

Configuration Cursor

{
  "mcpServers": {
    "concorde": {
      "command": "node",
      "args": ["/usr2/sites/concorde/mcp-server/concorde-mcp-server.js"],
      "env": {
        "NODE_PATH": "/usr2/sites/concorde"
      }
    }
  }
}

Fonctionnalités

• 35+ composants analysés automatiquement
• 6 outils MCP pour interagir avec l'IA
• Documentation complète de chaque composant
• Génération de code HTML automatique
• Exemples d'utilisation extraits de la documentation

🎨 Composants disponibles

Composants UI (20)

• Formulaires : input, select, checkbox, radio, textarea
• Navigation : button, link, menu
• Feedback : alert, badge, modal, toast, tooltip
• Layout : card, table, divider, group
• Media : icon, image, loader, progress

Composants fonctionnels (15)

• Data : fetch, list, queue, subscriber, value
• Navigation : router, redirect, states
• Logic : if, submit, mix, translation
• Advanced : sdui (Server Driven UI)

🛠️ Développement

Installation

npm install
# ou
yarn install

Développement

npm run dev
# ou
yarn dev

Build

npm run build
# ou
yarn build

Tests

npm test
# ou
yarn test

📚 Documentation

• Documentation principale - Documentation générée
• Serveur MCP - Documentation du serveur MCP
• Composants - Code source des composants
• Exemples - Exemples d'utilisation

🎯 Utilisation avec l'IA

Une fois le serveur MCP configuré, vous pouvez demander à l'IA de Cursor :

• "Crée un bouton Concorde avec une icône"
• "Génère un formulaire de connexion"
• "Montre-moi comment utiliser le composant modal"
• "Quelles sont les propriétés du composant input ?"
• "Crée une liste avec des données dynamiques"

🔧 Technologies

• Lit Element - Web Components
• TypeScript - Langage principal
• Tailwind CSS - Styles utilitaires
• Vite - Build tool
• Vitest - Tests
• MCP - Protocole pour l'IA

📄 Licence

MIT License - Voir le fichier LICENSE pour plus de détails.

🤝 Contribution

Pour contribuer au projet :

1. Fork le projet
2. Créer une branche feature
3. Modifier le code
4. Tester avec npm test
5. Créer une Pull Request

📞 Support

• Issues : GitHub Issues
• Documentation : docs/
• Serveur MCP : mcp-server/README.md