Angular CLI MCP

Installation

1. 01 Lancer la démo

   bash

   git clone https://github.com/Gwenn-i/demo-angular-mcp
   cd demo-angular-mcp
   npm install
   npm start

   Copier

2. 02 Ajouter le MCP + les bonnes pratiques à votre projet

   VS Code / CopilotCursorClaude CodeGemini CLI

   À la racine de votre projet Angular, cette commande du CLI crée AGENTS.md (les bonnes pratiques Angular officielles pour l’IA) et .vscode/mcp.json (la config MCP) :

   bash

   npx ng generate ai-config --tool=vscode

   Copier

   Ou collez la config MCP à la main dans .vscode/mcp.json :

   json

   {
     "servers": {
       "angular-cli": {
         "command": "npx",
         "args": ["-y", "@angular/cli", "mcp"]
       }
     }
   }

   Copier

3. 03 Vérifier que le serveur démarre

   bash

   npx -y @angular/cli mcp

   Copier

   Puis rechargez l’éditeur et utilisez le chat en mode agent : les outils angular-cli doivent apparaître.

Prompts à tester

1. 01 Bonnes pratiques & doc

   • « Quelles sont les bonnes pratiques Angular actuelles ? Résume-les en 10 points. »Copier
   • « Cherche dans la doc Angular comment fonctionne linkedSignal et donne-moi un exemple. »Copier
   • « Explique la différence entre resource() et httpResource() avec la doc officielle. »Copier

2. 02 Explorer son workspace

   • « Liste tous les projets et librairies de mon workspace Angular avec leur version. »Copier
   • « Quel est le préfixe de sélecteur et le builder utilisés dans mon projet ? »Copier

3. 03 Générer du code moderne

   • « Crée un composant product-list standalone avec signals, @for et inject(), en suivant les best practices Angular. »Copier
   • « Génère un formulaire de contact avec les Signal Forms, validation email comprise. »Copier
   • « Trouve un exemple officiel d'utilisation de @defer et applique-le à ma page d'accueil. »Copier

4. 04 Moderniser l'existant

   • « Analyse mon projet : qu'est-ce qui m'empêche de passer en zoneless ? »Copier
   • « Migre ce composant vers OnPush et signals, étape par étape. »Copier
   • « Remplace tous les *ngIf / *ngFor par le nouveau control flow @if / @for. »Copier
   • « Transforme mes constructeurs d'injection en inject(). »Copier

5. 05 Aller plus loin

   • « Crée une mini-app Todo en Angular moderne, puis explique chaque choix en citant la doc Angular. »Copier
   • « Fais une revue de code de mon app.ts comme le ferait un Google Developer Expert Angular. »Copier