Angular CLI MCP Server Guide

The Angular team has added something that changes how AI can help with your projects: an MCP server built into the CLI that provides everything from live documentation access to code modernization tools and interactive tutoring.

Instead of relying on potentially stale training data, your AI can now actively query Angular's documentation, search through curated code examples, and access official best practices. The Model Context Protocol (MCP) acts as a bridge, letting your AI assistant tap into the same resources you'd manually search for.

But it goes beyond just looking things up. Need to see how a modern feature works in practice? The find_examples tool searches through a curated database of official Angular code examples that emphasizes current patterns (stable in v21). Got legacy code that needs updating? The modernize tool doesn't just tell you what to change: it gives you the exact CLI commands to run, along with clear explanations of what's happening and why.

And if you're new to Angular or want to level up your skills? The ai_tutor tool (coming in v21) transforms your AI assistant into a dedicated Angular instructor, walking you through building a complete application while teaching you modern patterns along the way.

Angular v21 hasn't been officially released yet. At the time of writing, v21-next.6 is the latest preview version available, so keep in mind that some features mentioned here are still in development.

Available Tools

Angular v20.3

Stable tools:

• get_best_practices - Retrieves official Angular coding standards and conventions from the Angular team
• search_documentation - Queries live Angular documentation at angular.dev
• list_projects - Analyzes workspace structure and provides comprehensive information about all Angular projects and libraries

Experimental tools:

• find_examples - Searches a curated database of official Angular code examples emphasizing modern features
• modernize - Provides migration instructions and CLI commands for upgrading Angular code to current patterns
• onpush-zoneless-migration - Offers step-by-step guidance for adopting OnPush change detection strategy

Angular v21

Angular v21 is unreleased yet, but most likely the find_examples tool will become stable and there will be a new ai_tutor tool: it loads Angular AI Tutor curriculum transforming the assistant into a specialized Angular instructor

Configuration

The Angular CLI MCP server accepts several command-line options that control its operational behavior.

The --read-only flag restricts the server to register only tools that do not make changes to the project.

The --local-only flag enables tools that don't need an internet connection. For example, the search_documentation tool searches the official Angular documentation at https://angular.dev and requires an internet connection, so it would be disabled with this flag.

The --experimental-tools option enables specific experimental features by accepting a list of tool names.

To enable both stable and experimental tools, add the following MCP server configuration to your mcp.json file:

Angular v20.3.5:

{
  "servers": {
    // or "mcpServers", depending your IDE / tool
    "angular-cli": {
      "command": "npx",
      "args": [
        "-y",
        "@angular/cli@20.3.5",
        "mcp",
        "--experimental-tool",
        "modernize",
        "onpush-zoneless-migration",
        "find_examples"
      ]
    }
  }
}

Angular v21.0.0-next.7:

{
  "servers": {
    // or "mcpServers", depending your IDE / tool
    "angular-cli": {
      "command": "npx",
      "args": [
        "-y",
        "@angular/cli@21.0.0-next.7",
        "mcp",
        "--experimental-tool",
        "modernize",
        "onpush-zoneless-migration"
      ]
    }
  }
}

Tool Reference

ai_tutor

Angular v21+, local, read-only

Loads the Angular AI Tutor curriculum and persona, transforming the AI assistant into a specialized Angular instructor that guides developers through building a complete "Smart Recipe Box" application. The tool provides structured learning paths through Angular concepts with hands-on exercises.

In Action: Want to dive into modern Angular but not sure where to start? Just ask your AI assistant "Teach me Angular" and watch what happens, the tutor kicks in and guides you through building a real app from scratch. It's like having a patient mentor who won't judge you for asking "wait, what's a component again?" for the third time. The curriculum walks you through foundations first, then gradually introduces more advanced concepts as you build out the Smart Recipe Box application.

get_best_practices

Local, read-only

Retrieves the official Angular Best Practices Guide containing current coding standards and conventions including standalone components, signal-based state management, typed forms, modern control flow syntax, and architectural best practices.

In Action: Make this your first step before writing or modifying any Angular code. It's like checking the map before a road trip, you'll save yourself from wrong turns later. Just ask your AI assistant to "Load the Angular best practices" and you'll be working with the latest standards from the start.

search_documentation

Read-only

Queries the live Angular documentation at angular.dev. The tool accepts a search query, optionally fetches the full content of the top result, and can target specific Angular major versions for relevant results. This ensures developers receive up-to-date information about Angular features and APIs rather than potentially outdated training data.

Input Schema:

  {
    query: string,               // Required: Search query
    includeTopContent?: boolean, // Optional: default true, fetches content of top result
    version?: number             // Optional: Angular major version to search
  }

In Action: Let's say you're wondering "Are components standalone by default in Angular?" Just ask your AI assistant naturally, and it'll check your project's Angular version, then query the official documentation at angular.dev to get you the right answer for your specific setup. No more guessing whether that Stack Overflow answer from 2019 still applies!

list_projects

Local, read only

Analyzes the workspace structure and returns comprehensive information about all Angular workspaces and projects within the current directory. The tool reads angular.json configuration files and provides details including project names, types, root directories, source roots, and selector prefixes. This enables AI assistants to understand the specific workspace structure, whether it's a single application, multiple apps, libraries, or a monorepo setup.

In Practice: You can ask for this information explicitly with something like "List the projects in my workspace," but your AI assistant will also pull this data automatically when you ask architecture questions. For example, if you ask "Where should I place the new UserSettingsComponent?" the assistant will check your workspace structure first to give you contextually relevant advice.

find_examples

Local, read only, experimental in v20.3, stable from v21+, Requires Node.js 22.16 or higher

Searches a curated SQLite database of official Angular code examples with emphasis on modern and recently updated features. The examples are maintained in the Angular CLI repository at https://github.com/angular/angular-cli/tree/main/packages/angular/cli/lib/examples. At the time of writing, there is a single @if control flow example available, but we expect the collection to grow significantly for the release of Angular v21.

Input Schema:

  {
    query: string,                      // Required: FTS5 search query
    keywords?: string[],                // Optional: Exact keywords to filter
    required_packages?: string[],       // Optional: NPM packages the example must use
    related_concepts?: string[],        // Optional: High-level concepts to filter by
    includeExperimental?: boolean       // Optional: default false
  }

modernize

Local, read only, experimental in v20.3 and v21

Provides detailed instructions and CLI commands for upgrading Angular code to align with current patterns and syntax. The tool generates step-by-step migration guidance for specific transformations or provides general modernization recommendations. Each transformation includes the exact Angular CLI command to execute along with explanatory context about what will change and why.

Input Schema:

  {
    transformations?: string[]  // Optional: Array of transformation names
  }

Available transformations:

• control-flow-migration - Migrate from *ngIf/*ngFor to @if/@for syntax
• self-closing-tags-migration - Convert HTML tags to self-closing format
• inject - Migrate from constructor injection to inject() function
• output-migration - Migrate from @Output to output() API
• signal-input-migration - Migrate from @Input to input() signals
• signal-queries-migration - Migrate @ViewChild/@ContentChild to viewChild()/contentChild()
• standalone - Convert NgModule-based components to standalone

In Action: Let's say you've got an older component that still uses constructor injection and you want to modernize it. Just tell your AI assistant something like "modernize src/app/app.ts" and watch the magic happen. The assistant will check the Angular best practices first (you know, to make sure it's giving you current advice), then use the modernize tool to figure out exactly which transformations you need. You'll get the specific CLI commands to run, like ng generate @angular/core:inject, along with a clear explanation of what's changing and why.

onpush-zoneless-migration

Local, read only, experimental in v20.3 and v21

Analyzes code and provides iterative, step-by-step migration guidance for adopting OnPush change detection strategy, which serves as a prerequisite for zoneless Angular applications. The tool operates through repeated invocations, providing one actionable step at a time with clear explanations. This incremental approach ensures developers understand each change while maintaining code stability throughout the migration process.

Input Schema:

  {
    fileOrDirPath: string; // Required: Absolute path to file or directory to analyze and migrate
  }

In Action: Point it at a component or directory (something like "analyze src/app/dashboard for OnPush migration"), and you'll get one clear, actionable step to work on. Complete that step, then run the tool again for the next one. It's like having a patient guide who knows exactly what order to tackle things in. This step-by-step approach keeps you from getting overwhelmed, and your code stays stable throughout the process. Much better than attempting a big-bang migration and crossing your fingers!

👨‍💻About the author

My name is Gergely Szerovay, I worked as a data scientist and full-stack developer for many years, and I have been working as frontend tech lead, focusing on Angular based frontend development. As part of my role, I'm constantly following how Angular and the frontend development scene in general is evolving. To share my knowledge, I started the Angular Addicts monthly newsletter and publication in 2022, so that I can send you the best resources I come across each month. Whether you are a seasoned Angular Addict or a beginner, I got you covered. Let me know if you would like to be included as a writer. Let’s learn Angular together! Subscribe here 🔥

Angular has evolved very rapidly over the past few years, and in the past year, with the rise of generative AI, our software development workflows have also evolved rapidly. In order to closely follow the evolution of AI-assisted software development, I decided to start building AI tools in public, and publish my progress on AIBoosted.dev. Join my on this learning journey: Subscribe here 🚀

Follow me on Substack (Angular Addicts), Substack (AIBoosted.dev), Medium, Dev.to, Twitter or LinkedIn to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!