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

This server cannot be installed

security - not tested

license - permissive license

quality - not tested

How are these scores calculated?

Provides 11 powerful tools for Angular development with enterprise-grade templates, scaffolding capabilities, and project generation features for modern Angular 20.0.x applications.

Related MCP Servers

mcp-github-project-manager
kunwarVivek
A
security
A
license
A
quality
Provides comprehensive tools for managing GitHub projects, milestones, tasks, and sprints. This server integrates deeply with GitHub Projects V2, offering features like automated kanban workflows, sprint planning, and custom field management.
Last updated -
46
37
37
TypeScript
MIT License
Software Planning MCP Server
Jo-Lion
-
security
F
license
-
quality
Provides software development planning tools to help users create implementation plans and manage todo items.
Last updated -
Python
Golang Dev Tools
MrFixit96
-
security
F
license
-
quality
Golang Dev Tools
Last updated -
Go
Project Explorer MCP Server
MausRundung362
-
security
A
license
-
quality
Provides tools for analyzing project structures, searching through codebases, managing dependencies, and performing file operations with advanced filtering capabilities.
Last updated -
51
1
TypeScript
MIT License

View all related MCP servers

Angular MCP Toolkit