Angular CLI MCP Server Setup: VS Code & Copilot CLI Guide

AI coding assistants are brilliant until they confidently hallucinate an API from three versions ago or guess your project setup completely wrong. For Angular developers, the pain is familiar: asking an LLM to generate a component and watching it hand back legacy *ngIf, *ngFor, or module declarations from Angular 14. The core issue has always been twofold: stale training data and zero runtime awareness of your local workspace. To bridge this gap, the Angular team rolled out support for the Model Context Protocol (MCP) via the Angular CLI (@angular/cli mcp). By wiring an MCP server directly into your AI workflow, your tools gain active eyes and hands—querying real-time workspace schemas and fetching up-to-date documentation straight from angular.dev. Here is how to set up the Angular CLI MCP server across both VS Code and the standalone GitHub Copilot CLI. Previously, developers used custom system prompts or static markdown "rules" to teach AI how to write modern Angular code. MCP makes that obsolete. Instead of reading a static text file, your AI now dynamically queries active tools: list_projects: Automatically reads your angular.json so the AI knows your workspace structure, source roots, and application targets. search_documentation: Scans the live angular.dev documentation site in real-time, ensuring the AI suggests modern syntax (like @if, @for, and @defer control flows) instead of legacy directives. get_best_practices: Enforces official style guidelines and modern signals out of the box. Architecture Flow: How MCP Powers the Agent Plaintext ┌─────────────────────────────────────────────────────────────────────────────┐ │ DEVELOPER / IDE │ │ "Add a user feed component with signals and zoneless change detection" │ └──────────────────────────────────────┬──────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────────────────┐ │ AI AGENT (VS Code / Copilot CLI) │ │ Recognizes intent ➔ Queries Angular MCP tools instead of guessing │ └───────────────────────┬───────────────────────────────┬─────────────────────┘ │ │ TOOL: list_projects & workspace │ TOOL: search_documentation & configuration │ get_best_practices ▼ ▼ ┌──────────────────────────────────────┐ ┌───────────────────────────────────┐ │ LOCAL WORKSPACE CONTEXT │ │ LIVE ANGULAR.DEV DOCS │ │ • Reads angular.json │ │ • Current Signals & Effects API │ │ • Identifies project roots & targets │ │ • Modern built-in Control Flow │ │ • Respects existing tsconfig/rules │ │ • Zoneless & OnPush patterns │ └───────────────────────┬──────────────┘ └─────────────┬─────────────────────┘ │ │ └───────────────┬───────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────────────────┐ │ THE DEVELOPER GAIN │ │ ✔ Zero Hallucinations: No deprecated `*ngIf`, `*ngFor`, or NgModules │ │ ✔ Tailored Output: Code paths & imports match your exact repo structure │ │ ✔ Zero Manual Prompts: No need to maintain static rulebooks or system docs │ └─────────────────────────────────────────────────────────────────────────────┘ If you already use MCP servers (like the ESLint tool), you can easily append the Angular server alongside your existing ones. Open your Angular project in VS Code. In your project root, open or create .vscode/mcp.json. Add the angular-cli entry to your servers object: JSON { "servers": { "ESLint": { "type": "stdio", "command": "npx", "args": ["@eslint/mcp@latest"] }, "angular-cli": { "type": "stdio", "command": "npx", "args": ["-y", "@angular/cli", "mcp"] } } } stdio? The stdio (Standard Input/Output) transport tells VS Code to spawn the server process entirely on your local machine. Your code and workspace configuration never leave your computer for the cloud; communication happens locally and securely. Open the VS Code Command Palette (Cmd+Shift+P on macOS, Ctrl+Shift+P on Windows/Linux) and run: Plaintext MCP: Restart All Servers If you use the interactive terminal wrapper for GitHub Copilot, you can connect the MCP server directly to the CLI's central environment. Launch your interactive terminal chat session: Bash copilot-cli chat Inside the chat session, run the configuration wizard: Plaintext /mcp add Complete the interactive prompts with these values: Name: angular-cli Type: 1. STDIO Command: npx Arguments: -y @angular/cli mcp Environment Variables: (Leave blank / press Enter) Tools: * Defer Tools: 1. Auto Note on Command vs. Arguments: Keep npx strictly in the Command field, and put -y @angular/cli mcp in the Arguments field. Combining them into the command field will trigger a process spawn failure. MCP servers sit in an idle state until you ask a question that triggers their tools. To verify everything is working, check the status inside your Copilot CLI session: Plaintext /mcp show Select angular-cli to inspect your registered tools. Now, enter a targeted prompt to test live workspace retrieval: "Use the angular-cli MCP server's list_projects tool right now to show me the applications configured in this directory." The model will invoke the tool, inspect your local angular.json, and return your exact app structure: Plaintext Projects in the Angular workspace: ┌───────────────────────┬─────────────┬─────────────────────┬─────────────┐ │ Name │ Type │ Root │ Source Root │ ├───────────────────────┼─────────────┼─────────────────────┼─────────────┤ │ storefront-app │ application │ "" (workspace root) │ src │ └───────────────────────┴─────────────┴─────────────────────┴─────────────┘ Feature Mode MCP Role Practical Benefit Interactive Chat / Inline Edit (Cmd/Ctrl + I) Active Reasoning Agent Inspects local configuration, queries current framework standards, and writes compliant modern syntax. Inline Autocomplete (Ghost Text) Passive Context Mirror Operates at ultra-low latency, naturally mirroring the modern patterns generated by your chat sessions. Now that your local bridge is live in VS Code and the GitHub Copilot CLI, dive deeper into the official documentation and team announcements: Angular.dev AI & MCP Documentation: The official reference page detailing every tool exposed by the CLI server (devserver.start, onpush_zoneless_migration, ai_tutor, and --read-only modes). Angular Official Blog — "Beyond the Horizon: Embracing AI for Next-Gen Apps": The core team's breakdown of why they integrated MCP directly into @angular/cli. Announcing Angular v21: Overview of stabilized AI tooling and modernization schematics in current Angular releases.