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

> Source: <https://dev.to/shivu_k_23def8e683da7e13a/angular-cli-mcp-server-setup-vs-code-copilot-cli-guide-2eme>
> Published: 2026-09-24 10:37:12+00:00

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.
