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
Automatically add to Cursor:
Or add the following to your editor's MCP JSON settings:
```json
{
"mcpServers": {
"ngm-dev-blocks": {
"command": "npx -y @ngm-dev/cli mcp"
}
}
}
```
Finally, 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.
- Output:
- A list of commands to run to generate the blocks.
- **`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.
Or add the following to your editor's MCP JSON settings:
```json
{
"mcpServers": {
"ngm-dev-blocks": {
"command": "npx -y @ngm-dev/cli mcp"
}
}
}
```
Finally, 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.
- Output:
- A list of commands to run to generate the blocks.
- **`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.