MCP Angular Cli

🚀 Angular CLI MCP Server 🅰️

This is a Model Context Protocol server that offers Angular CLI and workspace automation capabilities. It allows LLMs and agents to interact with Angular projects, generate components and services, add packages, create new workspaces, and execute custom architect targets through the Angular CLI.

🚀 Quick Start

The Angular CLI MCP Server enables seamless interaction with Angular projects. You can quickly start using it by following the installation and usage steps below.

✨ Features

• Execute ng generate to scaffold Angular artifacts such as components and services.
• Run ng add to incorporate packages into your Angular workspace.
• Use ng new to create new Angular workspaces.
• Employ ng run to execute custom architect targets.
• Run ng update to update Angular packages and dependencies.
• All operations are supported via the Model Context Protocol (MCP) for seamless agent/LLM integration.

📦 Installation

You have two options for installing the package:

Global Installation

Install the package globally using npm:

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

Local Installation

Use it locally in your project:

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

💻 Usage Examples

Basic Usage

You can run the server directly:

npx @talzach/mcp-angular-cli

Advanced Usage

If you want to use it as a custom MCP server in your agent or tool, configure it as follows:

Example MCP Configuration

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

Practical Usage Examples

• 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"
  }
  

🚀 Publishing to npm

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

npm run publish-npm

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

🔧 Develop

If you wish 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"]
  }
}

Star this repo if you find it useful!