Provides 11 development tools for Angular 20.0.x applications, including project scaffolding, feature module generation, routing setup, and component creation with enterprise architecture patterns.
Enables Bulma CSS Framework integration with custom design system setup, theme configuration, and responsive design implementation.
Provides tools for implementing CSS Grid and Flexbox layouts with responsive design patterns for Angular applications.
Features CI integration with GitHub Actions workflows for Node.js projects.
Offers adapter generation capabilities for GraphQL backend connections in Angular applications.
Integrates with @ngrx/signals 19.2.1 for modern state management in Angular applications, enabling signal-based reactivity patterns.
Supports TypeScript strict mode for maximum type safety in Angular applications, with code generation tools that produce type-safe components and services.
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
Related MCP server: Software Planning MCP Server
๐ฆ Installation
Global Installation
Local Installation
๐ง Configuration
MCP Client Setup (Claude Desktop)
Add to your MCP client configuration:
Environment Variables
Usage
Starting the MCP Server
Available MCP Tools
scaffold-project- Initialize a new Angular 20 project with all configurationsadd-feature- Generate a feature module with routing and stateconfigure-design-system- Set up Bulma with CSS Grid and custom variablessetup-table- Add TanStack table to a componentgenerate-adapter- Create backend adapter (REST/GraphQL/MCP)configure-auth- Set up authentication layeradd-micro-interaction- Implement interaction patternscreate-layout- Generate responsive CSS Grid layouts
Example: Create a New Project
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
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
Running Tests
Local Development
Configuration
Create a .mcp-angular.config.json in your project root:
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