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

Uso en Desarrollo

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

O en modo desarrollo:

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:

2. search_components

Busca componentes por término.

Parámetros:

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

Ejemplo de uso:

3. list_all_components

Lista todos los componentes disponibles organizados por categoría.

Ejemplo de uso:

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:

5. get_component_examples

Obtiene ejemplos prácticos de uso.

Parámetros:

• component (string): Nombre del componente

Ejemplo de uso:

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

Arquitectura

Desarrollo

Añadir nuevos componentes

Edita el array PRIMENG_COMPONENTS en src/index.ts:

Añadir ejemplos personalizados

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

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

• Documentación de PrimeNG

• Model Context Protocol

• MCP SDK para Node.js

Licencia

MIT