94.2k

MCP 服务器

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

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

例如，您可以要求 AI 助手“使用 acme 注册表中的组件构建一个登录页面”或“从 shadcn 注册表中为我查找一个登录表单”。

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

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

快速入门

选择您的 MCP 客户端并按照说明配置 shadcn MCP 服务器。如果您想手动操作，请参阅配置部分。

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

pnpm dlx shadcn@latest mcp init --client claude

重新启动 Claude Code 并尝试以下提示

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

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

什么是 MCP？

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

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

工作原理

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

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

支持的注册表

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

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

配置

您可以使用任何 MCP 客户端与 shadcn MCP 服务器进行交互。以下是最流行的客户端的说明。

Claude Code

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

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

添加配置后，重新启动 Claude Code 并运行 /mcp 以在列表中查看 shadcn MCP 服务器。如果您看到 Connected，则表示一切正常。

有关更多详细信息，请参阅 Claude Code MCP 文档。

Cursor

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

.cursor/mcp.json
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

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

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

有关更多详细信息，请参阅 Cursor MCP 文档。

VS Code

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

.vscode/mcp.json
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

添加配置后，打开 .vscode/mcp.json 并点击 shadcn 服务器旁边的 启动。

有关更多详细信息，请参阅 VS Code MCP 文档。

配置注册表

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

在您的 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}"
      }
    }
  }
}

身份验证

对于需要身份验证的私人注册表，请在您的 .env.local 中设置环境变量

.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. 检查依赖项 - 检查是否已安装所需的依赖项

没有工具或提示

如果您看到 没有工具或提示 消息，请尝试以下操作

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

了解更多