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:

1. Scaffold a new Angular 20 project
2. Configure the design system
3. Set up authentication
4. Create a dashboard layout
5. 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