Model Context Protocol (MCP)

The Angular Primitives MCP Server allows AI assistants to interact with our headless UI primitives. You can browse available components, search for specific ones, and get implementation help using natural language.

For example, you can ask an AI assistant to "Show me all form primitives" or "Add a dialog component to my Angular app" or "Get the API details for the button primitive".

Configuration

Automatic Setup

npx ng g ng-primitives:mcp-setup

Select your AI tools and the schematic will create the necessary configuration files.

Manual Setup

First, install the @ng-primitives/mcp package:

npm install @ng-primitives/mcp

Then, create the configuration file for your AI tool:

{
  "mcpServers": {
    "ngp-mcp": {
      "command": "npx",
      "args": ["-y", "@ng-primitives/mcp"]
    }
  }
}

{
  "mcpServers": {
    "ngp-mcp": {
      "command": "npx",
      "args": ["-y", "@ng-primitives/mcp"]
    }
  }
}

{
  "servers": {
    "ngp-mcp": {
      "command": "npx",
      "args": ["-y", "@ng-primitives/mcp"]
    }
  }
}

[mcp_servers.ngp-mcp]
command = "npx"
args = ["-y", "@ng-primitives/mcp"]

Example Usage

• "Show me all form primitives"
• "Add a dialog to my Angular app"
• "What are the button primitive's inputs?"
• "Generate the command to create a reusable button component"
• "Show me reusable component implementations"

Troubleshooting

MCP not responding?

• Restart your AI tool after configuration changes
• Verify your configuration file is valid JSON/TOML