How to configure the Angular CLI MCP server

When I wrote up Angular v22 I flagged in passing that Angular’s MCP tooling had gone stable. This post is the practical follow-up: how to actually wire it into your editor. The Angular CLI ships an experimental Model Context Protocol (MCP) server, and once it’s connected your AI assistant stops guessing about your project and starts asking the CLI directly.

That difference matters. A raw LLM answers from whatever Angular it remembers — often a version or two behind. With the MCP server connected, the assistant can list the projects in your workspace, search the current docs, pull real code examples and run migrations against your actual files. Less hallucinated NgModule boilerplate, more code that matches the Angular you’re really on.

Prerequisites

You need two things:

• Angular CLI v20 or newer. The MCP server ships with the CLI. Check your version:

ng version

• An MCP-capable editor — Claude Code, Cursor, VS Code (with Copilot), Gemini CLI, Firebase Studio, Windsurf, and others all speak MCP.

No extra install. The server runs through npx, so there’s nothing to add to your package.json.

Step 1 — See the setup instructions

The CLI has a helper that prints the exact configuration for your environment:

ng mcp

Under the hood every editor launches the same command — npx -y @angular/cli mcp — and talks to it over stdio. The -y flag lets npx resolve @angular/cli without an interactive prompt. You won’t run that command by hand; your editor spawns it. The rest is just telling each editor about it.

Step 2 — Register the server in your editor

Each tool reads its MCP config from a different file. Pick yours.

Claude Code

Drop a .mcp.json at your project root:

{
	"mcpServers": {
		"angular-cli": {
			"command": "npx",
			"args": ["-y", "@angular/cli", "mcp"]
		}
	}
}

Or skip the file and let the CLI register it for you:

claude mcp add angular-cli -- npx -y @angular/cli mcp

Cursor

Add a .cursor/mcp.json in the project root (or ~/.cursor/mcp.json to enable it everywhere):

{
	"mcpServers": {
		"angular-cli": {
			"command": "npx",
			"args": ["-y", "@angular/cli", "mcp"]
		}
	}
}

VS Code

Create .vscode/mcp.json. Watch the key here — VS Code uses servers, not mcpServers. Copy the Cursor block by mistake and the server silently never loads:

{
	"servers": {
		"angular-cli": {
			"command": "npx",
			"args": ["-y", "@angular/cli", "mcp"]
		}
	}
}

Step 3 — Verify the connection

Restart your editor so it picks up the new config, then confirm the angular-cli server shows as connected in the MCP panel (Claude Code lists it under /mcp; Cursor and VS Code show it in their MCP settings view).

The fastest real test is to ask the assistant something only the server can answer about your workspace:

“List the Angular projects in this workspace and show me the current docs for httpResource.”

If it comes back with your actual project names and pulls live documentation, the wiring is good. If it stays vague, double-check the config filename, the JSON key (servers vs mcpServers), and that the editor was fully restarted.

What the tools actually do

Once connected, the server exposes a handful of tools the assistant calls on its own. By default you get:

• list_projects — enumerates the Angular projects defined in your workspace.
• search_documentation — searches the official Angular docs so answers track the current version, not training data.
• find_examples — pulls vetted code examples for a pattern instead of inventing one.
• get_best_practices — returns Angular’s current best-practice guidance (signals, control flow, standalone, and so on).
• onpush_zoneless_migration — helps move a codebase toward OnPush and zoneless change detection.
• ai_tutor — an interactive teaching mode for learning Angular concepts in context.

There’s also an experimental modernize tool that performs code migrations and rewrites older syntax toward the latest idioms. Treat it as preview-grade — review its diffs before you commit.

Bonus: generate AI config files

Separate from the MCP server, the CLI can also drop best-practice instruction files into your repo so the assistant follows Angular conventions even outside a tool call:

ng generate ai-config --tool claude

Swap claude for cursor, copilot, gemini, windsurf, jetbrains, or agents depending on your setup. The MCP server gives the assistant live tools; ai-config gives it standing instructions. They pair well — use both.

Wrap-up

That’s the whole setup: confirm CLI v20+, point your editor at npx -y @angular/cli mcp, restart, verify. The MCP server is still marked experimental, so expect the tool set to grow and shift between releases — but even today it’s the cleanest way to make an AI assistant actually understand the Angular project in front of it. Full details live in the official Angular MCP docs.