Angular Material Blocks MCP Server
Learn how to use the Model Context Protocol with Angular Material Blocks
Angular Material Blocks now integrates with the Model Context Protocol (MCP) 🎉.
[MCP](https://modelcontextprotocol.com/) is an open protocol enabling applications like IDEs to better understand project context when interacting with LLMs.
This integration allows your AI coding assistant to directly access all Angular Material Blocks, resulting in improved code generation accuracy for your project.
## Installation
**1. Add the following to your MCP config file:**
```json
{
"mcpServers": {
"ngm-dev-mcp": {
"command": "npx",
"args": [
"-y",
"@ngm-dev/cli",
"mcp",
"full/path/to/angular/project" // mostly full path of current working directory
]
}
}
}
```
**2. Restart your IDE.**
### Supported Clients
- ✅ Cursor
- ✅ Windsurf
- ✅ Cline
## Usage
You can now ask your IDE to use any Angular Material Blocks. Here are some examples:
- _"Add a dialog"_
- _"Add login with email & password"_
- _"Add a feature section"_
- _"Add a form layout"_
In case, editor does not generate the files, you can try the following:
- _"Add a dialog & generate the necessary files (TS, HTML, CSS, etc.)"_
- _"Add a login with email & password & generate the necessary files (TS, HTML, CSS, etc.)"_
- _"Add a feature section & generate the necessary files (TS, HTML, CSS, etc.)"_
- _"Add a form layout & generate the necessary files (TS, HTML, CSS, etc.)"_
## Components
### Tools
The server provides the following tools callable via MCP:
- **`setup-angular-material-blocks`**
- Setup the project to be ready to use Angular Material blocks.
- Input:
- None
- Output:
- Command to run to setup the project to be ready to use Angular Material blocks.
- **`generate-angular-material-block`**
- Generates an Angular Material Block.
- Input:
- `blockNames`: A list of block names to generate.
- `pathToCreateBlocks`: The path to create the blocks.
- Output:
- A list of files that should be created.
- **`get-all-block-names`**
- Returns a list of all available block names.
- Input:
- None
- Output:
- A list of all available block names.
### Resources
The server provides access to block names:
- **Blocknames resource** (`blocknames:///all`)
- Returns a list of all available block names.
## Authentication
Premium blocks require [All Access](https://ui.angular-material.dev/home#pricing) & authentication.
After getting the access, you can get the token by clicking on "API Tokens" in the profile dropdown or by clicking [here](https://ui.angular-material.dev/account/tokens).
Finally, you can set the token by running:
```bash
npx @ngm-dev/cli auth
```
Once authenticated, restart your IDE.