AI导哈

组件参考服务

一个基于TypeScript的MCP服务器，提供shadcn/ui组件的参考信息和示例，帮助AI助手访问组件文档。

  • by ymadd
  • JavaScript
  • 本地部署
  • 60 星标
  • 更新于
在 GitHub 查看 ymadd/shadcn-ui-mcp-server

使用说明

shadcn-ui MCP服务器

用于shadcn/ui组件引用的MCP服务器

这是一个基于TypeScript的MCP服务器，为shadcn/ui组件提供参考信息。它实现了一个模型上下文协议（MCP）服务器，帮助AI助手访问shadcn/ui组件文档和示例。

特性

工具

  • list_shadcn_components -获取所有可用shadcn/ui组件的列表
  • get_component_details -获取特定组件的详细信息
  • get_component_examples -获取特定组件的使用示例
  • search_components -按关键字搜索组件

功能

此服务器从以下位置抓取和缓存信息：

  • shadcn/ui官方文档网站(https://ui.shadcn.com)
  • shadcn/ui GitHub存储库

它提供结构化数据，包括：

  • 部件说明
  • 安装说明
  • 使用示例
  • 道具和变体
  • 代码示例

发展

安装依赖项：

npm install

构建服务器：

npm run build

对于自动重建的开发：

npm run watch

安装

Claude桌面配置

要与Claude Desktop一起使用，请添加服务器配置：

在MacOS上： ~/Library/Application Support/Claude/claude_desktop_config.json 在Windows上： %APPDATA%/Claude/claude_desktop_config.json

选项1：使用本地构建

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "/path/to/shadcn-ui-server/build/index.js"
    }
  }
}

选项2：使用npx命令

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

风帆配置

将此添加到您的 ./codeium/windsurf/model_config.json:

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

光标配置

将此添加到您的 .cursor/mcp.json:

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

调试

由于MCP服务器通过stdio进行通信，调试可能具有挑战性。我们建议使用 MCP检查员，可作为包脚本使用：

npm run inspector

检查器将提供一个URL，用于访问浏览器中的调试工具。

相关 MCP