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

npm run inspector

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

You must be authenticated.

security – no known vulnerabilities

license - permissive license

quality - confirmed to work

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

帮助 AI 助手通过基于 TypeScript 的 MCP 服务器访问 shadcn/ui 组件文档和示例，该服务器提供组件详细信息、使用示例和搜索功能的参考信息。

Related MCP Servers

Apifox MCP
sujianqingfeng
-
security
-
license
-
quality
An MCP server that integrates Apifox API documentation with AI assistants, allowing AI to extract and understand API information from Apifox projects.
Last updated -
91
TypeScript
code2prompt-mcp
ODAncona
-
security
A
license
-
quality
An MCP server that analyzes codebases and generates contextual prompts, making it easier for AI assistants to understand and work with code repositories.
Last updated -
10
Python
MIT License
browser-use MCP Server
co-browser
-
security
A
license
-
quality
An MCP server that enables AI assistants to control a web browser through natural language commands, allowing them to navigate websites and extract information via SSE transport.
Last updated -
505
Python
MIT License
ServiceTitan MCP Server
JordanDalton
A
security
F
license
A
quality
An MCP server that allows AI assistants to interact with the ServiceTitan API, requiring client credentials for authentication.
Last updated -
454
TypeScript

View all related MCP servers

shadcn-ui MCP Server