What is Mcp Angular Cli

mcp-angular-cli is a Model Context Protocol server designed to provide Angular CLI and workspace automation capabilities, enabling LLMs and agents to interact with Angular projects effectively.

Use cases

Use cases include generating components, adding packages to Angular workspaces, creating new Angular projects, and running custom build processes within Angular applications.

How to use

You can run the server directly using ‘npx @talzach/mcp-angular-cli’ or configure it as a custom MCP server in your agent or tool by specifying the command and arguments in the MCP configuration.

Key features

Key features include scaffolding Angular artifacts with ‘ng generate’, adding packages with ‘ng add’, creating new workspaces with ‘ng new’, executing custom architect targets with ‘ng run’, and updating Angular packages with ‘ng update’.

Where to use

mcp-angular-cli is suitable for use in web development projects that utilize Angular, particularly in environments where automation and integration with LLMs or agents are beneficial.

Angular CLI MCP Server 🅰️

A Model Context Protocol server that provides Angular CLI and workspace automation capabilities. This server enables LLMs and agents to interact with Angular projects, generate components/services, add packages, create new workspaces, and run custom architect targets via the Angular CLI.

Features

• Run ng generate to scaffold Angular artifacts (components, services, etc.)

• Run ng add to add packages to your Angular workspace

• Run ng new to create new Angular workspaces

• Run ng run to execute custom architect targets

• Run ng update to update Angular packages and dependencies

• All via the Model Context Protocol (MCP) for agent/LLM integration

Installation

You can install the package globally using npm:

npm install -g @talzach/mcp-angular-cli

Or use it locally in your project:

npm install --save-dev @talzach/mcp-angular-cli

Usage

You can run the server directly:

npx @talzach/mcp-angular-cli

Or, if you want to use it as a custom MCP server in your agent or tool, configure it like this:

Example MCP Configuration

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

Example Tool Usage

• Generate a component:

  {
    "schematic": "component",
    "name": "my-component",
    "appRoot": "/absolute/path/to/your/angular/project"
  }
  

• Add a package:

  {
    "package": "@angular/material",
    "appRoot": "/absolute/path/to/your/angular/project"
  }
  

• Create a new workspace:

  {
    "name": "my-workspace",
    "directory": "/absolute/path/to/where/you/want/it"
  }
  

• Run a custom architect target:

  {
    "target": "app:build:production",
    "appRoot": "/absolute/path/to/your/angular/project"
  }
  

Star this repo if you find it useful!

Publishing to npm

To publish a new version of this package to npm, run:

npm run publish-npm

This will automatically build the project and publish it as a public package.

Develop

If you want to test or develop this server locally, you need to point your MCP server configuration to your local build output. After building the project (e.g., with npm run build), set your MCP server file (e.g., .mcp.json or similar) to use the local dist/index.js file:

{
  "angular-cli": {
    "command": "node",
    "args": [
      "/path/to/your/mcp-angular-cli/dist/index.js"
    ]
  }
}