Angular CLI MCP Server: The Complete Guide to All Available Tools

How Angular just revolutionized AI-assisted development with Model Context Protocol.

Aug 18, 2025

Angular CLI 20.2 quietly introduced something that could fundamentally change how we develop Angular applications: Model Context Protocol (MCP) server functionality. If you’re wondering what tools are available and how to use them, you’re in the right place.

If you want to learn more about the beginning of the MCP servers and how Angular integrated its own, you can do it here.

Prerequisites & Core Concept

Before diving into the tools, it is essential to understand the roles of the three main components and what you need to get started:

Essential Prerequisites

Node.js & npm: The Angular CLI MCP server is a Node.js process, so ensure you have a recent version of Node.js (v18 or newer is typically recommended).
Angular CLI: The server functionality is built into the latest versions of the Angular CLI (@angular/cli).
A Compatible AI Client: You must be using an IDE or editor with an AI agent that supports the Model Context Protocol (MCP), such as VS Code (with GitHub Copilot/Agent mode) or Cursor.

Configure your MCP following the official Angular MCP guide.

Important: Two Ways to Configure

Throughout this guide, you’ll see two ways to enable tools and modes:

Command Line - For testing or one-time use:

ng mcp --read-only -E modernize

Configuration File - For persistent setup in your IDE:

{
   “servers”: {
     “angular-cli”: {
       “command”: “npx”,
       “args”: [”-y”, “@angular/cli”, “mcp”, “--read-only”, “-E”, “modernize”]
     }
   }
}

Most users will use the configuration file approach as it persists across IDE sessions.

For VS Code (.vscode/mcp.json)

Basic Setup (All Stable Tools)

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

Read-Only Mode (Safe for Learning)

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [”-y”, “@angular/cli”, “mcp”, “--read-only”]
    }
  }
}

With Modernize Tool (For Migrations)

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [”-y”, “@angular/cli”, “mcp”, “-E”, “modernize”]
    }
  }
}

With AI Tutor (For Learning)

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [”-y”, “@angular/cli”, “mcp”, “-E”, “ai-tutor”]
    }
  }
}

All Experimental Tools Enabled

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [”-y”, “@angular/cli”, “mcp”, “-E”, “modernize”, “-E”, “ai-tutor”]
    }
  }
}

Offline Mode (Local-Only)

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [”-y”, “@angular/cli”, “mcp”, “--local-only”]
    }
  }
}

Maximum Security (Read-Only + Local-Only)

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [”-y”, “@angular/cli”, “mcp”, “--read-only”, “--local-only”]
    }
  }
}

Note: After changing your configuration file, restart your IDE for the changes to take effect.

The Core Concept: Why You Don’t Run the Commands

When you use the Angular CLI MCP server, you are not expected to manually run commands like ng generate or ng mcp --read-only repeatedly.

Instead, you set up a secure Server-Client connection:

The Server: The Angular CLI (ng mcp) runs in the background. It provides a set of powerful, up-to-date tools.
The Client: Your AI agent in the editor listens to your prompts (e.g., “Generate a new component”).

When you prompt the agent to perform a task, the AI agent will internally execute the necessary Angular CLI commands and then process the output and present you with the suggested changes or the resulting code.

Complete MCP Tools Reference

The Angular CLI MCP server provides 6 main tools divided into two categories: Stable Tools (enabled by default) and Experimental Tools (require explicit opt-in). Let’s explore each one in detail.

Stable Tools (Enabled by Default)

These tools are production-ready and available whenever you run ng mcp.

1. `get_best_practices` - Your Angular Style Guide Oracle

📅 Available Since: Initial MCP Implementation (June 2025)

🔧 Recent Enhancements:

Version-aware (Angular 21)

What it does:
Retrieves the official Angular coding best practices guide directly from angular.dev. This is the first tool your AI agent should call before writing or modifying any Angular code.

When the AI uses it:

When you ask about Angular patterns or architecture
Before generating any Angular code
When you request code reviews or improvements
When you ask “what’s the best way to...”

What it returns:
The complete, up-to-date Angular Best Practices Guide, including:

TypeScript best practices
Component patterns (standalone components, signals)
State management guidelines
Template syntax recommendations
Service design principles

Tool Properties:

{
  name: 'get_best_practices',
  isReadOnly: true,
  isLocalOnly: true
}

Real-World Example Interaction

Developer: “Create a user profile component with a form”

AI Agent: [Internally calls get_best_practices()]

AI Agent: “I’ll create a modern Angular component following best practices. 
Based on the Angular style guide, I’ll use:
- Standalone component (no NgModule)
- Signal-based inputs
- Reactive forms
- OnPush change detection
- inject() for dependency injection

Let me create that for you...”

[Generates code following all current best practices]

Advanced Example

Developer: “Review my component and suggest improvements”

AI Agent: [Calls get_best_practices() to get current standards]

AI Agent: “I’ve analyzed your component against Angular’s latest best practices. 
Here are my findings:

✅ Good:
- Using standalone component
- Proper TypeScript typing

⚠️ Needs Improvement:
1. Replace @Input() with input() signal function
2. Update *ngFor to @for control flow
3. Change ChangeDetectionStrategy to OnPush
4. Replace constructor injection with inject()

Would you like me to refactor this component to follow all current best practices?”

2. `search_documentation` - Live Angular.dev Search

📅 Available Since: Initial MCP Implementation (June 2025)

What it does:
Searches the official angular.dev documentation in real-time. This ensures your AI never relies on outdated training data.

When the AI uses it:

When you ask about specific Angular features or APIs
When you need current documentation
When troubleshooting or asking “how do I...”
When exploring new Angular features

What it returns:

List of search results with titles and URLs
Breadcrumb navigation paths
Sometimes includes full content of the top-ranked page
The major version of the documentation that was searched (Angular 21)

Tool Properties:

{
  name: ‘search_documentation’,
  isReadOnly: true,
  isLocalOnly: false  // Requires internet
}

Real-World Example Interaction

Developer: “How do I use the new @defer syntax for lazy loading components?”

AI Agent: [Internally calls search_documentation(”defer lazy loading”)]

AI Agent: “I found the official documentation on @defer blocks. Here’s what you need to know:

The @defer block allows you to lazy-load components and their dependencies. 
Here’s the basic syntax:

@defer {
  <heavy-component />
} @placeholder {
  <p>Loading...</p>
}

You can add triggers like:
- @defer (on viewport) - loads when visible
- @defer (on idle) - loads when browser is idle
- @defer (on interaction) - loads on user interaction

Full documentation: https://angular.dev/guide/defer

Would you like me to show you how to implement this in your application?”

Complex Search Example

Developer: “What’s the difference between signals and RxJS observables?”

AI Agent: [Calls search_documentation(”signals vs observables”)]

AI Agent: “Based on the official Angular documentation, here are the key differences:

**Signals:**
- Synchronous reactive primitive
- Always have a current value
- Automatically track dependencies
- Best for local component state

**RxJS Observables:**
- Asynchronous streams over time
- Can complete or error
- Manually managed subscriptions
- Best for async operations like HTTP

The docs recommend:
- Use signals for component state and derived values
- Use observables for async operations and events
- You can easily convert between them using toSignal() and toObservable()

Documentation: https://angular.dev/guide/signals

Would you like examples of when to use each?”

3. `list_projects` - Workspace Structure Analysis

📅 Available Since: Initial MCP Implementation (June 2025)

🔧 Enhanced: Improved for monorepos

What it does:
Parses your angular.json to understand every application, library, and configuration within your workspace. This gives AI context-aware understanding of your project structure.

When the AI uses it:

When you ask “where should I put this file?”
Before generating new components or services
When analyzing project architecture
When working with monorepos

What it returns:
For each project:

Project name
Type (application or library)
Root directory path
Component selector prefix
Source root directory
Build configuration details
Unit test framework (Angular 21)
Default style language (Angular 21)

Tool Properties:

{
  name: ‘list_projects’,
  isReadOnly: true,
  isLocalOnly: true
}

Real-World Example Interaction

Developer: “Create a new authentication service”

AI Agent: [Calls list_projects() to understand workspace structure]

AI Agent: “I can see you have a monorepo with:
- Main application: ‘my-app’ (apps/my-app)
- Shared library: ‘shared-ui’ (libs/shared-ui)
- Core library: ‘core’ (libs/core)

Since authentication is a core concern shared across the app, I recommend 
placing the service in your ‘core’ library at:
libs/core/src/lib/services/auth.service.ts

Shall I create it there following your project’s conventions?”

Monorepo Example

Developer: “I want to add a button component. Where should it go?”

AI Agent: [Calls list_projects()]

AI Agent: “Looking at your workspace structure, I can see:

**Applications:**
1. admin-portal (apps/admin-portal)
2. customer-app (apps/customer-app)

**Libraries:**
1. ui-components (libs/ui-components) - selector prefix: ‘ui’
2. shared-utils (libs/shared-utils)

Since you have a dedicated ‘ui-components’ library, I recommend placing 
the button component there:
libs/ui-components/src/lib/button/button.component.ts

This way it can be reused across both applications. The component selector 
would be: <ui-button>

Does that work for your architecture?”

4. `find_examples` - Code Example Discovery

📅 Initial Release: Experimental (August 2025)
📅 Promoted to Stable: September 2025

🔧 Recent Enhancements:

Advanced filtering support
Snippet support
Structured output improvements
Version-aware (Angular 21)

What it does:
Searches through Angular’s curated code examples repository to find real, working examples that demonstrate specific features or patterns.

When the AI uses it:

When you ask “show me an example of...”
When learning new Angular features
When you need a reference implementation
When exploring best practices in action

What it returns:

Code snippets from official examples
File paths and context
Usage explanations
Links to complete examples

Tool Properties:

{
  name: ‘find_examples’,
  isReadOnly: true,
  isLocalOnly: false  // May fetch remote examples
}

Real-World Example Interaction

Developer: “Show me an example of using signals with computed values”

AI Agent: [Calls find_examples(”signals computed”)]

AI Agent: “I found an official Angular example showing signals with computed values:

import { Component, signal, computed } from ‘@angular/core’;

@Component({
  selector: ‘app-cart’,
  template: `
    <p>Items: {{ itemCount() }}</p>
    <p>Total: ${{ totalPrice() }}</p>
  `
})
export class CartComponent {
  items = signal([
    { name: ‘Item 1’, price: 10 },
    { name: ‘Item 2’, price: 20 }
  ]);
  
  itemCount = computed(() => this.items().length);
  totalPrice = computed(() => 
    this.items().reduce((sum, item) => sum + item.price, 0)
  );
}

This demonstrates:
- Using signal() for reactive state
- computed() for derived values
- Automatic dependency tracking

Would you like me to adapt this pattern for your use case?”

Advanced Filtering Example

Developer: “Find examples of Angular forms with validation”

AI Agent: [Calls find_examples() with filters for “forms” and “validation”]

AI Agent: “I found several examples of Angular forms with validation:

**1. Reactive Forms with Built-in Validators**
Shows FormControl with Validators.required, email, etc.
Location: examples/reactive-forms/basic-validation

**2. Custom Validators**
Demonstrates creating custom validator functions
Location: examples/reactive-forms/custom-validators

**3. Async Validators**
Shows how to validate against an API
Location: examples/reactive-forms/async-validation

**4. Cross-field Validation**
Validates multiple fields together (e.g., password confirmation)
Location: examples/reactive-forms/cross-field

Which approach are you interested in? I can show you the complete code 
for any of these examples.”

Experimental Tools (Require Opt-in)

These tools are still being refined and require the --experimental-tool flag to enable.

5. `modernize` - Your AI Migration Assistant

📅 Available Since: August 2025 (Experimental)

How to Enable:

Option 1: Command Line

ng mcp --experimental-tool modernize
# or
ng mcp -E modernize

Option 2: Configuration File (.vscode/mcp.json, .cursor/mcp.json, etc.)

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [”-y”, “@angular/cli”, “mcp”, “-E”, “modernize”]
    }
  }
}

What it does:
Provides comprehensive knowledge about Angular migrations and guides you through complex upgrade processes. This is your AI-powered migration expert.

Available Transformations:

Control Flow Migration - Convert *ngIf, *ngFor, *ngSwitch to @if, @for, @switch
Signal Input/Output Migration - Update to input() and output() functions
Standalone Migration (3-step process):
- Convert components to standalone
- Remove NgModules
- Update bootstrap

When the AI uses it:

When you ask about migrating to newer Angular patterns
When modernizing legacy code
When you request Angular version upgrades
When analyzing code that uses deprecated patterns

What it returns:

Step-by-step migration guidance
Impact analysis (how many files affected)
Migration commands to run
Potential issues and warnings

Tool Properties:

{
  name: ‘modernize’,
  isReadOnly: false,  // Can modify files
  isLocalOnly: true,
  isExperimental: true
}

Real-World Example Interaction

Developer: “I have an old Angular app. How can I modernize it?”

AI Agent: [Calls modernize() to analyze available migrations]

AI Agent: “I’ve analyzed your codebase and found modernization opportunities. 
Here’s a recommended migration path:

**Current State:**
- 47 components using NgModules
- 23 components with @Input/@Output decorators
- 15 templates using *ngIf, *ngFor

**Recommended Migration Path:**

**Phase 1: Standalone Migration** (Estimated time: 2-4 hours)
This will modernize your module structure:
├─ Step 1: Convert to standalone (affects 47 files)
├─ Step 2: Remove NgModules (affects 12 files)
└─ Step 3: Update bootstrap (affects 1 file)

**Phase 2: Signal Inputs/Outputs** (Estimated time: 1-2 hours)
Convert decorators to signal functions (affects 23 components)

**Phase 3: Control Flow Syntax** (Estimated time: 30 minutes)
Update template syntax (affects 15 templates)

**Benefits:**
✅ Better performance (up to 30% faster with new control flow)
✅ Improved type safety with signals
✅ Simpler, more maintainable code
✅ Ready for Angular’s future

Would you like to start with Phase 1? I can guide you through each step.”

Targeted Migration Example

Developer: “Just migrate the control flow syntax in my user module”

AI Agent: [Calls modernize()]

AI Agent: “I’ll run the control flow migration targeting your user module.

**What will change:**
- user-list.component.html (3 *ngFor → @for)
- user-detail.component.html (2 *ngIf → @if)
- user-form.component.html (1 *ngSwitch → @switch)

**Benefits:**
- Better type checking in templates
- Improved performance
- Cleaner syntax

I’ll execute:
ng generate @angular/core:control-flow-migration --path=src/app/user

**Note:** This migration is safe and can be reverted if needed. 
Your original templates will be backed up.

Ready to proceed?”

Complex Multi-Step Migration

Developer: “Walk me through converting my app to standalone, one module at a time”

AI Agent: [Calls modernize() to create detailed plan]

AI Agent: “Excellent approach! Converting module-by-module is safer for large apps. 
Here’s your custom migration plan:

**Module Dependency Analysis:**
I’ve analyzed your imports to determine the best order:

1️⃣ **SharedModule** (Start here - has no dependencies)
   - 8 components, 3 directives, 2 pipes
   - ~30 minutes
   - Low risk

2️⃣ **CoreModule** (Depends on SharedModule)
   - 5 services, 2 guards, 1 interceptor
   - ~20 minutes
   - Medium risk (check providers carefully)

3️⃣ **FeatureModules** (Depend on Shared & Core)
   - UserModule (12 components)
   - ProductModule (15 components)
   - OrderModule (8 components)
   - ~2 hours total
   - Medium risk

4️⃣ **AppModule** (Convert last)
   - Bootstrap update
   - ~15 minutes
   - Medium risk

**For SharedModule (First Step):**

Would you like to start with SharedModule? I’ll:
1. Show you the exact migration command
2. Explain what will change
3. Help test after migration
4. Guide you to the next module

Ready to begin?”

6. `ai-tutor` - Interactive Angular Learning

📅 Available Since: December 2025
🔗 AI Tutor Project: github.com/angular/ai-tutor

How to Enable:

Option 1: Command Line

ng mcp --experimental-tool ai-tutor
# or  
ng mcp -E ai-tutor

Option 2: Configuration File (.vscode/mcp.json, .cursor/mcp.json, etc.)

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [”-y”, “@angular/cli”, “mcp”, “-E”, “ai-tutor”]
    }
  }
}

What it does:
Connects to Angular’s interactive learning system that guides you through building complete Angular applications from scratch. Think of it as having an expert Angular mentor available 24/7.

Features:

Structured Learning Path: 4-phase journey from basics to advanced
Hands-on Project: Build a real “Smart Recipe Box” application
Adaptive Teaching: Adjusts to your experience level (Beginner/Intermediate/Expert)
Interactive Exercises: Learn by doing with guided practice
Progress Tracking: Keeps track of where you are in the learning path
Real-time Code Analysis: Reads your files to understand your progress

When the AI uses it:

When you’re learning Angular
When you want structured tutorials
When you need step-by-step guidance on Angular concepts
When practicing Angular patterns

What it returns:

Tutorial content and exercises
Progress tracking
Code examples
Explanations tailored to your level

Tool Properties:

{
  name: ‘ai-tutor’,
  isReadOnly: false,  // Can create/modify learning files
  isLocalOnly: false,  // Connects to tutor service
  isExperimental: true
}

Real-World Example Interaction

Developer: “I’m new to Angular. Can you teach me components?”

AI Agent: [Calls ai-tutor()]

AI Agent: “Welcome to Angular! I’ll guide you through components step by step.

**📚 Module 1: Introduction to Components**

**Your Experience Level:**
Are you:
1. Beginner (1-3): Just starting with web development
2. Intermediate (4-7): Know TypeScript/JavaScript
3. Experienced (8-10): Coming from other frameworks

[After you select: 5 - Intermediate]

Perfect! I’ll adjust my explanations for your level.

**What is a Component?**

In Angular, a component is a building block of your app. It combines:
- TypeScript class (logic)
- HTML template (view)
- CSS styles (appearance)

**Modern Angular Component (v20):**

import { Component } from ‘@angular/core’;

@Component({
  selector: ‘app-recipe-card’,
  template: `
    <div class=”recipe-card”>
      <h3>{{ recipeName }}</h3>
      <p>{{ cookingTime }} minutes</p>
    </div>
  `,
  styles: [`
    .recipe-card { padding: 1rem; }
  `]
})
export class RecipeCardComponent {
  recipeName = ‘Chocolate Cake’;
  cookingTime = 45;
}

**Key Concepts:**
- `@Component`: Decorator that marks a class as a component
- `selector`: HTML tag to use this component
- `template`: What users see
- `{{ }}`: Interpolation to display data

**💪 Exercise 1:**
Create a RecipeCard component with:
- A recipe name
- Cooking time
- Number of servings

Try it yourself! When you’re done, show me your code and I’ll review it.”

Progress Tracking Example

Developer: “What’s my progress in the Angular tutorial?”

AI Agent: [Calls ai-tutor() to get progress]

AI Agent: “Here’s your learning progress:

**📊 Smart Recipe Box - Learning Journey**

**Phase 1: Foundations** ✅ COMPLETED
├─ ✅ Module 1: Components
├─ ✅ Module 2: Templates & Data Binding
├─ ✅ Module 3: Directives
└─ ✅ Module 4: Services

**Phase 2: State & Forms** 🔄 IN PROGRESS (75%)
├─ ✅ Module 5: Signals & State Management
├─ ✅ Module 6: Reactive Forms
├─ 🔄 Module 7: Form Validation (CURRENT)
└─ ⬜ Module 8: Advanced State Patterns

**Phase 3: Routing & HTTP** ⬜ NOT STARTED
├─ ⬜ Module 9: Router Basics
├─ ⬜ Module 10: Route Guards
├─ ⬜ Module 11: HTTP Client
└─ ⬜ Module 12: Error Handling

**Phase 4: Advanced Topics** ⬜ NOT STARTED
├─ ⬜ Module 13: Performance Optimization
├─ ⬜ Module 14: Testing
├─ ⬜ Module 15: Deployment
└─ ⬜ Module 16: Best Practices

**Current Module: Form Validation**
You’re learning to add validators to your recipe form.

Would you like to continue with the current module, or would you like to 
see the table of contents to jump to a different topic?”

Adaptive Teaching Example

Developer: “I don’t understand signals. Can you explain like I’m 5?”

AI Agent: [Calls ai-tutor() with experience level adjustment]

AI Agent: “Let me explain signals in the simplest way possible! 🎯

**What’s a Signal? (ELI5 Version)**

Imagine you have a scoreboard at a football game:

🏈 Scoreboard
- Home Team: 10
- Away Team: 7

When someone scores, the scoreboard *automatically* updates, right? 
You don’t have to manually change every screen in the stadium.

That’s what signals do in Angular!

**Without Signals (Old Way):**
```typescript
class GameComponent {
  homeScore = 10;
  
  addPoint(): void {
    this.homeScore = 11;
    // 😰 Now manually tell Angular: “Hey, update the screen!”
    this.changeDetector.detectChanges();
  }
}

With Signals (New Way):

class GameComponent {
  homeScore = signal(10);
  
  addPoint(): void {
    this.homeScore.set(11);
    // ✨ Angular automatically knows to update! Magic!
  }
}

Simple Example for Your Recipe App:

import { Component, signal } from ‘@angular/core’;

@Component({
  selector: ‘app-recipe’,
  template: `
    <h2>{{ recipeName() }}</h2>
    <p>Servings: {{ servings() }}</p>
    <button (click)=”addServing()”>Add Serving</button>
  `
})
export class RecipeComponent {
  recipeName = signal(’Chocolate Cake’);
  servings = signal(4);
  
  addServing(): void {
    this.servings.set(this.servings() + 1);
    // ✨ Screen updates automatically!
  }
}

Key Points:

signal(4) - Create a signal with value 4
servings() - Get the current value
servings.set(5) - Change the value

Think of it like a smart container that tells Angular “Hey, I changed!”

MCP Server Modes & Security

The Angular MCP server offers security modes to control AI access:

1. Read-Only Mode

ng mcp --read-only

Or do it in the file:

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [”-y”, “@angular/cli”, “mcp”, “--read-only”]
    }
  }
}

What AI Can Do:

✅ Analyze code structure
✅ Suggest improvements
✅ Answer questions
✅ Provide documentation
✅ Review code

What AI Cannot Do:

❌ Modify files
❌ Run migrations
❌ Execute commands that change workspace

Perfect For:

Code reviews
Architecture analysis
Learning and education
Untrusted AI tools

Example

# Start in read-only mode
ng mcp --read-only

Developer: “Analyze my authentication service”

AI Agent: [Uses get_best_practices() and list_projects() - both read-only]

AI Agent: “I’ve reviewed your auth service. Here’s my analysis:

**Architecture:** ✅ Good
- Properly placed in core library
- Using inject() for dependencies

**Suggestions:**
- Consider using signals for auth state instead of BehaviorSubject
- Add error handling for token refresh
- Implement retry logic for failed auth attempts

I cannot modify your files in read-only mode, but I can show you the 
refactored code if you’d like to apply it yourself.”

2. Local-Only Mode

Option 1: Command Line

ng mcp --local-only

Option 2: Configuration File

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [”-y”, “@angular/cli”, “mcp”, “--local-only”]
    }
  }
}

What This Enables:

✅ Complete offline operation
✅ No external API calls
✅ Air-gapped environments
✅ Local analysis only

Tools Available:

get_best_practices ✅
list_projects ✅
search_documentation ❌ (needs internet)
find_examples ❌ (may need internet)
modernize ✅
ai-tutor ❌ (needs internet)

Perfect For:

Corporate environments with internet restrictions
Sensitive projects requiring offline development
Compliance with data residency requirements

Combining Modes

You can combine multiple flags for more control.

Option 1: Command Line

# Read-only + Local-only
ng mcp --read-only --local-only

# Enable experimental tools in read-only mode
ng mcp --read-only -E modernize

# All together
ng mcp --read-only --local-only -E modernize -E ai-tutor

Option 2: Configuration File

Read-only + Local-only:

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [”-y”, “@angular/cli”, “mcp”, “--read-only”, “--local-only”]
    }
  }
}

Read-only with experimental tools:

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [”-y”, “@angular/cli”, “mcp”, “--read-only”, “-E”, “modernize”]
    }
  }
}

All flags combined:

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [
        “-y”,
        “@angular/cli”,
        “mcp”,
        “--read-only”,
        “--local-only”,
        “-E”,
        “modernize”,
        “-E”,
        “ai-tutor”
      ]
    }
  }
}

Real-World Scenarios

Scenario 1: Legacy Codebase Modernization

Setup:

Command Line:

ng mcp -E modernize

Configuration File (.vscode/mcp.json or .cursor/mcp.json):

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [”-y”, “@angular/cli”, “mcp”, “-E”, “modernize”]
    }
  }
}

Interaction:

Developer: “I need to modernize our 3-year-old Angular app”

AI: [Calls modernize()]

AI: “I’ve scanned your codebase. Here’s what I found:

**Current State:**
- Angular 14 patterns
- 127 components using NgModules
- All using @Input/@Output decorators
- Templates use *ngIf, *ngFor, *ngSwitch

**Recommended Modernization Path:**

**Week 1: Standalone Migration**
- Day 1-2: Convert shared components (35 files)
- Day 3-4: Convert feature modules (92 files)  
- Day 5: Update bootstrap and remove modules

**Week 2: Signal Migration**
- Day 1-3: Migrate inputs/outputs (127 components)
- Day 4-5: Convert to signal-based state

**Week 3: Template Modernization**
- Day 1-2: Control flow migration (89 templates)
- Day 3: Review and test
- Day 4-5: Performance optimization

**Estimated Impact:**
- 📈 30% improvement in change detection performance
- 📉 25% reduction in bundle size
- ✅ 100% TypeScript strict mode compatible
- 🎯 Ready for Angular 21+

Shall we start with the shared components? I’ll guide you through each step.”

Scenario 2: New Developer Onboarding

Setup:

Command Line:

ng mcp --read-only -E ai-tutor

Configuration File (.vscode/mcp.json or .cursor/mcp.json):

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [”-y”, “@angular/cli”, “mcp”, “--read-only”, “-E”, “ai-tutor”]
    }
  }
}

Interaction:

New Developer: “I’m joining the team. Can you help me understand this project?”

AI: [Calls list_projects() and ai-tutor()]

AI: “Welcome to the team! Let me give you a tour of your Angular application.

**📦 Project Structure:**

**Applications:**
1. **customer-portal** (apps/customer-portal)
   - Customer-facing e-commerce platform
   - 87 components
   - Uses Angular Material

2. **admin-dashboard** (apps/admin-dashboard)
   - Internal admin tools
   - 45 components
   - Custom UI library

**Libraries:**
1. **shared-ui** (libs/shared-ui)
   - Reusable UI components
   - Selector prefix: ‘ui’
   - Used by both apps

2. **core** (libs/core)
   - Services, guards, interceptors
   - Authentication, logging

3. **data-access** (libs/data-access)
   - API services
   - Data models

**Tech Stack:**
- Angular 20
- TypeScript 5.9
- RxJS 7.8
- Angular Material 20

**Key Patterns Used:**
✅ Standalone components
✅ Signal-based state
✅ Reactive forms
✅ OnPush change detection

Would you like me to:
1. Explain the authentication flow?
2. Show you how components are structured?
3. Walk through adding a new feature?
4. Start the interactive Angular tutorial?”

Scenario 3: Code Review Assistant

Setup:

Command Line:

ng mcp --read-only

Configuration File (.vscode/mcp.json or .cursor/mcp.json):

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [”-y”, “@angular/cli”, “mcp”, “--read-only”]
    }
  }
}

Interaction:

Developer: “Review my pull request”

AI: [Calls get_best_practices() and list_projects()]

AI: “I’ve reviewed PR #234: ‘Add user preferences feature’. Here’s my analysis:

**✅ Excellent:**
1. All components use standalone pattern
2. Proper signal usage for state
3. Good separation of concerns
4. Comprehensive TypeScript types

**⚠️ Suggestions:**

**Performance Optimization:**
user-preferences.component.ts (Line 45)
Currently:
```typescript
filteredPreferences() {
  return this.preferences().filter(p => p.enabled);
}

Suggestion: Make this a computed signal:

filteredPreferences = computed(() => 
  this.preferences().filter(p => p.enabled)
);

Benefit: Only recalculates when preferences change

Accessibility: user-preferences.component.html (Line 23)

<button (click)=”save()”>Save</button>

Add ARIA attributes:

<button 
  (click)=”save()” 
  [attr.aria-busy]=”isSaving()”
  [disabled]=”isSaving()”>
  Save
</button>

Testing: Missing test cases for:

Error states
Loading states
Edge cases (empty preferences)

Overall Score: 8.5/10

Great work! Would you like me to generate the missing test cases?”

Scenario 4: `Enterprise Development`

Setup:

Command Line:

ng mcp --local-only --read-only

Configuration File (.vscode/mcp.json or .cursor/mcp.json):

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [”-y”, “@angular/cli”, “mcp”, “--local-only”, “--read-only”]
    }
  }
}

Interaction:


Developer: “Analyze our app for security and performance issues”

AI: [Calls get_best_practices(), list_projects() - all offline]

AI: “Security and Performance Analysis (Offline Mode)

**🔒 Security Analysis:**

**Critical Issues: 0**
**Warnings: 2**

1. **Missing CSP Headers** (Medium Priority)
   - Location: apps/customer-portal/src/index.html
   - Recommendation: Add Content-Security-Policy meta tag
   - Risk: XSS vulnerabilities

2. **Hardcoded API URL** (Low Priority)
   - Location: libs/data-access/src/lib/config.ts
   - Recommendation: Use environment variables
   - Risk: Accidental production URL in development

**⚡ Performance Analysis:**

**Bundle Size:**
- Main bundle: 245 KB (Target: <250 KB) ✅
- Lazy-loaded modules: 8 routes ✅
- Vendor bundle: 512 KB (Target: <500 KB) ⚠️

**Optimization Opportunities:**

1. **Large Vendor Bundle**
   - Lodash: 71 KB (use lodash-es and tree-shaking)
   - Moment.js: 68 KB (replace with date-fns)
   - Potential savings: ~100 KB

2. **Unused Code**
   - 12 components imported but never used
   - Potential savings: ~45 KB

3. **Image Optimization**
   - 23 images not using NgOptimizedImage
   - Current: 2.3 MB
   - Potential: 1.1 MB (52% reduction)

**Change Detection:**
- 87% using OnPush ✅
- 13% using Default (11 components) ⚠️

**Recommendations:**
1. Switch remaining components to OnPush
2. Implement lazy loading for admin routes
3. Add image optimization
4. Update bundle dependencies

Estimated Performance Gain: 35-40% faster load time

Would you like detailed migration steps for any of these?”

Best Practices for Using Angular MCP Tools

1. Start with Best Practices

Always let the AI call get_best_practices() first:

✅ Good: “Create a form component”
(AI calls get_best_practices() → generates modern code)

❌ Bad: “Create a form with @Input decorators”
(You’re forcing old patterns)

2. Let AI Use the Right Tools

Don’t overthink which tools to use. The AI knows:

“How do I implement authentication?”
→ AI calls: search_documentation(”authentication”)
→ AI calls: find_examples(”auth guard”)
→ AI calls: get_best_practices()
→ Gives you complete, modern solution

3. Use Read-Only for Learning

When learning or reviewing, use --read-only:

ng mcp --read-only -E ai-tutor

4. Combine Tools for Best Results

Complex tasks work better with multiple tools:

“Migrate my app to standalone components”
→ AI calls: list_projects() (understand structure)
→ AI calls: modernize() (migration guidance)
→ AI calls: get_best_practices() (ensure correctness)

Troubleshooting

Tools Not Showing Up

Check your configuration:

Command Line:

# Verify MCP is running
ng mcp

# Check if experimental tools are enabled
ng mcp -E modernize -E ai-tutor

Configuration File:

Make sure your .vscode/mcp.json or .cursor/mcp.json includes the experimental flags:

{
  “servers”: {
    “angular-cli”: {
      “command”: “npx”,
      “args”: [”-y”, “@angular/cli”, “mcp”, “-E”, “modernize”, “-E”, “ai-tutor”]
    }
  }
}

After changing the config file, restart your IDE for changes to take effect.

AI Not Using Tools

Make sure your AI client supports MCP. Check:

VS Code with GitHub Copilot: Needs agent mode enabled
Cursor: Should work out of the box
Claude Desktop: Requires MCP configuration

The Future of Angular MCP

The Angular team is actively developing new tools. Based on the repository structure, we can expect:

Code generation tools (components, services, guards)
Testing assistants (automated test generation)
Performance profilers (bundle analysis, optimization suggestions)
Accessibility checkers (WCAG compliance validation)

Want to contribute or suggest new tools? Open an issue on angular/angular.

Related Resources

Repository Reference

All MCP tools are located in the Angular CLI repository:

📂 Base Directory: packages/angular/cli/src/commands/mcp/tools/

Tool Files:

get-best-practices.ts - Best practices guide
search-documentation.ts - Documentation search
list-projects.ts - Workspace analysis
find-examples.ts - Code example search
modernize.ts - Migration assistant
ai-tutor.ts - Interactive learning

Thanks for reading so far 🙏

I’d like to have your feedback, so please leave a comment, clap or follow. 👏

Spread the Angular love! 💜

If you liked it, share it among your community, tech bros and whoever you want! 🚀👥

Don't forget to follow me and stay updated: 📱

🔗 LinkedIn
📝 Medium
🎥 YouTube
🐦 Twitter

Thanks for being part of this Angular journey! 👋😁

Angular: From Zero to Expert

Discussion about this post

Angular: From Zero to Expert

Angular CLI MCP Server: The Complete Guide to All Available Tools

How Angular just revolutionized AI-assisted development with Model Context Protocol.

Prerequisites & Core Concept

Essential Prerequisites

Important: Two Ways to Configure

For VS Code (.vscode/mcp.json)

Basic Setup (All Stable Tools)

Read-Only Mode (Safe for Learning)

With Modernize Tool (For Migrations)

With AI Tutor (For Learning)

All Experimental Tools Enabled

Offline Mode (Local-Only)

Maximum Security (Read-Only + Local-Only)

The Core Concept: Why You Don’t Run the Commands

Complete MCP Tools Reference

Stable Tools (Enabled by Default)

1. get_best_practices - Your Angular Style Guide Oracle

Advanced Example

2. search_documentation - Live Angular.dev Search

Complex Search Example

3. list_projects - Workspace Structure Analysis

4. find_examples - Code Example Discovery

Experimental Tools (Require Opt-in)

5. modernize - Your AI Migration Assistant

6. ai-tutor - Interactive Angular Learning

MCP Server Modes & Security

1. Read-Only Mode

2. Local-Only Mode

Combining Modes

Real-World Scenarios

Scenario 1: Legacy Codebase Modernization

Scenario 2: New Developer Onboarding

Scenario 3: Code Review Assistant

Scenario 4: Enterprise Development

Best Practices for Using Angular MCP Tools

1. Start with Best Practices

2. Let AI Use the Right Tools

3. Use Read-Only for Learning

4. Combine Tools for Best Results

Troubleshooting

Tools Not Showing Up

AI Not Using Tools

The Future of Angular MCP

Related Resources

Repository Reference

Thanks for reading so far 🙏

Discussion about this post

1. `get_best_practices` - Your Angular Style Guide Oracle

2. `search_documentation` - Live Angular.dev Search

3. `list_projects` - Workspace Structure Analysis

4. `find_examples` - Code Example Discovery

5. `modernize` - Your AI Migration Assistant

6. `ai-tutor` - Interactive Angular Learning

Scenario 4: `Enterprise Development`