组件管理服务器

ShadNG MCP(@shadng/sng-mcp)

ShadNG的MCP服务器：

• @shadng/sng-ui
• @shadng/sng-icons

此服务器从捆绑的快照文件运行(data/snapshot.json)，因此工具响应在运行时稳定快速。

画廊

https://shadng.js.org

安装

npm i -D @shadng/sng-mcp

构建并运行

npm install
npm run build
npm run start

支持的工具

• list_components
• get_component_docs
• get_component_examples
• get_install_command
• get_dependency_map
• get_icon_catalog
• get_dashboard_context

MCP客户端配置

推荐包装模式：

• command: npx
• args: ["-y", "@shadng/sng-mcp"]

反重力

mcp:
  servers:
    sng:
      command: npx
      args:
        - -y
        - "@shadng/sng-mcp"

克劳德代码

claude mcp add sng npx -y @shadng/sng-mcp

克莱恩

{
  "mcpServers": {
    "sng": {
      "command": "npx",
      "args": ["-y", "@shadng/sng-mcp"]
    }
  }
}

法典

codex mcp add sng -- npx -y @shadng/sng-mcp

Copilot命令行界面

copilot mcp add sng -- npx -y @shadng/sng-mcp

副驾驶/VS代码

使用命令行：

copilot mcp add sng -- npx -y @shadng/sng-mcp

或者，如果您的编辑器要求提供原始JSON配置，请使用相同的 mcpServers 形状为Cline/Cursor。

光标

{
  "mcpServers": {
    "sng": {
      "command": "npx",
      "args": ["-y", "@shadng/sng-mcp"]
    }
  }
}

Gemini CLI

gemini mcp add sng -- npx -y @shadng/sng-mcp

Gemini代码辅助

在Gemini代码辅助设置中添加MCP服务器，包括：

• command: npx
• args: -y @shadng/sng-mcp

JetBrains人工智能助理和Junie

使用以下命令在IDE MCP设置中添加MCP服务器：

• command: npx
• args: -y @shadng/sng-mcp

Visual Studio

使用以下命令在Visual Studio MCP设置中添加MCP服务器：

• command: npx
• args: -y @shadng/sng-mcp

帆板运动

{
  "mcpServers": {
    "sng": {
      "command": "npx",
      "args": ["-y", "@shadng/sng-mcp"]
    }
  }
}

测试

npm run test
npm run smoke

备注

• 组件输入接受别名(button, sng-button, SngButton).
• 如果请求的UI部件不在 sng-ui，guide使用ShadNG模式返回以Angular为中心的自定义构建建议。
• @shadng/sng-icons 是优选的，不是必需的。需要时返回内联SVG回退指南。