Stop Writing Outdated Angular Code: MCP Setup with Cursor & Claude Code

Angular has changed a lot in the last few releases — in a good way.

Standalone components, signals, block templates (@if, @for), zoneless apps… and now, first-class AI integration.

So, if you're starting a new Angular project today, building "the old way" slows you down.

And manually keeping up with every API change? No thanks.

The good news: your IDE can help you — if you set it up correctly.

In this post, we'll:

• Set up a clean Angular project

• Configure AI rules so your IDE understands modern Angular

• Enable Angular's MCP server (Model Context Protocol)

• See how Cursor talks directly to the Angular CLI

• Avoid a small "duplicated config" trap I ran into.

Let's go step-by-step.

Why AI + Angular Makes Sense Now

Angular moves fast. Some big milestones:

Feature	Introduced	Why It Matters
Standalone default	v14 (Experimental)	No more NgModules overhead
Signals stable	v16 (Preview)	Reactive primitives, better perf
Block syntax (@if, @for, @switch)	v17 (Preview)	Cleaner templates, no directives
@let	v18 (Preview)	Template variables without ngIf hacks
AI tooling + MCP	v20 (Experimental)	IDE knows Angular conventions

And honestly — writing everything by hand and remembering every new convention isn't worth it anymore.

Before AI setup:

• You Google "Angular input decorator"
• Find a Stack Overflow answer from 2019
• Use @Input() instead of input()
• Your code works, but it's outdated

With AI setup:

• You ask: "create a user input"
• AI generates: readonly user = input.required()
• Modern, signal-based, type-safe

The key is helping the AI know how Angular works today, not how it worked in 2019.

Create a New Angular Project (with AI Support)

Let's start from scratch to keep things simple and reproducible.

# Requires Angular CLI v19+
yarn global add @angular/cli
ng new mcp-demo # generating an new Angular app

you'll see a new question:

✔ Which stylesheet format would you like to use? Sass (SCSS)
✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
✔ Do you want to create a 'zoneless' application without zone.js? Yes
? Which AI tools do you want to configure with Angular best practices? https://angular.dev/ai/develop-with-ai
 ◯ None
 ◯ Claude         [ https://docs.anthropic.com/en/docs/claude-code/memory ]
 ❯ ◉ Cursor         [ https://docs.cursor.com/en/context/rules ]
 ◯ Gemini         [ https://ai.google.dev/gemini-api/docs ]
 ◯ GitHub Copilot [ https://code.visualstudio.com/docs/copilot/copilot-customization ]
 ◯ JetBrains AI   [ https://www.jetbrains.com/help/junie/customize-guidelines.html ]
 ◯ Windsurf       [ https://docs.windsurf.com/windsurf/cascade/memories#rules ]

This file contains Angular's official AI best-practice rules, designed for Cursor's AI context engine.

It tells your IDE how to reason about Angular projects — for example, how to use standalone components, signals, and the new @if / @for template syntax.

If need go deeper in how works rules in cursor can check this link https://cursor.com/docs/context/rules

Cursor vs Claude Code: File Locations

If you're using Claude Code instead of Cursor, here are the only differences:

File	Cursor	Claude Code
Rules file	.cursor/rules/angular-20.mdc	.claude/CLAUDE.md
MCP config	.cursor/mcp.json	.mcp.json
Content	Same Angular best practices	Same Angular best practices

Enable the Angular CLI MCP Server

When you run ng mcp, Angular doesn't create anything — instead, it prints the configuration you'll need to connect your IDE's AI to the Angular CLI.

You'll see something like this:

ng mcp

To start using the Angular CLI MCP Server, add this configuration to your host:

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

Exact configuration may differ depending on the host.

For more information and documentation, visit: https://angular.dev/ai/mcp

This tells you exactly what to add to your IDE's MCP config file.

Create the MCP configuration file in your project root:

For Cursor:

/.cursor/mcp.json

For Claude:

/.mcp.json

then paste this content:

{
  "mcpServers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    } // if you have move mcp servers, add a comma and paste it after the last
  }
}

Now your IDE knows how to start Angular's MCP server whenever you open this project.

This configuration is project-level, which means it only applies inside this repo — not globally across all your projects.

Verify MCP Connection

In Cursor:

Once you add the .cursor/mcp.json configuration, open Cursor → Settings → MCP Servers.

You should now see something like this:

This confirms that Cursor has successfully connected to the Angular CLI MCP server.

In Claude Code (Extension or CLI):

If using the VS Code extension:

• Open the Claude chat panel in VS Code

• Type /mcp to verify MCP servers

If using the CLI:

• Open your terminal

• Run claude

• Type /mcp in the interactive session

With that, we will have available the next tools:

• get_best_practices – retrieves Angular's official AI recommendations.

• search_documentation – lets the AI search directly through Angular's docs.

• list_projects – lists projects defined in your workspace (angular.json).

With this setup, your AI assistant can now call Angular's own tools directly from the chat. It's pretty cool — you can literally ask:

I need a component for show a list of users.

You'll notice that the first thing Cursor does is try to search for angular-20.mdc inside the rules folder. After that, Cursor runs get_best_practices from the MCP.

// user-list.ts

@Component({
  selector: 'app-users-list',
  templateUrl: './users-list.html',
  styleUrl: './users-list.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UsersListComponent {
  readonly users = input<User[]>([]);
  readonly selectedUserId = signal<number | null>(null);

  selectUser(userId: number): void {
    if (this.selectedUserId() === userId) {
      this.selectedUserId.set(null);
    } else {
      this.selectedUserId.set(userId);
    }
  }

  isSelected(userId: number): boolean {
    return this.selectedUserId() === userId;
  }
}

Before, you'd get NgModules, Input() and old *ngFor syntax Now, it follows the latest Angular style automatically.

Done — Your Angular + AI Setup Is Ready

Now you have:

• Angular project with AI-aware rules

• MCP connected so your IDE can run ng commands

• Modern Angular code generation (standalone + signals + blocks)

This setup has already saved me time catching up with Angular's newer APIs and conventions — and my generated code stays clean and consistent.

If you're adopting modern Angular, this is honestly the best-experience setup right now.

Quick note about the Rules vs the MCP "instructions"

When you create the project and choose your AI tool, Angular generates a local rules file:

# For Cursor
.cursor/rules/angular-20.mdc

# For Claude Code
.claude/CLAUDE.md

This file contains Angular's official best practices — the rules the AI should follow when generating Angular code.

Think of this one as your "base rulebook". And the nice part is: you can customize it.

For example, I added a line telling the AI not to import CommonModule unless it was actually needed — and when I generated a new component, it respected that rule.

Now, inside your AI tool's MCP panel, you'll also see an "instructions" button (and the get_best_practices tool). That content looks identical — and it is — but that version is read-only.

So the difference is:

Source	Purpose	Editable?
.cursor/rules/angular-20.mdc or .claude/CLAUDE.md	Local base rules for your project	Yes, meant to customize
MCP "instructions" view	Framework rules served via MCP	No, read-only

And that's intentional — the framework gives you a default rule set, but also lets you evolve it for your own project conventions.

What's Next?

Now that you have Angular + AI working, try:

1. Generate a full feature — Ask AI to scaffold a CRUD with routing

2. Refactor legacy code — Migrate old components and ask to modernize them

3. Customize your rules — Edit .cursor/rules/angular-20.mdc (or .claude/CLAUDE.md) for your team's conventions

Alright, You're All Set

The setup takes 5 minutes. The time saved? Endless.

Now go build something amazing with modern Angular and AI-powered tooling.

Happy augmented coding!