Angular 21 & MCP: The End of "Manual" Migrations?

Angular 21 introduces the Model Context Protocol (MCP) server. Learn how to connect your AI editor directly to the Angular CLI to automate upgrades, refactoring, and architectural shifts like Zoneless.

We used to treat AI like a smart stranger. We would copy-paste error messages or file contents into ChatGPT, hoping it understood our project's architecture. It was helpful, but it was blind.

With Angular 21, that stranger has moved into your house.

The release of the Angular CLI MCP Server (ng mcp) marks a fundamental shift in how we maintain applications. It isn't just a new command; it's a protocol that allows AI agents (like Cursor, Windsurf, or VS Code Copilot) to "interview" your project, understand your specific constraints, and run migrations that actually compile.

Here is why the "manual migration" era might be ending and how to survive the new Agentic Workflow.

What is MCP? (The "USB Port" for AI)

The Model Context Protocol (MCP) is an open standard that lets AI models connect to local tools and data.

Think of it this way:

Before MCP: You paste angular.json into the chat so the AI knows your file structure.

After MCP: The AI simply asks the Angular CLI, "Hey, list all the projects in this workspace," and the CLI responds with the exact structure, build targets, and library dependencies.

In Angular 21, the CLI is an MCP server. It exposes "tools" that your AI editor can call directly.

Setting It Up: 5 Minutes to "Agentic" Angular

The setup is surprisingly trivial because the Angular team baked it directly into the CLI.

1. Initialize the Server

In your Angular 21 workspace terminal:

ng mcp

This command doesn't start a daemon; it generates the configuration snippets you need for your specific IDE.

2. Connect Your Editor (e.g., Cursor)

If you are using Cursor (which you probably should be if you're interested in MCP), create or edit .cursor/mcp.json in your project root:

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

[!NOTE]
The -y flag is crucial to prevent the "Press y to install" prompt from hanging the background process.

The "Killer App": Context-Aware Migrations

Why go through this trouble? Because Context-Aware Migrations blow standard schematics out of the water.

Traditional ng update scripts are rigid. They follow a strict "If A, then B" logic. If your architecture is weird (and let's be honest, every enterprise architecture is weird), the script breaks or produces code you have to rewrite.

The MCP Server exposes tools that change this dynamic:

Tool 1: get_best_practices

The AI can fetch the current Angular team recommendations. It won't hallucinate that you should use SharedModule in 2025 because it "read it on a blog from 2021." It asks the CLI for the ground truth.

Tool 2: onpush_zoneless_migration

This is the big one for v21. Instead of blindly changing ChangeDetectionStrategy.Default to OnPush, the AI uses this tool to analyze your dependency graph.

The Workflow:

You: "Hey, I want to migrate user-profile.ts to Zoneless. Check if it's safe."

AI (Internal Thought): I need to check the component style. I'll call list_projects to find the root, then read the file.

AI (Internal Thought): I see an Observable subscription in ngOnInit. I'll check get_best_practices for handling async in Zoneless.

AI (Action): "I detected an unmanaged subscription. In Zoneless, this won't trigger a render. I recommend converting this user$observable to a Signal using toSignal() before we switch the strategy."

It doesn't just apply a fix; it negotiates the refactor with you based on the framework's internal logic.

Tool 3: search_documentation

The AI doesn't need to guess API signatures. It queries the local offline documentation index provided by the MCP server.

Real-World Scenario: The "Legacy" Cleanup

Let's say you have an Angular 17-style component using HttpClientModule (deprecated approach) and RxJS for simple state.

Prompt to Cursor (with MCP active):

"Refactor dashboard.component.ts to align with Angular 21 best practices. Use the get_best_practices tool to verify your plan first."

What happens:

1. The AI calls get_best_practices and learns that standalone: true, inject(), and Signals are the standard.
2. It calls modernize (an experimental tool in v21) to run the standard schematics.
3. It manually cleans up the leftovers—converting constructor(private http: HttpClient) to private http = inject(HttpClient).
4. It converts your BehaviorSubject state to signal.

The result is code that looks like it was written in v21, not just patched to run in v21.

The Future: Continuous Maintenance

This release signals a change in how Google views the CLI. It's no longer just a build tool; it's an interface for agents.

In the near future, we likely won't "stop development" to upgrade. We will have a background agent running via MCP that opens PRs:

"I noticed you used a ControlValueAccessor here. I've created a PR to refactor this to the new Signal Forms input API."

"Angular v22 just dropped. I've updated your angular.json and verified your tests via vitest."

Summary: Don't Upgrade Alone

If you are moving to Angular 21, do not just run ng update and fight the compile errors manually.

1. Install the MCP server.
2. Let the AI map your project.
3. Ask it to plan the migration for you.

The code is still your responsibility, but the grunt work? That belongs to the machine now.