如何把 shadcn/ui MCP Server 接入 Claude Code 并用自然语言安装 Registry 组件？-编程实验室

如何把 shadcn/ui MCP Server 接入 Claude Code 并用自然语言安装 Registry 组件？

【免费下载链接】uiA set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.项目地址: https://gitcode.com/GitHub_Trending/ui/ui

shadcn 的shadcnCLI 内置了一个 MCP（Model Context Protocol）Server，让 Claude Code 这类 AI 助手能够直接浏览 Registry、搜索组件，并用自然语言把组件安装进你的项目。接入完成后，你可以直接对 Claude Code 说 "Add the button, dialog and card components to my project"，而不必逐条敲npx shadcn@latest add命令。

本文以 Claude Code 为客户端，覆盖三步：把 shadcn MCP Server 配置进项目、用/mcp验证连接、用自然语言提示词安装 Registry 组件。如果你的项目还需要访问第三方或私有 Registry，文中会给出components.json中registries字段的配置方式。

准备条件

MCP Server 通过npx shadcn@latest mcp启动，它从项目根目录的components.json读取 Registry 配置。文档明确指出：访问默认的 shadcn/ui Registry 不需要任何额外配置；其他命名空间 Registry 则在components.json中配置。

components.json本身是通过 CLI 初始化项目时生成的。如果你的项目还没有这个文件，先在项目根目录运行：

npx shadcn@latest init

init命令会安装依赖、添加cn工具函数、配置 CSS 变量，并生成项目配置。注意style和tailwind.baseColor等字段初始化后无法再更改。

另外文档提醒：MCP 工具只负责 Registry 操作（搜索、浏览、安装）。项目配置类操作（aliases、framework、Tailwind 版本）没有对应的 MCP 工具，仍然要用npx shadcn@latest info或 CLI 命令处理。

在 Claude Code 中接入 shadcn MCP Server

在项目根目录运行：

npx shadcn@latest mcp init --client claude

该命令会把 MCP Server 的配置写入项目的.mcp.json文件，然后重启 Claude Code使配置生效。

如果你想手动配置而不依赖这条命令，在项目中创建.mcp.json，写入：

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

两种方式写入的配置内容一致，手动方式适合需要自己控制文件内容或该命令在你的环境不可用的情况。

验证连接是否成功

重启 Claude Code 后，在会话中运行/mcp命令查看 MCP Server 列表：

列表中能看到shadcn条目且状态为Connected，说明接入成功，可以直接开始用自然语言操作 Registry。
文档同时说明/mcp可用于调试 MCP Server。如果这里看不到shadcn或状态异常，先检查.mcp.json是否按上面格式写入，再重启一次客户端。

用自然语言安装 Registry 组件

连接成功后，直接用文档给出的提示词验证核心能力。以下提示词均来自官方文档，可原样使用：

浏览与搜索：

"Show me all available components in the shadcn registry"
"Find me a login form from the shadcn registry"

安装：

"Add the button, dialog and card components to my project"
"Add the button component to my project"
"Create a login form using shadcn components"

命名空间（针对你在components.json中配置过的 Registry）：

"Show me components from acme registry"
"Install @internal/auth-form"
"Build me a landing page using hero, features and testimonials sections from the acme registry"

这些自然语言请求背后由 MCP Server 的一组工具执行。了解它们有助于你判断助手"在做什么"，也方便在排查时定位卡在哪一步：

工具	作用
`shadcn:get_project_registries`	从`components.json`返回已配置的 Registry 名称；项目里不存在`components.json`时会报错
`shadcn:list_items_in_registries`	列出 Registry 中的条目；省略`registries`参数时列出`components.json`中所有已配置 Registry，支持`types`（如`["ui", "block"]`）、`limit`（默认 100）、`offset`参数
`shadcn:search_items_in_registries`	跨 Registry 模糊搜索，参数同上，`query`必填
`shadcn:view_items_in_registries`	查看条目详情，包括完整文件内容，`items`形如`["@shadcn/button", "owner/repo/item"]`
`shadcn:get_item_examples_from_registries`	查找带源码的用法示例，`query`例如`"accordion-demo"`、`"button example"`
`shadcn:get_add_command_for_items`	返回对应的 CLI 安装命令，`items`形如`["@shadcn/button"]`
`shadcn:get_audit_checklist`	返回用于核对已安装组件的清单（imports、deps、lint、TypeScript）

安装成功后，组件文件按components.json中 aliases 配置的目录写入你的项目，相关依赖一并安装。你可以用shadcn:get_audit_checklist返回的清单逐项核对导入、依赖和类型检查，确认组件可正常编译使用。

访问第三方或私有 Registry（可选）

如果你只想用默认 shadcn Registry，可以跳过这一节。需要访问其他 Registry 时，在项目components.json的registries字段中配置，MCP Server 会自动读取这些配置：

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

规则如下（来自文档）：

命名空间名称必须以@开头；
URL 模板中必须包含{name}占位符，CLI 解析条目时会用条目名替换它，例如@acme/button解析为https://registry.acme.com/button.json；
形如${VAR}的引用从环境变量解析。需要认证的私有 Registry，把对应的环境变量（文档示例为REGISTRY_TOKEN，替换成你的实际 token）写入项目的.env.local。

配置完成后，前面"Work with Namespaces"里的自然语言提示词就可以直接作用于这些 Registry，例如 "Install @internal/auth-form"。