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 仓库

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

• 组件描述

• 安装说明

• 使用示例

• 道具和变体

• 代码示例

Related MCP server: Shadcn UI MCP Server

发展

安装依赖项：

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 Inspector ，它以包脚本的形式提供：

npm run inspector

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