Angular CLI MCP Server Setup: VS Code & Copilot CLI Guide

AI coding assistants often supply incorrect or outdated information, which can be frustrating for developers. Angular developers frequently encounter this issue when asking an LLM to generate a component, as it may return legacy syntax that is no longer relevant. This problem stems from two main factors: using stale training data and lack of runtime awareness of the developer's local workspace.

To address this issue, the Angular team introduced support for the Model Context Protocol (MCP) via the Angular CLI (@angular/cli). By integrating an MCP server directly into the AI workflow, developers gain active tools that can query real-time workspace schemas and fetch up-to-date documentation from angular.dev. This eliminates the need for stale training data and ensures that the AI has knowledge of the developer's local environment.

Here's how to set up the Angular CLI MCP server for both VS Code and the standalone GitHub Copilot CLI:

1. VS Code Integration:

- Open your Angular project in VS Code.

- In your project root, create or edit the .vscode/mcp.json file.

- Add the angular-cli entry to your servers object with the type set to "stdio" and the command set to "npx @angular/cli mcp".

- Restart the VS Code servers to apply the changes.

2. GitHub Copilot CLI Integration:

- Launch your interactive terminal chat session with the copilot-cli.

- Run the configuration wizard with the command "mcp add".

- Provide a name (angular-cli), select STDIO as the type, and set the command to "npx @angular/cli mcp".

- Ensure the command and arguments are kept separate in the Command and Arguments fields, respectively.

Once the MCP server is set up, you can verify its functionality by checking its status or querying it for specific information about your local workspace, such as the list of configured applications. This allows the AI to provide accurate and up-to-date suggestions based on the developer's actual project structure and configuration.