Back to Angular

Angular CLI MCP Server setup

adev/src/content/ai/mcp-server-setup.md

22.0.0-next.109.7 KB
Original Source

Angular CLI MCP Server setup

The Angular CLI includes an experimental Model Context Protocol (MCP) server enabling AI assistants in your development environment to interact with the Angular CLI. We've included support for CLI powered code generation, adding packages, and more.

Available Tools

The Angular CLI MCP server provides several tools to assist you in your development workflow. By default, the following tools are enabled:

NameDescriptionlocal-onlyread-only
ai_tutorLaunches an interactive AI-powered Angular tutor. Recommended to run from a new Angular project using v20 or later. Learn more.
find_examplesFinds authoritative code examples from a curated database of official, best-practice examples, focusing on modern, new, and recently updated Angular features.
get_best_practicesRetrieves the Angular Best Practices Guide. This guide is essential for ensuring that all code adheres to modern standards, including standalone components, typed forms, and modern control flow.
list_projectsLists the names of all applications and libraries defined within an Angular workspace. It reads the angular.json configuration file to identify the projects.
onpush_zoneless_migrationAnalyzes Angular code and provides a step-by-step, iterative plan to migrate it to OnPush change detection, a prerequisite for a zoneless application.
search_documentationSearches the official Angular documentation at https://angular.dev. This tool should be used to answer any questions about Angular, such as for APIs, tutorials, and best practices.

Experimental Tools

Some tools are provided in experimental / preview status since they are new or not fully tested. Enable them individually with the --experimental-tool option and use them with caution.

NameDescriptionlocal-onlyread-only
buildPerform a one-off, non-watched build using ng build.
devserver.startAsynchronously starts a development server that watches the workspace for changes, similar to running ng serve. Since this is asynchronous it returns immediately. To manage the resulting server, use the devserver.stop and devserver.wait_for_build tools.
devserver.stopStops a development server started by devserver.start.
devserver.wait_for_buildReturns the output logs of the most recent build in a running development server started by devserver.start. If a build is currently ongoing, it will first wait for that build to complete and then return the logs.
e2eExecutes the end-to-end tests configured in the project.
modernizePerforms code migrations and provides further instructions on how to modernize Angular code to align with the latest best practices and syntax. Learn more
testRuns the project's unit tests.

Get Started

To get started, run the following command in your terminal:

bash
ng mcp

When run from an interactive terminal, this command displays instructions on how to configure a host environment to use the MCP server. The following sections provide example configurations for several popular editors and tools.

Cursor

Create a file named .cursor/mcp.json in your project's root and add the following configuration. You can also configure it globally in ~/.cursor/mcp.json.

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

Firebase Studio

Create a file named .idx/mcp.json in your project's root and add the following configuration:

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

Gemini CLI

Create a file named .gemini/settings.json in your project's root and add the following configuration:

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

JetBrains IDEs

In JetBrains IDEs (like IntelliJ IDEA or WebStorm), after installing the JetBrains AI Assistant plugin, go to Settings | Tools | AI Assistant | Model Context Protocol (MCP). Add a new server (+) and select As JSON. Then paste the following configuration:

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

For the most up-to-date instructions on configuring MCP servers, please refer to the JetBrains documentation: Connect to an MCP server.

VS Code

In your project's root, create a file named .vscode/mcp.json and add the following configuration. Note the use of the servers property.

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

Other IDEs

For other IDEs, check your IDE's documentation for the proper location of the MCP configuration file (often mcp.json). The configuration should contain the following snippet.

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

Command Options

The mcp command can be configured with the following options passed as arguments in your IDE's MCP configuration:

OptionTypeDescriptionDefault
--read-onlybooleanOnly register tools that do not make changes to the project. Your editor or coding agent may still perform edits.false
--local-onlybooleanOnly register tools that do not require an internet connection. Your editor or coding agent may still send data over the network.false
--experimental-tool
-EstringEnable an experimental tool. Separate multiple options by spaces, e.g. -E tool_a tool_b. Enable all devserver.x tools by using -E devserver.

For example, to run the server in read-only mode in VS Code, you would update your mcp.json like this:

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

Feedback and New Ideas

The Angular team welcomes your feedback on the existing MCP capabilities and any ideas you have for new tools or features. Please share your thoughts by opening an issue on the angular/angular GitHub repository.