home / mcp / primeng mcp server

PrimeNG MCP Server

MCP server to access PrimeNG component docs, search components, and generate Angular code.

Installation

Add the following to your MCP client configuration file.

Configuration

{
  "mcpServers": {
    "hnkatze-primeng_mcp": {
      "command": "node",
      "args": [
        "/ruta/absoluta/a/primeng-mcp-server/dist/index.js"
      ]
    }
  }
}

You have a PrimeNG MCP Server that lets you access complete component documentation and generate Angular code. It’s designed to be practical: you can look up component details, explore examples, and generate ready-to-use code snippets for PrimeNG components within your Angular projects.

How to use

Use the MCP client to discover PrimeNG components, fetch their documentation, and generate example Angular code. You can search by component name or category, list all components, and request ready-to-run code samples for a specific component or its properties.

How to install

Prerequisites you need before starting: Node.js and npm installed on your system.

npm install
npm run build

Configuration and usage notes

Configure your MCP client to connect to the PrimeNG MCP Server using one of the provided runtime options. You can run the server locally through a Node.js process or use the development workflow with TSX for rapid iteration.

// Production runtime (local server)
{
  "mcpServers": {
    "primeng": {
      "command": "node",
      "args": ["/ruta/absoluta/a/primeng-mcp-server/dist/index.js"]
    }
  }
}

// Development runtime (TSX-based)
{
  "mcpServers": {
    "primeng": {
      "command": "npx",
      "args": ["-y", "tsx", "/ruta/absoluta/a/primeng-mcp-server/src/index.ts"]
    }
  }
}

Notes on runtime and environment

The server supports two common MCP runtimes shown above: a production path that runs the built dist index, and a development path that uses TSX to run from source. If you need to pass environment variables, add them under the env section for each MCP server configuration.

Development and tooling

You can work with the following tooling and scripts during development and testing. The project uses npm as the package manager and also supports npx for on-demand tool execution.

npm install
npm run build
npm run dev

Project architecture highlights

The MCP server is organized into modular parts including a PrimeNGServer, scraping and parsing services, a code generation module, and utilities for robust operation with retries and structured logging.

Available tools

get_component_doc

Fetches complete documentation for a given PrimeNG component, including properties, events, methods, and descriptions.

search_components

Searches PrimeNG components by term or category to help you locate relevant components quickly.

list_all_components

Lists all supported PrimeNG components organized by category for easy exploration.

generate_component_code

Generates example Angular code for a specified component and optional properties to help you start quickly.

get_component_examples

Retrieves all code examples extracted from PrimeNG documentation to illustrate usage across components.