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.

The Core Concept: Bye-Bye Static "AI Skills"

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 │
└─────────────────────────────────────────────────────────────────────────────┘

Part 1: Integrating with the VS Code GUI

If you already use MCP servers (like the ESLint tool), you can easily append the Angular server alongside your existing ones.

1. Open your Angular project in VS Code.

2. In your project root, open or create .vscode/mcp.json.

3. 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"]
    }
  }
}

Why 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.

1. Open the VS Code Command Palette (Cmd+Shift+P on macOS, Ctrl+Shift+P on Windows/Linux) and run:

Plaintext

MCP: Restart All Servers

Part 2: Integrating with the Standalone GitHub Copilot CLI

If you use the interactive terminal wrapper for GitHub Copilot, you can connect the MCP server directly to the CLI's central environment.

1. Launch your interactive terminal chat session:

Bash

copilot-cli chat

1. Inside the chat session, run the configuration wizard:

Plaintext

/mcp add

1. 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.

Part 3: Waking Up and Testing the Connection

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         │
└───────────────────────┴─────────────┴─────────────────────┴─────────────┘

How It Changes Your Daily Workflow

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.

Official References & Further Reading

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.