Angular CLI MCP Server : guide complet

Le protocole MCP : contexte et enjeux

Le Model Context Protocol (MCP) est une spécification open source publiée par Anthropic en novembre 2024 pour standardiser la communication entre les assistants IA et les outils de développement. Avant MCP, chaque éditeur implémentait sa propre façon d'injecter du contexte dans les LLMs — résultat : une fragmentation importante et des intégrations difficiles à maintenir.

MCP résout ce problème en définissant un protocole client/serveur universel. Le serveur MCP expose des outils (commandes, ressources, contexte) via une API standardisée. Le client MCP — votre éditeur ou assistant IA — interroge ce serveur pour obtenir des capacités supplémentaires à la volée.

L'adoption de MCP a été rapide : VS Code, Cursor, Windsurf, JetBrains, GitHub Copilot, Claude Desktop et Gemini CLI implémentent tous désormais le protocole côté client. Angular est l'un des premiers frameworks à proposer un serveur MCP officiel intégré dans son CLI.

Architecture d'une session MCP Angular

Voici ce qui se passe concrètement lorsque vous configurez le serveur MCP dans votre éditeur :

# 1. L'éditeur lance le serveur MCP Angular CLI au démarrage du workspace
npx -y @angular/cli mcp

# 2. Initialisation : le serveur inspecte votre workspace
#    → Lit angular.json pour détecter les projets
#    → Vérifie la version Angular installée
#    → Enregistre la liste des outils disponibles

# 3. L'éditeur récupère les outils (tool discovery)
#    Réponse serveur :
#    { tools: ['ai_tutor', 'search_documentation', 'find_examples', ...] }

# 4. Quand vous posez une question à l'IA :
#    "Comment migrer vers des composants standalone ?"
#    → L'IA appelle get_best_practices() en arrière-plan
#    → Le serveur retourne le guide officiel Angular à jour
#    → L'IA répond avec un contexte précis et documenté

Angular CLI MCP Server : présentation

Le Angular CLI MCP Server est intégré directement dans le package @angular/cli depuis la version v19.2 (experimental) et v20 (stable). Il s'active via la commande ng mcp et expose un ensemble d'outils conçus pour augmenter la précision et la pertinence des réponses IA dans un contexte Angular.

L'idée centrale est simple : l'IA connaît Angular en général, mais elle ne connaît pas votre projet spécifique. Le serveur MCP Angular CLI résout ce problème en fournissant deux types de contexte :

• Contexte statique : structure du workspace (angular.json), liste des projets et bibliothèques, version Angular installée
• Contexte dynamique : documentation officielle à jour, meilleures pratiques actuelles, exemples de code officiels depuis angular.dev

Ce que le serveur MCP apporte concrètement

Prérequis et démarrage rapide

La mise en place du serveur MCP Angular CLI est rapide. Voici les prérequis et les premières commandes à exécuter.

Prérequis système

Vérifier et mettre à jour votre Angular CLI

# Vérifier la version installée globalement
ng version

# Sortie attendue (Angular CLI v20+ recommandé) :
# Angular CLI: 20.0.0
# Node: 20.11.0
# Package Manager: npm 10.x

# Mettre à jour le CLI global si nécessaire
npm install -g @angular/cli@latest

# Vérifier la version locale du projet (dans node_modules)
./node_modules/.bin/ng version

Tester le serveur MCP en mode interactif

Avant de configurer votre éditeur, testez le serveur depuis un terminal à la racine de votre projet Angular :

# Depuis la racine du projet Angular (dossier contenant angular.json)
cd mon-projet-angular

# Lancer le serveur MCP (affiche les instructions de configuration)
ng mcp

# Sortie attendue :
# Angular CLI MCP Server
# Available tools: ai_tutor, find_examples, get_best_practices,
#                  list_projects, onpush_zoneless_migration, search_documentation
#
# Experimental tools (disabled by default):
#   build, devserver.start, devserver.stop,
#   devserver.wait_for_build, e2e, modernize, test
#
# Options :
#   --experimental-tool (-E)  Activer un outil expérimental
#   --read-only               Désactiver les outils destructifs
#   --local-only              Désactiver les outils réseau

Utilisation avec npx (sans CLI global)

# Aucune installation globale requise — npx télécharge @angular/cli à la volée
npx -y @angular/cli mcp

# Avantages de cette approche :
# → Projets CI/CD sans installation globale
# → Garantit d'utiliser la version définie dans package.json du projet
# → Pas de pollution de l'environnement global Node

# Pour utiliser la version locale exacte du projet :
./node_modules/.bin/ng mcp

Configuration VS Code et Cursor

VS Code avec GitHub Copilot

VS Code supporte MCP depuis la version 1.99 (avril 2025) via l'extension GitHub Copilot. La configuration se fait via un fichier JSON dédié dans votre workspace.

Configuration locale par projet (recommandée) :

// Fichier : .vscode/mcp.json
// Committez ce fichier pour partager la configuration MCP avec toute l'équipe
{
  "servers": {
    "angular-cli": {
      // npx lance le serveur MCP Angular CLI sans installation globale
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"],
      // Variables d'environnement optionnelles pour le processus fils
      "env": {}
    }
  }
}

Configuration globale (tous vos projets VS Code) :

// Via VS Code : Ctrl+Shift+P → "MCP: Open User MCP Configuration"
// Ou directement dans : ~/.vscode/mcp.json
{
  "servers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    }
  }
}

Après avoir créé ce fichier, redémarrez VS Code. Dans le panneau GitHub Copilot Chat, basculez en mode "Agent" (icône @) — vous verrez angular-cli dans la liste des serveurs MCP disponibles.

Cursor

Cursor, pionnier de l'adoption MCP, supporte deux niveaux de configuration :

Par projet (.cursor/mcp.json) :

// Fichier : .cursor/mcp.json (à la racine du projet Angular)
// Ce fichier peut être committé pour partager la config avec l'équipe
{
  "mcpServers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    }
  }
}

Globalement pour tous les projets (~/.cursor/mcp.json) :

// Fichier : ~/.cursor/mcp.json (configuration utilisateur Cursor)
// Disponible dans tous vos projets ouverts avec Cursor
{
  "mcpServers": {
    "angular-cli": {
      "command": "npx",
      "args": [
        "-y",
        "@angular/cli",
        "mcp",
        // Mode lecture seule recommandé en config globale :
        // l'IA peut lire et interroger mais ne modifie pas vos fichiers
        "--read-only"
      ]
    }
  }
}

Vérifier la connexion dans Cursor

// Dans Cursor Chat, invoquez directement l'outil MCP :
// @angular-cli list_projects

// Réponse attendue pour un workspace multi-projets :
// Projects in this Angular workspace:
//   Applications:
//     - my-app          (src/app)
//     - admin-panel     (projects/admin-panel)
//   Libraries:
//     - shared-ui       (projects/shared-ui)
//     - data-access     (projects/data-access)

Windsurf, JetBrains et autres éditeurs

Windsurf (Codeium)

Windsurf utilise un fichier de configuration global dans le répertoire Codeium :

// Fichier : ~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    }
  }
}

JetBrains (WebStorm, IntelliJ IDEA)

JetBrains supporte MCP via le plugin AI Assistant (v2024.3+). Deux méthodes de configuration :

Via l'interface graphique :

Via fichier JSON :

// Fichier de config JetBrains MCP (chemin selon l'OS et l'IDE)
// macOS : ~/Library/Application Support/JetBrains/<IDE>/mcp.json
// Windows : %APPDATA%\JetBrains\<IDE>\mcp.json
{
  "servers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    }
  }
}

Firebase Studio, Gemini CLI et Claude Desktop

// Firebase Studio — Fichier : .idx/mcp.json (racine du projet)
{
  "mcpServers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    }
  }
}

// Gemini CLI — Fichier : ~/.gemini/settings.json
{
  "mcpServers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    }
  }
}

// Claude Desktop (Anthropic)
// macOS : ~/Library/Application Support/Claude/claude_desktop_config.json
// Windows : %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    }
  }
}

Les 6 outils MCP standard d'Angular

Le serveur MCP Angular CLI expose six outils activés par défaut, sans option supplémentaire. Voici leur description précise et des exemples d'utilisation concrets en session IA.

1. search_documentation

Interroge la documentation officielle Angular sur angular.dev en temps réel. L'IA peut ainsi répondre avec les informations les plus récentes, même si sa base de données d'entraînement date de plusieurs mois.

// Prompt utilisateur :
// "Comment utiliser httpResource() dans Angular v20 ?"

// L'IA appelle automatiquement :
// search_documentation({ query: "httpResource Angular v20" })

// Résultat retourné depuis angular.dev :
// API Reference : httpResource()
// → Signature, paramètres, exemples officiels
// → Compatible Angular v20+ avec les signals

// L'IA génère une réponse précise et à jour
// plutôt que de s'appuyer sur ses données d'entraînement figées

2. find_examples

Localise des exemples de code officiels Angular, en priorisant les patterns modernes : standalone components, signals, inject(). Évite les anciens patterns NgModule et les exemples obsolètes.

// "Montre-moi un exemple de composant standalone avec des signals"

// L'IA appelle :
// find_examples({ topic: "standalone component signals" })

// Exemples officiels retournés :
// → Composant avec signal() et computed()
// → Pas de NgModule ni de zones
// → Code testé et maintenu par l'équipe Angular

// Avantage : les exemples sont toujours synchronisés
// avec la dernière version stable d'Angular

3. get_best_practices

Retourne le guide officiel des meilleures pratiques Angular, en mettant l'accent sur les patterns recommandés en 2025-2026 : composants standalone, inject(), formulaires typés, change detection OnPush.

// "Quelles bonnes pratiques pour les services Angular ?"

// L'IA appelle :
// get_best_practices({ topic: "services" })

// Guide retourné inclut (résumé) :
// ✅ inject() plutôt que le constructeur (v14+)
// ✅ providedIn: 'root' pour les services singleton
// ✅ DestroyRef pour les subscriptions (v16+)
// ✅ takeUntilDestroyed() operator
// ✅ Éviter les services avec état mutable non protégé
// ❌ Éviter les services avec des Subjects publics exposés

4. list_projects

Liste toutes les applications et bibliothèques définies dans votre angular.json. Indispensable dans les monorepos pour que l'IA cible le bon projet lors d'une opération.

// "Quels projets existent dans mon workspace ?"

// L'IA appelle : list_projects()

// Réponse typique pour un monorepo Angular :
// Applications:
//   - my-app        (src/app)                     → app principale
//   - admin-panel   (projects/admin-panel/src/app) → back-office
// Libraries:
//   - shared-ui     (projects/shared-ui/src/lib)   → composants UI
//   - data-access   (projects/data-access/src/lib) → services + state

// L'IA peut ensuite cibler un projet précis :
// "Lance le build de production de admin-panel uniquement"

5. onpush_zoneless_migration

Génère un plan de migration détaillé pour passer en mode ChangeDetectionStrategy.OnPush ou en mode zoneless (sans zone.js). C'est la migration recommandée pour améliorer drastiquement les performances Angular.

// "Comment migrer mon application en mode zoneless ?"

// L'IA appelle :
// onpush_zoneless_migration({ projectName: "my-app" })

// Plan de migration généré (adapté à votre version Angular) :
//
// Étape 1 : Mettre à jour angular.json
//   "zone": "noop"  dans la section build
//
// Étape 2 : Modifier main.ts
//   bootstrapApplication(AppComponent, {
//     providers: [provideExperimentalZonelessChangeDetection()]
//   })
//
// Étape 3 : Supprimer zone.js des polyfills
//   Retirer "zone.js" de polyfills dans angular.json
//
// Étape 4 : Remplacer markForCheck() par des updates via signals
// Étape 5 : Auditer les setTimeout/setInterval non-Angular
// Étape 6 : Valider avec ng test + Playwright

6. ai_tutor (Angular v20+ requis)

Lance un tuteur IA interactif spécialisé en Angular. Contrairement aux autres outils qui répondent à des requêtes ponctuelles, ai_tutor maintient un contexte pédagogique pour guider l'apprentissage étape par étape.

// "J'apprends Angular, explique-moi les signals depuis le début"

// ai_tutor établit une session d'apprentissage adaptative :
// → Évalue votre niveau (questions de contexte initiales)
// → Adapte les explications (débutant → confirmé)
// → Propose des exercices pratiques avec feedback
// → Valide la compréhension avant la prochaine étape
// → Maintient le contexte sur toute la session

// Nécessite Angular CLI v20+ dans le projet (détecté via package.json)
// Idéal pour onboarding nouvelles recrues sur un projet Angular existant

Outils expérimentaux : build, serveur et tests

En plus des 6 outils standard, le serveur MCP Angular CLI expose des outils expérimentaux qui permettent à l'IA d'interagir directement avec le cycle de build : compilations, serveur de développement, tests e2e et migrations automatiques.

Activer les outils expérimentaux

// Dans votre fichier MCP (.vscode/mcp.json ou .cursor/mcp.json)
{
  "servers": {
    "angular-cli": {
      "command": "npx",
      "args": [
        "-y", "@angular/cli", "mcp",
        // Activer un seul outil expérimental
        "--experimental-tool", "build",
        // Plusieurs outils : répéter le flag pour chacun
        "--experimental-tool", "devserver.start",
        "--experimental-tool", "test"
      ]
    }
  }
}

// Alternative avec le flag court -E :
// "args": ["-y", "@angular/cli", "mcp", "-E", "build", "-E", "test"]

build

Déclenche une compilation Angular (ng build) depuis l'IA et retourne les résultats complets : statut, taille des bundles, warnings.

// "Lance un build de production du projet admin-panel"

// L'IA appelle :
// build({ project: "admin-panel", configuration: "production" })

// Équivalent CLI :
// ng build admin-panel --configuration=production

// Résultat retourné :
// ✅ Build SUCCESS
// → Initial total : 312 KB (gzip : 98 KB)
// → main.js : 245 KB
// → styles.css : 45 KB
// ⚠️ Warning : bundle size budget exceeded by 12 KB

devserver.start / devserver.stop / devserver.wait_for_build

Ces trois outils permettent à l'IA de gérer le serveur de développement Angular de façon programmatique — utile dans des workflows IA automatisés.

// Démarrer le serveur de développement
// devserver.start({ project: "my-app", port: 4200 })
// → Équivalent : ng serve my-app --port=4200

// Attendre que le build initial soit terminé
// devserver.wait_for_build({ timeout: 60000 })
// → Bloque jusqu'au message "Application bundle generation complete"
// → Utile avant de lancer des tests e2e automatisés

// Arrêter le serveur proprement
// devserver.stop()
// → Équivalent : Ctrl+C sur ng serve (arrêt gracieux)

test

Lance la suite de tests unitaires Angular (ng test) et retourne les résultats détaillés.

// "Lance les tests unitaires et dis-moi ce qui échoue"

// L'IA appelle :
// test({ project: "my-app", watch: false })

// Équivalent CLI :
// ng test my-app --watch=false --browsers=ChromeHeadless

// Résultat retourné :
// ✅ Tests passés : 147
// ❌ Tests échoués : 3
//
// Échec 1 : UserService > should return user by id
//   Expected : { id: 1, name: 'Alice' }
//   Received : undefined
//   Stack trace : user.service.spec.ts:42
//
// Couverture : 78% (statements), 71% (branches)

modernize

Applique des migrations automatiques pour moderniser votre code Angular vers les patterns actuels. Utilise les schematics officiels Angular.

// "Modernise mon AppComponent vers les patterns Angular v20"

// L'IA appelle :
// modernize({ target: "src/app/app.component.ts" })

// Transformations automatiques possibles :
// → NgModule → standalone component
// → Constructeur DI → inject()
// → @Input() avec valeur → signal input
// → Suppression du code zone.js-dependent

// ⚠️ IMPORTANT : cet outil modifie vos fichiers sources directement !
// Commitez toujours avant d'utiliser modernize :
// git add . && git commit -m "snapshot avant modernize"

e2e

Déclenche les tests end-to-end configurés dans votre projet et retourne les résultats.

// "Lance les tests e2e et vérifie le flux d'authentification"

// L'IA appelle : e2e({ project: "my-app" })
// Équivalent CLI : ng e2e my-app

// Compatible avec les runners e2e populaires :
// → Cypress (via @cypress/schematic)
// → Playwright (via @playwright/test)

// Résultat :
// ✅ 24 tests passés
// ❌ 1 test échoué : "Login > should redirect after success"
//    → Timeout après 5000ms sur .dashboard-title

Options avancées, sécurité et bonnes pratiques

Le serveur MCP Angular CLI propose trois options clés pour contrôler précisément ce que l'IA peut et ne peut pas faire. Le choix de la bonne configuration selon votre contexte évite les surprises désagréables.

Les trois modes de contrôle

Configurations recommandées par contexte

// === 1. Développeur solo — maximum de fonctionnalités ===
{
  "servers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
      // Tous les outils standard activés, aucun expérimental
    }
  }
}

// === 2. Équipe partagée — sécurité lecture seule ===
{
  "servers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp", "--read-only"]
      // L'IA peut interroger et recommander, pas modifier
    }
  }
}

// === 3. Pipeline CI/CD — build et tests automatisés ===
{
  "servers": {
    "angular-cli": {
      "command": "npx",
      "args": [
        "-y", "@angular/cli", "mcp",
        "--experimental-tool", "build",
        "--experimental-tool", "test",
        "--experimental-tool", "devserver.start",
        "--experimental-tool", "devserver.wait_for_build",
        "--experimental-tool", "devserver.stop"
      ]
    }
  }
}

// === 4. Développement hors ligne ===
{
  "servers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp", "--local-only"]
      // Désactive search_documentation (appel réseau)
      // Garde list_projects, analyse workspace (100% local)
    }
  }
}

Bonnes pratiques de sécurité

Déboguer une connexion MCP défaillante

# Problème : l'éditeur ne détecte pas le serveur MCP Angular CLI

# 1. Vérifier que npx et ng fonctionnent correctement
npx -y @angular/cli version

# 2. Lancer le serveur manuellement pour voir les erreurs directes
npx -y @angular/cli mcp

# Erreur fréquente :
# "This command must be run in an Angular workspace"
# → Vérifiez que angular.json existe dans le répertoire ouvert
# → L'éditeur doit ouvrir la racine du projet Angular (pas un sous-dossier)

# 3. Utiliser le CLI local du projet au lieu de npx global
./node_modules/.bin/ng mcp

# 4. Consulter les logs dans l'éditeur
# VS Code   : View → Output → sélectionner "MCP: angular-cli"
# Cursor    : Settings → MCP Servers → "View Logs" sur angular-cli
# JetBrains : Help → Show Log in Explorer → idea.log

# 5. Forcer le rechargement du cache npx
npx clear-npx-cache
npx -y @angular/cli mcp

L'avenir du MCP Angular CLI

L'équipe Angular prévoit plusieurs évolutions pour les versions futures du serveur MCP :

• Génération de code contextuelle via les schematics Angular (ng generate via MCP)
• Analyse de performance des bundles en temps réel avec recommandations
• Intégration approfondie avec Angular DevTools (profiling, change detection)
• Support natif des workspaces Nx et d'autres monorepo tools
• Outils de migration automatique plus granulaires (fichier par fichier)

Le serveur MCP Angular CLI représente une évolution fondamentale dans la façon de développer avec Angular. Ce n'est plus seulement un CLI pour générer du code — c'est une API standardisée qui connecte votre workspace Angular à n'importe quel assistant IA, aujourd'hui et dans le futur. En adoptant MCP dès maintenant, vous positionnez votre workflow de développement pour tirer parti de chaque avancée IA à venir, sans changer d'outil ni de configuration.