Shadcn Ui MCP Server Roshan S

shadcn MCP 服务器

使用 shadcn MCP 服务器来浏览、搜索和从注册表中安装组件。

shadcn MCP 服务器允许 AI 助手与注册表中的项目进行交互。您可以浏览可用的组件，搜索特定组件，并使用自然语言直接将它们安装到您的项目中。

例如，你可以让AI助手“使用来自acme注册表的组件构建一个着陆页”，或者“帮我从shadcn注册表中找一个登录表单”。

在您的项目中配置注册表 components.json 文件。

{
  "registries": {
    "@acme": "https://acme.com/r/{name}.json"
  }
}

快速入门

选择您的MCP客户端，并按照说明配置shadcn MCP服务器。

在您的项目中运行以下命令：

pnpm dlx shadcn@latest mcp init --client claude

重启Claude代码并尝试以下提示：

• 在shadcn注册表中显示所有可用的组件
• 将按钮、对话框和卡片组件添加到我的项目中
• 使用 shadcn 注册表中的组件创建一个联系表单

注：您可以使用 /mcp 在Claude代码中使用命令调试MCP服务器。

什么是MCP？

模型上下文协议（MCP） 这是一个开放协议，使AI助手能够安全地连接到外部数据源和工具。借助shadcn MCP服务器，您的AI助手可以直接访问：

• 浏览组件 - 列出来自任何已配置注册表的所有可用组件、模块和模板
• 跨注册表搜索 - 通过名称或功能在多个来源中查找特定组件
• 使用自然语言进行安装 - 使用简单的对话提示添加组件，例如“添加登录表单”
• 支持多个注册表 - 访问公共注册表、私有公司库和第三方资源

它是如何运作的

MCP服务器充当您的人工智能助手、组件注册表和shadcn CLI之间的桥梁。

1. 注册表连接 - MCP 连接到已配置的注册表（shadcn/ui、私有注册表、第三方源）
2. 自然语言 - 你用简单的英语描述你的需求
3. 人工智能处理 - 助手将您的请求转换为注册表命令
4. 组件交付 - 资源已获取并安装到您的项目中

支持的注册表

shadcn MCP 服务器与任何兼容 shadcn 的注册表开箱即用。

• shadcn/ui 注册表 - 默认注册了所有 shadcn/ui 组件的注册表
• 第三方注册表 - 任何遵循shadcn注册表规范的注册表
• 私有注册表 - 贵公司内部的组件库
• 命名空间注册表 - 配置了多个注册表 @namespace 语法

配置

你可以使用任何MCP客户端来与shadcn MCP服务器进行交互。以下是几个最受欢迎的客户端的使用说明。

克劳德·科德

要在项目中使用shadcn MCP服务器与Claude Code，需添加以下配置到您的项目中 .mcp.json 文件：

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

添加配置后，重启Claude Code并运行 /mcp 在列表中看到shadcn MCP服务器。如果你看到了 Connected，你就可以出发了。

光标

要在Cursor中配置MCP，请将shadcn服务器添加到您的项目中 .cursor/mcp.json 配置文件：

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

添加配置后，在Cursor设置中启用shadcn MCP服务器。

一旦启用，您应该会在MCP服务器列表中的shadcn服务器旁边看到一个绿色的点，以及可用工具的列表。

VS Code（Visual Studio Code，简称VS Code）

要在VS Code中配置MCP并使用GitHub Copilot，请将shadcn服务器添加到您的项目中 .vscode/mcp.json 配置文件：

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

添加配置后，打开 .vscode/mcp.json 并点击 Start 在……旁边 shadcn 服务器。

配置注册表

MCP服务器通过您的项目支持多个注册表 components.json 配置。这允许您从各种来源访问组件，包括私有注册表和第三方提供商。

在您的（系统/环境中）配置额外的注册表 components.json:

{
  "registries": {
    "@acme": "https://registry.acme.com/{name}.json",
    "@internal": {
      "url": "https://internal.company.com/{name}.json",
      "headers": {
        "Authorization": "Bearer ${REGISTRY_TOKEN}"
      }
    }
  }
}

注：访问标准的 shadcn/ui 注册表无需进行任何配置。

认证

对于需要认证的私有注册表，请在您的环境中设置环境变量 .env.local：

REGISTRY_TOKEN=your_token_here
API_KEY=your_api_key_here

示例提示

一旦配置好MCP服务器，您就可以使用自然语言与注册表进行交互。尝试以下提示之一：

浏览与搜索

• 在shadcn注册表中显示所有可用的组件
• 从shadcn库中为我找一个登录表单

安装项目

• 将按钮组件添加到我的项目中
• 使用 shadcn 组件创建一个登录表单
• 从acme注册表安装Cursor规则

使用命名空间

• 显示来自Acme注册表的组件
• 安装 @internal/auth-form
• 使用来自Acme注册表的英雄图、功能和客户评价部分为我构建一个着陆页

故障排除

MCP 无响应

如果MCP服务器没有响应提示：

1. 检查配置 - 验证MCP服务器是否在您的MCP客户端中已正确配置并启用
2. 重启MCP客户端 - 在配置更改后重启您的MCP客户端
3. 验证安装 - 确保 shadcn 已安装在您的项目中
4. 检查网络 - 确认可以访问已配置的注册表

注册表访问问题

如果组件没有从注册表加载：

1. 检查 components.json - 验证注册表URL是否正确
2. 测试身份验证 - 确保已为私有注册表设置环境变量
3. 验证注册表 - 确认注册表已上线且可访问
4. 检查命名空间 - 确保命名空间语法正确@namespace/component）

安装故障

如果组件安装失败：

1. 检查项目设置 - 确保您已拥有有效的 components.json 文件
2. 验证路径 - 确认目标目录存在
3. 检查权限 - 确保组件目录具有写权限
4. 审查依赖项 - 确认所需依赖项已安装

无工具或提示

如果你看到 No tools or prompts 消息，尝试以下方法：

1. 清除 npx 缓存 - 运行 npx clear-npx-cache
2. 重新启用MCP服务器 - 在您的MCP客户端中尝试重新启用MCP服务器
3. 检查日志 - 在Cursor中，您可以查看以下的日志 View -> Output 并选择 MCP: project-* 在下拉菜单中。