{"slug": "angular-cli-mcp-server-setup-vs-code-copilot-cli-guide", "title": "Angular CLI MCP Server Setup: VS Code & Copilot CLI Guide", "summary": "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.", "body_md": "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.\n\nThe core issue has always been twofold: **stale training data** and **zero runtime awareness of your local workspace**.\n\nTo 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`.\n\nHere is how to set up the Angular CLI MCP server across both **VS Code** and the **standalone GitHub Copilot CLI**.\n\nPreviously, 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:\n\n**`list_projects`**: Automatically reads your `angular.json` so the AI knows your workspace structure, source roots, and application targets.\n\n**`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.\n\n**`get_best_practices`**: Enforces official style guidelines and modern signals out of the box.\n\nPlaintext\n\n```\n┌─────────────────────────────────────────────────────────────────────────────┐\n│                            DEVELOPER / IDE                                  │\n│  \"Add a user feed component with signals and zoneless change detection\"    │\n└──────────────────────────────────────┬──────────────────────────────────────┘\n                                       │\n                                       ▼\n┌─────────────────────────────────────────────────────────────────────────────┐\n│                      AI AGENT (VS Code / Copilot CLI)                       │\n│  Recognizes intent ➔ Queries Angular MCP tools instead of guessing         │\n└───────────────────────┬───────────────────────────────┬─────────────────────┘\n                        │                               │\n       TOOL: list_projects & workspace                  │ TOOL: search_documentation &\n       configuration                                    │       get_best_practices\n                        ▼                               ▼\n┌──────────────────────────────────────┐  ┌───────────────────────────────────┐\n│     LOCAL WORKSPACE CONTEXT          │  │     LIVE ANGULAR.DEV DOCS         │\n│ • Reads angular.json                 │  │ • Current Signals & Effects API  │\n│ • Identifies project roots & targets │  │ • Modern built-in Control Flow    │\n│ • Respects existing tsconfig/rules   │  │ • Zoneless & OnPush patterns      │\n└───────────────────────┬──────────────┘  └─────────────┬─────────────────────┘\n                        │                               │\n                        └───────────────┬───────────────┘\n                                        │\n                                        ▼\n┌─────────────────────────────────────────────────────────────────────────────┐\n│                              THE DEVELOPER GAIN                             │\n│  ✔ Zero Hallucinations: No deprecated `*ngIf`, `*ngFor`, or NgModules       │\n│  ✔ Tailored Output: Code paths & imports match your exact repo structure     │\n│  ✔ Zero Manual Prompts: No need to maintain static rulebooks or system docs │\n└─────────────────────────────────────────────────────────────────────────────┘\n```\n\nIf you already use MCP servers (like the ESLint tool), you can easily append the Angular server alongside your existing ones.\n\nOpen your Angular project in VS Code.\n\nIn your project root, open or create `.vscode/mcp.json`.\n\nAdd the `angular-cli` entry to your `servers` object:\n\nJSON\n\n```\n{\n  \"servers\": {\n    \"ESLint\": {\n      \"type\": \"stdio\",\n      \"command\": \"npx\",\n      \"args\": [\"@eslint/mcp@latest\"]\n    },\n    \"angular-cli\": {\n      \"type\": \"stdio\",\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@angular/cli\", \"mcp\"]\n    }\n  }\n}\n```\n\n`stdio`?\nThe `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.\n\n`Cmd+Shift+P` on macOS, `Ctrl+Shift+P` on Windows/Linux) and run:\n\n```\nMCP: Restart All Servers\n```\n\nIf you use the interactive terminal wrapper for GitHub Copilot, you can connect the MCP server directly to the CLI's central environment.\n\nBash\n\n```\ncopilot-cli chat\n/mcp add\n```\n\n**Name:** `angular-cli`\n\n**Type:** `1. STDIO`\n\n**Command:** `npx`\n\n**Arguments:** `-y @angular/cli mcp`\n\n**Environment Variables:** *(Leave blank / press Enter)*\n\n**Tools:** `*`\n\n**Defer Tools:** `1. Auto`\n\n**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.\n\nMCP servers sit in an idle state until you ask a question that triggers their tools.\n\nTo verify everything is working, check the status inside your Copilot CLI session:\n\n```\n/mcp show\n```\n\nSelect `angular-cli` to inspect your registered tools.\n\nNow, enter a targeted prompt to test live workspace retrieval:\n\n*\"Use the angular-cli MCP server's `list_projects` tool right now to show me the applications configured in this directory.\"*\n\nThe model will invoke the tool, inspect your local `angular.json`, and return your exact app structure:\n\n```\nProjects in the Angular workspace:\n\n┌───────────────────────┬─────────────┬─────────────────────┬─────────────┐\n│ Name                  │ Type        │ Root                │ Source Root │\n├───────────────────────┼─────────────┼─────────────────────┼─────────────┤\n│ storefront-app        │ application │ \"\" (workspace root) │ src         │\n└───────────────────────┴─────────────┴─────────────────────┴─────────────┘\n```\n\n**Feature Mode**\n\n**MCP Role**\n\n**Practical Benefit**\n\n**Interactive Chat / Inline Edit** (`Cmd/Ctrl + I`)\n\nActive Reasoning Agent\n\nInspects local configuration, queries current framework standards, and writes compliant modern syntax.\n\n**Inline Autocomplete** (Ghost Text)\n\nPassive Context Mirror\n\nOperates at ultra-low latency, naturally mirroring the modern patterns generated by your chat sessions.\n\nNow that your local bridge is live in VS Code and the GitHub Copilot CLI, dive deeper into the official documentation and team announcements:\n\n**[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).\n\n**[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`.\n\n**[Announcing Angular v21](https://blog.angular.dev/announcing-angular-v21-57946c34f14b):** Overview of stabilized AI tooling and modernization schematics in current Angular releases.", "url": "https://wpnews.pro/news/angular-cli-mcp-server-setup-vs-code-copilot-cli-guide", "canonical_source": "https://dev.to/shivu_k_23def8e683da7e13a/angular-cli-mcp-server-setup-vs-code-copilot-cli-guide-2eme", "published_at": "2026-09-24 10:37:12+00:00", "updated_at": "2026-09-24 11:01:37.045513+00:00", "lang": "en", "topics": ["ai-agents", "agent-protocols", "developer-tools", "ai-tools"], "entities": ["Angular", "Angular CLI", "Model Context Protocol", "VS Code", "GitHub Copilot CLI", "angular.dev"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/angular-cli-mcp-server-setup-vs-code-copilot-cli-guide", "markdown": "https://wpnews.pro/news/angular-cli-mcp-server-setup-vs-code-copilot-cli-guide.md", "text": "https://wpnews.pro/news/angular-cli-mcp-server-setup-vs-code-copilot-cli-guide.txt", "jsonld": "https://wpnews.pro/news/angular-cli-mcp-server-setup-vs-code-copilot-cli-guide.jsonld"}}