MCP

MCP 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:

{
  "mcpServers": {
    "ngm-dev-blocks": {
      "command": "npx",
      "args": ["-y", "@ngm-dev/cli", "mcp", "full/path/to/angular/project"]
    }
  }
}

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 & authentication.

After getting the access, you can get the token by clicking on "API Tokens" in the profile dropdown or by clicking here.

Finally, you can set the token by running:

npx @ngm-dev/cli auth

Once authenticated, restart your IDE.

Share Your Thoughts

Have suggestions for improving our MCP capabilities or ideas for new tools or features? We'd love to hear from you! Create an issue in our Angular-Material-Dev/community GitHub repository to share your feedback and help make these tools even better.