An AI assistant that knows Angular from its training data is always a little behind: it suggests *ngIf, NgModules and @Input() because that is what most of the code it learned from looked like. The Angular CLI's MCP server fixes that by giving the assistant live tools: the current angular.dev documentation, the official best-practices guide, your workspace's real project list, and commands like building and serving your app. Getting there takes one small JSON file, but each AI tool wants that file in a slightly different place and shape.

This is lesson 12.2 of the Angular Tutorial. Lesson 12.1 explained what ng mcp is and why it matters. This lesson is the practical part: connecting it to Claude Code, Claude Desktop, Cursor, VS Code and other MCP clients, choosing safe flags, sharing the setup with your team, and fixing the usual problems. If MCP itself is new to you, what MCP is is a five-minute primer.

How the connection works #

Every client in this lesson does the same thing under the hood:

There is nothing to install globally and no port to open. The client starts the CLI when a session begins and stops it when the session ends. npx -y downloads the CLI on first use and runs it without prompting.

Because the server reads your angular.json, start it from your workspace: a project-level config file (checked into the repo) is almost always better than a global one.

Prerequisites #

• Node.js in a version your Angular CLI supports. Run node -v and compare with the CLI's requirements if npx complains.
• An Angular workspace (a folder with angular.json) for the project-aware tools. Documentation and best-practice tools work without one.
• An MCP-capable client: Claude Code, Claude Desktop, Cursor, VS Code with Copilot agent mode, JetBrains AI Assistant, or any other client that supports stdio servers.

Claude Code #

Claude Code has a built-in command for adding servers. From your workspace root:

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

--scope project writes the server into a .mcp.json file at the repo root, so everyone who clones the repo gets the same setup (Claude Code asks each person to approve project servers the first time). Leave the flag out to add it only for yourself.

The resulting .mcp.json looks like this, and you can also write it by hand:

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

Run claude mcp list to confirm it's registered, or type /mcp inside a session to see its status and tools.

Claude Desktop #

Claude Desktop reads a single global file, claude_desktop_config.json:

Add the server under mcpServers:

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

Restart Claude Desktop completely (quit it from the tray or menu bar, not just the window). Desktop isn't tied to a folder, so this is best for documentation and best-practice questions; for project work, a folder-aware client is a better fit. Our Claude Desktop MCP guide covers the file in more depth.

Cursor #

Cursor reads .cursor/mcp.json in the project, or ~/.cursor/mcp.json for every project:

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

Open Cursor's MCP settings afterwards and check that angular-cli shows as enabled with its tools listed. The Cursor MCP setup guide walks through the settings screen.

VS Code #

VS Code (with Copilot in agent mode) reads .vscode/mcp.json. Note the top-level key is servers, not mcpServers, which is the most common copy-paste mistake:

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

VS Code shows a Start code lens above the server entry in the file; click it, then pick the tools in the agent-mode tool picker.

Other clients #

JetBrains AI Assistant, Gemini CLI, Antigravity and most other clients accept the same command + args pair, usually under mcpServers. The Angular docs show Antigravity using .antigravity/mcp.json with exactly the Cursor shape. If your client has an "add MCP server" dialog, the values are always:

• Command: npx
• Arguments: -y @angular/cli mcp (plus any flags)
• Transport: stdio

The clients side by side #

If you use more than one client on the same repo, commit each client's project file. They're tiny, and keeping them identical (same flags, same pinned version) avoids "it works in Cursor but not in Claude Code" confusion.

Choose your flags #

The server supports two flags that shape what the model can do:

A sensible progression: start with --read-only for a week, then drop it once you're comfortable with what the tools do. Add a flag by appending it to args:

"args": ["-y", "@angular/cli", "mcp", "--read-only"]

The tool list evolves with each Angular release. At the time of writing the defaults include search_documentation, get_best_practices, list_projects, ai_tutor, onpush_zoneless_migration, run_target and the devserver.* tools. Some tools described in earlier write-ups (including our 12.1 overview) have since been renamed or replaced, so check your client's tool list rather than a blog post, this one included. Lesson 12.3 tours the current tools one by one.

A note on what the model can run #

Without --read-only, the server exposes run_target, which runs any architect target defined in your angular.json: build, test and lint, but also anything else your team has added, such as a deploy target. The assistant will normally ask before calling it, and most clients show a confirmation prompt for tool calls, but the capability is there.

Three habits keep that safe:

• Keep --read-only in shared configs and let individuals opt into the full tool set locally.
• Review your angular.json targets once. If a target deploys, publishes or touches production, consider moving it to an npm script the MCP server can't see.
• Don't auto-approve tool calls for this server in your client's settings until you've watched it work for a while.

The dev-server tools are lower risk: they start and stop ng serve locally and report build output, which is exactly what makes the assistant useful for "fix the build error" loops.

Pin the version, or don't #

npx -y @angular/cli mcp always runs the latest CLI. That's convenient, but it means the tools can change under you. Two alternatives:

"args": ["-y", "@angular/cli@22", "mcp"]

pins the major version, and running your workspace's own CLI (npx ng mcp from the project root, with @angular/cli in devDependencies) keeps the MCP server in lockstep with the Angular version the project actually uses. For teams, the workspace CLI is usually the right answer: the assistant gets best practices for your version, not the newest one.

Verify it works #

Don't trust a green dot; ask the model something only the server can answer:

1. Tool list: confirm angular-cli tools appear (/mcp in Claude Code, the MCP panel in Cursor, the tool picker in VS Code).
2. Workspace tool: ask "Which projects are in this workspace?". The answer should match your angular.json and name the list_projects tool.
3. Live docs: ask about a recent API, for example "How do I use linkedSignal?", and check it cites angular.dev via search_documentation rather than answering from memory.

Troubleshooting #

Share it with your team #

Commit the project-level file your team uses (.mcp.json for Claude Code, .cursor/mcp.json, .vscode/mcp.json) alongside the code. Everyone gets the same server, the same flags and the same pinned version, and onboarding becomes "open the repo and approve the server". Keep --read-only in the shared file if some teammates are new to agentic tools; people who want more can override it locally.

What's next #

Lesson 12.3 compares the Angular CLI's MCP server with generic servers like filesystem and GitHub: what each tool actually does, where the Angular server's knowledge beats a general-purpose one, and where it doesn't. Lessons 12.4 and 12.5 then cover running companion servers alongside it and an end-to-end AI-assisted workflow.

Try it yourself #

Add the server to the client you use most, with --read-only, then run the three verification questions above. If list_projects returns your projects and the linkedSignal answer cites angular.dev, you're set up correctly.