Angular MCP Toolkit

MCP toolkit for Angular development with enterprise-grade templates, scaffolding tools, and comprehensive project generation capabilities for modern Angular 20.0.x applications.

🚀 Features

11 Powerful MCP Tools for Angular development
Angular 20.0.x with signal-based reactivity and standalone components
@ngrx/signals 19.2.1 for modern state management
Bulma CSS Framework integration with custom design systems
CSS Grid & Flexbox layouts with responsive design
TanStack Table for data visualization
Enterprise Architecture patterns and best practices
TypeScript Strict Mode for maximum type safety
Accessibility First (WCAG 2.1 AA/AAA compliance)
Performance Optimized with lazy loading and caching

📦 Installation

Global Installation

npm install -g angular-mcp-toolkit

Local Installation

npm install angular-mcp-toolkit

🔧 Configuration

MCP Client Setup (Claude Desktop)

Add to your MCP client configuration:

{
  "mcpServers": {
    "angular-server": {
      "command": "mcp-angular-toolkit",
      "args": [],
      "env": {}
    }
  }
}

Environment Variables

# Optional: Set custom templates directory
TEMPLATES_DIR=/path/to/custom/templates

# Optional: Enable debug logging
DEBUG=mcp:angular:*

Usage

Starting the MCP Server

mcp-angular-toolkit start

Available MCP Tools

scaffold-project - Initialize a new Angular 20 project with all configurations
add-feature - Generate a feature module with routing and state
configure-design-system - Set up Bulma with CSS Grid and custom variables
setup-table - Add TanStack table to a component
generate-adapter - Create backend adapter (REST/GraphQL/MCP)
configure-auth - Set up authentication layer
add-micro-interaction - Implement interaction patterns
create-layout - Generate responsive CSS Grid layouts

Example: Create a New Project

# Using Claude or another MCP-compatible AI assistant
"Create a new Angular application with authentication and a dashboard"

The AI will use the MCP server to:

Scaffold a new Angular 20 project
Configure the design system
Set up authentication
Create a dashboard layout
Add necessary components and state management

Architecture

Project Structure

your-angular-app/
├── src/
│   ├── app/
│   │   ├── core/           # Singleton services, guards
│   │   ├── shared/         # Shared components, directives
│   │   ├── features/       # Feature modules
│   │   └── styles/         # Global styles, design system
│   ├── assets/
│   └── environments/
├── angular.json
├── package.json
└── tsconfig.json

Design System

The MCP server configures a hybrid CSS Grid + Bulma system:

CSS Grid for main layouts
Bulma components within grid areas
Custom SCSS variables for theming
Responsive breakpoints aligned between systems

Development

Building from Source

git clone https://github.com/yourusername/angular-mcp-toolkit.git
cd angular-mcp-toolkit
npm install
npm run build

Running Tests

npm test
npm run test:coverage

Local Development

npm run dev

Configuration

Create a .mcp-angular.config.json in your project root:

{
  "defaultTheme": "light",
  "companyName": "Your Company",
  "primaryColor": "#3273dc",
  "features": {
    "authentication": true,
    "darkMode": true,
    "animations": true
  }
}

Contributing

Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

Documentation: https://docs.mcp-angular.dev
Issues: GitHub Issues
Discord: Join our community

Acknowledgments

Angular team for the amazing framework
Anthropic for the MCP protocol
Bulma CSS contributors
TanStack team for the table library

Angular MCP Toolkit