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

The Angular team has added Model Context Protocol (MCP) support to the Angular CLI via the `@angular/cli mcp` command, letting AI coding assistants query live workspace schemas and current angular.dev documentation instead of relying on stale training data. The server exposes tools including `list_projects`, which reads angular.json for project structure, `search_documentation`, which fetches current Angular docs, and `get_best_practices`, which enforces official style guidance. Setup instructions cover both VS Code (via `.vscode/mcp.json`) and the standalone GitHub Copilot CLI.

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. 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. Cmd+Shift+P on macOS, Ctrl+Shift+P on Windows/Linux and run: 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. Bash copilot-cli chat /mcp add 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: /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: 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 https://angular.dev/ai : 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" https://blog.angular.dev/beyond-the-horizon-how-angular-is-embracing-ai-for-next-gen-apps-7a7ed706e1a3 : The core team's breakdown of why they integrated MCP directly into @angular/cli . Announcing Angular v21 https://blog.angular.dev/announcing-angular-v21-57946c34f14b : Overview of stabilized AI tooling and modernization schematics in current Angular releases.