项目简介

PrimeNG 组件辅助MCP服务器是一个强大的后端服务，它通过Model Context Protocol (MCP) 标准协议与LLM客户端（如Claude Desktop）进行通信。它的核心功能是管理和提供PrimeNG框架中所有组件的最新文档、使用示例、以及自动化代码生成能力。这使得LLM能够成为开发者的智能助手，快速获取组件信息并生成可用的代码片段，极大地加速前端开发流程。

主要功能点

获取组件详细文档: 检索任何PrimeNG组件（如按钮、表格、对话框）的完整文档，包括其属性、事件和方法。
搜索组件: 根据关键词快速查找相关的PrimeNG组件。
列出所有组件: 按类别展示PrimeNG支持的所有组件列表，方便概览。
生成组件代码: 根据指定的组件名称和属性，自动生成可用的HTML/TypeScript代码示例，实现快速原型开发。
获取组件使用示例: 提供特定PrimeNG组件的实际使用场景和代码片段，帮助理解和应用。
获取开发指南: 提供PrimeNG的安装、主题配置、图标使用以及与Tailwind CSS集成等详细指南，助力开发者快速上手。
文档缓存: 内置文档缓存机制，确保快速响应并减少对PrimeNG官网的访问压力，提升用户体验。

安装步骤

克隆仓库: 将此GitHub仓库克隆到你的本地机器。

git clone https://github.com/hnkatze/PrimeNG_MCP.git
cd PrimeNG_MCP

安装依赖并编译: 打开命令行终端，导航到项目根目录，然后运行以下命令安装项目依赖并编译代码：
```
npm install
npm run build
```

服务器配置 (以Claude Desktop为例)

要让MCP客户端（例如Claude Desktop）连接并使用此MCP服务器，你需要将其配置信息添加到客户端的设置文件中。

你需要找到Claude Desktop的配置文件：

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

打开该JSON文件，在 'mcpServers' 部分添加以下配置：

生产环境部署配置：

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

'"primeng"': 这是服务器的唯一标识符，你可以根据需要命名。
'"command"': 指定用于启动MCP服务器的可执行文件。在这里是 'node'，因为服务器是JavaScript应用。
'"args"': 是 'command' 命令的参数列表。'"/ruta/absoluta/a/primeng-mcp-server/dist/index.js"' 需要替换为你的PrimeNG MCP服务器项目编译后 'dist' 目录下 'index.js' 文件的绝对路径。

开发模式配置： 如果你在开发模式下运行服务器，可以使用以下配置：

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

'"command"': 在开发模式下，使用 'npx' 来运行TypeScript文件。
'"args"': '"-y", "tsx"' 是 'npx' 的参数，用于执行 'tsx'。'"/ruta/absoluta/a/primeng-mcp-server/src/index.ts"' 需要替换为你的PrimeNG MCP服务器项目源代码 'src' 目录下 'index.ts' 文件的绝对路径。

基本使用方法 (向LLM客户端提问)

配置完成后，你的LLM客户端现在可以使用MCP服务器提供的工具。你可以直接用自然语言向LLM提问，例如：

"请告诉我PrimeNG Button组件有哪些属性？"
"我正在寻找与'input'相关的PrimeNG组件，能帮我列出来吗？"
"生成一个带有'Guardar'标签和'pi pi-save'图标的PrimeNG按钮代码。"
"给我一些PrimeNG Table组件的实际使用示例。"
"PrimeNG的安装指南是怎样的？"
"如何为PrimeNG应用设置自定义主题？"

关键词

项目简介

主要功能点

安装步骤

服务器配置 (以Claude Desktop为例)

基本使用方法 (向LLM客户端提问)

信息