MCP Server

pnpmnpmyarnbun
pnpm dlx shadcn-vue@latest mcp init --client claude
Copy

什么是 MCP？

Model Context Protocol (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

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

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

添加配置后，重启 Claude Code 并运行 /mcp 以在列表中查看 shadcn MCP 服务器。如果你看到 Connected（已连接），说明配置成功。

详情请参阅 Claude Code MCP 文档。

Cursor

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

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

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

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

详情请参阅 Cursor MCP 文档。

VS Code

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

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

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

详情请参阅 VS Code MCP 文档。

Codex

要在 Codex 中配置 MCP，请将 shadcn 服务器添加到 ~/.codex/config.toml

Copy[mcp_servers.shadcn]
command = "npx"
args = ["shadcn-vue@latest", "mcp"]

添加配置后，重启 Codex 以加载 MCP 服务器。

Opencode

要在 opencode 中配置 MCP，请将 shadcn 服务器添加到 opencode.json

Copy{
    "$schema": "https://opencode.ac.cn/config.json",
    "mcp": {
        "shadcnVue": {
            "type": "local",
            "enabled": true,
            "command": ["npx", "shadcn-vue@latest", "mcp"]
        }
    }
}

详情请参阅 Opencode 文档。

配置注册表

MCP 服务器通过项目的 components.json 配置文件支持多个注册表。这使你能够从各种来源（包括私有注册表和第三方提供商）访问组件。

在 components.json 中配置额外的注册表

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

身份验证

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

CopyREGISTRY_TOKEN=your_token_here
API_KEY=your_api_key_here

有关注册表身份验证的更多详情，请参阅身份验证文档。

提示词示例

配置好 MCP 服务器后，你可以使用自然语言与注册表进行交互。尝试以下提示词

浏览与搜索

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

安装项目

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

使用命名空间

• 显示来自 acme 注册表的组件
• 安装 @internal/auth-form
• 使用来自 acme 注册表的 hero、features 和 testimonials 区块为我构建一个落地页

故障排查

MCP 无响应

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

1. 检查配置 - 验证 MCP 服务器是否已正确配置并在你的 MCP 客户端中启用
2. 重启 MCP 客户端 - 在修改配置后重启你的 MCP 客户端
3. 验证安装 - 确保 shadcn-vue 已安装在你的项目中
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-*。

了解更多

• 注册表文档 - shadcn 注册表完整指南
• 命名空间 - 配置多个注册表源
• 身份验证 - 保护你的私有注册表
• MCP 规范 - 了解模型上下文协议