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.