Exploring the Tools Available

Angular v20.3

Stable tools:

  • get_best_practices — Fetches the official coding standards and conventions published by the Angular team
  • search_documentation — Pulls current information straight from angular.dev, the live documentation hub
  • list_projects — Inspects the workspace and returns detailed info about every Angular project and library it finds

Experimental tools:

  • find_examples — Looks through a hand-picked collection of official Angular code samples that highlight modern techniques
  • modernize — Supplies migration steps and the exact CLI commands needed to bring legacy code in line with current standards
  • onpush-zoneless-migration — Walks you through the process of switching to the OnPush change detection strategy

Angular v21

The upcoming Angular v21 release hasn't shipped yet, but the expectation is that find_examples will graduate to a stable status, and a fresh ai_tutor tool will debut. That tutor pulls in the Angular AI Tutor curriculum, effectively turning your AI assistant into a focused Angular teacher.

Setting Up the Server

A handful of command-line flags let you fine-tune how the Angular CLI MCP server behaves at runtime.

Passing the --read-only flag means only non-mutating tools get registered, so nothing in your project gets changed.

The --local-only flag keeps things offline by enabling just the tools that operate without network access. Take search_documentation: since it reaches out to https://angular.dev, it won't function under this flag and remains disabled.

With --experimental-tools, you can cherry-pick specific experimental features by supplying a comma-separated list of tool names.

If you want both stable and experimental tools available at once, drop this MCP server configuration into 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"
      ]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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"
      ]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Tool Reference

ai_tutor

Angular v21+, local, read-only

This tool loads the Angular AI Tutor curriculum and persona into the assistant, effectively turning it into a dedicated Angular teacher. The aim is to walk developers through creating a "Smart Recipe Box" application while covering Angular fundamentals. It uses structured learning paths that combine conceptual explanations with practical tasks.

In Action: If you're looking to get started with modern Angular, a simple prompt like "Teach me Angular" is all it takes. The tutor takes over and directs the process of building a functional app. It's a supportive learning experience, ideal for when you need to ask basic questions like "wait, what's a component again?" The curriculum methodically lays a foundation before moving to more sophisticated topics as the project develops.

get_best_practices

Local, read-only

This tool pulls up the official Angular Best Practices Guide which outlines the latest coding standards. This includes guidance on standalone components, signal-based state management, typed forms, and current control flow syntax, along with broader architectural principles.

In Action: Get into the habit of loading these guidelines before you start writing or editing code. Think of it as consulting a map before setting off on a journey—it prevents unnecessary detours. Simply asking the assistant to "Load the Angular best practices" means you'll be applying the most current standards immediately.

search_documentation

Read-only

This tool queries the live Angular documentation available at angular.dev. It accepts a search query, can retrieve the full page content of the top hit, and also allows for filtering results by a specific Angular major version. This directly addresses the issue of AI models using outdated information by always pulling the latest from the official source.

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: Suppose you're curious about the default standalone status of components in Angular. You can pose that question in plain language, and the assistant will first note your project's Angular version before checking the official docs. This eliminates the guesswork about whether a forum post from years ago is still relevant to the version you're using.

list_projects

Local, read only

This tool inspects the workspace and provides a detailed report of all Angular projects contained within the current directory. By reading the angular.json configuration, it can relay key details like the project name, type, and the paths for its root and source directories. It also identifies the selector prefix used. This capability allows the AI to understand the overall workspace topology, be it a single app, a multi-project setup, or a monorepo.

In Practice: You don't always have to ask directly. While you might say something like "List the projects in my workspace," the assistant often uses this tool on its own initiative when facing architecture-related questions. For instance, asking where to put a new UserSettingsComponent will likely prompt the assistant to first check the workspace layout to offer more relevant suggestions.

find_examples

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

This tool performs searches across an offline SQLite database filled with official Angular examples, with a focus on the newest features. The catalogue is kept up-to-date within the Angular CLI repository, which you can find at https://github.com/angular/angular-cli/tree/main/packages/angular/cli/lib/examples. Currently, the database is fairly limited and only contains a single example demonstrating the @if control flow, but anticipates a larger collection with Angular v21's release.

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

The purpose of this tool is to generate precise instructions and necessary CLI commands to bring legacy code in line with modern Angular patterns. It can produce specific, step-by-step migration plans for a particular code transformation, or it can offer more general modernization advice. For every transformation, you get the exact Angular CLI command that needs to be run, along with the reasoning behind it and what you can expect to change.

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: If you have a component that still relies on constructor injection and you want to update it, you could tell your AI assistant to "modernize src/app/app.ts". The assistant will then consult the best practices guide to ensure accuracy, and then use this tool to map out the exact path. You'll receive the specific commands to execute, such as ng generate @angular/core:inject, along with a concise briefing on what will be altered and why.

onpush-zoneless-migration

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

This tool analyzes your Angular code and provides iterative guidance for migrating to the OnPush change detection strategy, which is a fundamental step to enabling zoneless applications. The process is designed to be incremental: each time you call the tool, it gives you one concrete step to perform with a clear explanation. This "one step at a time" approach helps you maintain a stable and functional codebase throughout the entire migration journey.

Input Schema:

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

In Action: You can guide the tool by pointing it to a component or a folder, for example, "analyze src/app/dashboard for OnPush migration." You'll be presented with one actionable task at a time. After completing it, you simply invoke the tool again for the next step. It works like a step-by-step playbook, often asking you to update the component by adding the four core symbols (remove ChangeDetectorRef reference), markForCheck, detectChanges, and ApplicationRef.tick. This methodical, build-measured approach avoids the risks and potential breakages associated with a massive, all-at-once migration.

👨‍💻About the author

I'm Gergely Szerovay. For years, I worked as a data scientist and full-stack developer, and my current role is frontend tech lead, with a strong emphasis on Angular-based development. Keeping pace with the constant evolution of Angular and the wider frontend ecosystem is part of my day-to-day work. In 2022, I launched the Angular Addicts newsletter and publication to share what I find each month. Whether you're just starting with Angular or you've been around for a while, there's something for you here. Get in touch if you'd like to contribute as a writer, and let's explore Angular together — subscribe here 🔥

Angular's pace of change has been remarkable lately, and generative AI has similarly accelerated how we build software in the past year. Tracking AI-assisted development closely led me to begin building AI tools publicly, documenting it all on AIBoosted.dev. I'd love for you to come along for the ride: subscribe here 🚀

You can also follow me on Substack (Angular Addicts), Substack (AIBoosted.dev), Medium, Dev.to, Twitter, or LinkedIn — all focused on Angular and building AI apps with AI, TypeScript, React, and Angular.