Skip to main content
Glama

PrimeNG MCP Server

by hnkatze

PrimeNG MCP Server

Servidor MCP (Model Context Protocol) para acceder a la documentación de componentes PrimeNG y generar código.

Características

  • 📚 Documentación completa de componentes PrimeNG

  • 🔍 Búsqueda de componentes

  • 💻 Generación automática de código

  • 📝 Ejemplos prácticos de uso

  • ⚡ Cache de documentación para respuestas rápidas

Instalación

npm install npm run build

Uso en Desarrollo

npm run dev

Configuración en Claude Desktop

Añade lo siguiente a tu archivo de configuración de Claude Desktop:

MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%/Claude/claude_desktop_config.json

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

O en modo desarrollo:

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

Herramientas Disponibles

1. get_component_doc

Obtiene documentación completa de un componente.

Parámetros:

  • component (string): Nombre del componente (ej: "button", "table", "dialog")

Ejemplo de uso:

¿Cuáles son las propiedades del componente Button de PrimeNG?

2. search_components

Busca componentes por término.

Parámetros:

  • query (string): Término de búsqueda

Ejemplo de uso:

Busca componentes de PrimeNG relacionados con "input"

3. list_all_components

Lista todos los componentes disponibles organizados por categoría.

Ejemplo de uso:

Muéstrame todos los componentes de PrimeNG

4. generate_component_code

Genera código de ejemplo para un componente.

Parámetros:

  • component (string): Nombre del componente

  • properties (object, opcional): Propiedades del componente

Ejemplo de uso:

Genera código para un botón con label "Guardar" y icono "pi pi-save"

5. get_component_examples

Obtiene ejemplos prácticos de uso.

Parámetros:

  • component (string): Nombre del componente

Ejemplo de uso:

Dame ejemplos de cómo usar el componente Table de PrimeNG

Componentes Soportados

El servidor incluye más de 70 componentes de PrimeNG:

  • Inputs: autocomplete, calendar, checkbox, dropdown, inputtext, etc.

  • Data: datatable, table, dataview, tree, etc.

  • Buttons: button, splitbutton, speeddial

  • Panels: accordion, card, panel, tabview, etc.

  • Overlays: dialog, sidebar, tooltip

  • Menus: breadcrumb, menu, menubar, megamenu, etc.

  • Messages: message, toast

  • Media: carousel, galleria, image

  • Y muchos más...

Ejemplos de Consultas

1. "¿Cómo uso el componente Calendar de PrimeNG?" 2. "Genera un dialog con header y footer" 3. "Busca componentes de menú" 4. "Dame ejemplos del componente Table" 5. "Lista todos los componentes de entrada"

Arquitectura

primeng-mcp-server/ ├── src/ │ └── index.ts # Servidor MCP principal ├── dist/ # Código compilado ├── package.json ├── tsconfig.json └── README.md

Desarrollo

Añadir nuevos componentes

Edita el array PRIMENG_COMPONENTS en src/index.ts:

const PRIMENG_COMPONENTS = [ "accordion", "button", "table", // ... más componentes ];

Añadir ejemplos personalizados

Modifica el método getCommonExamples() en src/index.ts:

private getCommonExamples(component: string): string { const examples: Record<string, string> = { button: `...`, table: `...`, // Añade más aquí }; // ... }

Mejoras Futuras

  • Scraping automático de la documentación oficial de PrimeNG

  • Cache persistente en disco

  • Soporte para temas y estilos

  • Validación de propiedades

  • Generación de tests unitarios

  • Integración con PrimeNG CLI

  • Soporte para templates de componentes complejos

  • Generación de código TypeScript para lógica de componentes

Recursos

Licencia

MIT

Deploy Server
A
security – no known vulnerabilities
F
license - not found
A
quality - confirmed to work

local-only server

The server can only run on the client's local machine because it depends on local resources.

Provides access to PrimeNG component documentation and generates code examples. Supports searching components, retrieving documentation, and creating practical usage examples for Angular UI development.

  1. Características
    1. Instalación
      1. Uso en Desarrollo
        1. Configuración en Claude Desktop
          1. Herramientas Disponibles
            1. 1. get_component_doc
            2. 2. search_components
            3. 3. list_all_components
            4. 4. generate_component_code
            5. 5. get_component_examples
          2. Componentes Soportados
            1. Ejemplos de Consultas
              1. Arquitectura
                1. Desarrollo
                  1. Añadir nuevos componentes
                  2. Añadir ejemplos personalizados
                2. Mejoras Futuras
                  1. Recursos
                    1. Licencia

                      MCP directory API

                      We provide all the information about MCP servers via our MCP API.

                      curl -X GET 'https://glama.ai/api/mcp/v1/servers/hnkatze/PrimeNG_MCP'

                      If you have feedback or need assistance with the MCP directory API, please join our Discord server