@push-based/angular-toolkit-mcp

Angular Toolkit MCP

A Model Context Protocol (MCP) server that provides Angular project analysis and refactoring capabilities. This server enables LLMs to analyze Angular projects for component usage patterns, dependency analysis, code quality issues, and provides automated refactoring assistance.

Installation

No installation required! Run directly with npx:

npx @push-based/angular-toolkit-mcp@latest --workspaceRoot=/path/to/workspace --ds.uiRoot=packages/ui

Configuration

Add the server to your MCP client configuration (e.g., Claude Desktop, Cursor, Copilot, Windsurf):

{
  "mcpServers": {
    "angular-toolkit": {
      "command": "npx",
      "args": [
        "@push-based/angular-toolkit-mcp@latest",
        "--workspaceRoot=/absolute/path/to/your/angular/workspace",
        "--ds.uiRoot=packages/ui",
        "--ds.storybookDocsRoot=storybook/docs",
        "--ds.deprecatedCssClassesPath=design-system/component-options.mjs"
      ]
    }
  }
}

Configuration Parameters

Required Parameters

Parameter	Type	Description	Example
workspaceRoot	Absolute path	Root directory of your Angular workspace	/Users/dev/my-angular-app
ds.uiRoot	Relative path	Directory containing UI components	packages/ui

Optional Parameters

Parameter	Type	Description	Example
ds.storybookDocsRoot	Relative path	Root directory containing Storybook documentation	storybook/docs
ds.deprecatedCssClassesPath	Relative path	JavaScript file mapping deprecated CSS classes	design-system/component-options.mjs

Key Features

• Component Analysis: Detect deprecated CSS classes and component usage violations
• Safe Refactoring: Generate contracts for safe component refactoring with breaking change detection
• Dependency Mapping: Map component dependencies across modules, templates, and styles
• ESLint Integration: Lint Angular files with automatic ESLint configuration discovery
• Project Analysis: Analyze buildable/publishable libraries and validate import paths
• Component Documentation: Retrieve component data and documentation, list available components

Available Tools

Component Analysis

• report-violations - Report deprecated CSS usage in a directory
• report-deprecated-css - Report deprecated CSS classes found in styling files
• get-deprecated-css-classes - List deprecated CSS classes for a component
• list-ds-components - List all available Design System components
• get-ds-component-data - Get component data including implementation and documentation
• build-component-usage-graph - Map component imports across the project

Component Contracts

• build_component_contract - Generate a static surface contract for a component
• diff_component_contract - Compare before/after contracts for breaking changes
• list_component_contracts - List all available component contracts

Project Analysis

• get-project-dependencies - Analyze project dependencies and library configuration
• lint-changes - Lint changed Angular files using ESLint rules

Requirements

• Node.js version 18 or higher

Documentation

For comprehensive documentation, guides, and workflows, see the full documentation.

License

MIT License - see the LICENSE file for details.

Sponsored by Entain