如何把 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/uishadcn 的shadcnCLI 内置了一个 MCPModel Context ProtocolServer让 Claude Code 这类 AI 助手能够直接浏览 Registry、搜索组件并用自然语言把组件安装进你的项目。接入完成后你可以直接对 Claude Code 说 Add the button, dialog and card components to my project而不必逐条敲npx shadcnlatest add命令。本文以 Claude Code 为客户端覆盖三步把 shadcn MCP Server 配置进项目、用/mcp验证连接、用自然语言提示词安装 Registry 组件。如果你的项目还需要访问第三方或私有 Registry文中会给出components.json中registries字段的配置方式。准备条件MCP Server 通过npx shadcnlatest mcp启动它从项目根目录的components.json读取 Registry 配置。文档明确指出访问默认的 shadcn/ui Registry 不需要任何额外配置其他命名空间 Registry 则在components.json中配置。components.json本身是通过 CLI 初始化项目时生成的。如果你的项目还没有这个文件先在项目根目录运行npx shadcnlatest initinit命令会安装依赖、添加cn工具函数、配置 CSS 变量并生成项目配置。注意style和tailwind.baseColor等字段初始化后无法再更改。另外文档提醒MCP 工具只负责 Registry 操作搜索、浏览、安装。项目配置类操作aliases、framework、Tailwind 版本没有对应的 MCP 工具仍然要用npx shadcnlatest info或 CLI 命令处理。在 Claude Code 中接入 shadcn MCP Server在项目根目录运行npx shadcnlatest mcp init --client claude该命令会把 MCP Server 的配置写入项目的.mcp.json文件然后重启 Claude Code使配置生效。如果你想手动配置而不依赖这条命令在项目中创建.mcp.json写入{ mcpServers: { shadcn: { command: npx, args: [shadcnlatest, mcp] } } }两种方式写入的配置内容一致手动方式适合需要自己控制文件内容或该命令在你的环境不可用的情况。验证连接是否成功重启 Claude Code 后在会话中运行/mcp命令查看 MCP Server 列表列表中能看到shadcn条目且状态为Connected说明接入成功可以直接开始用自然语言操作 Registry。文档同时说明/mcp可用于调试 MCP Server。如果这里看不到shadcn或状态异常先检查.mcp.json是否按上面格式写入再重启一次客户端。用自然语言安装 Registry 组件连接成功后直接用文档给出的提示词验证核心能力。以下提示词均来自官方文档可原样使用浏览与搜索Show me all available components in the shadcn registryFind me a login form from the shadcn registry安装Add the button, dialog and card components to my projectAdd the button component to my projectCreate a login form using shadcn components命名空间针对你在components.json中配置过的 RegistryShow me components from acme registryInstall internal/auth-formBuild 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 exampleshadcn: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。常见问题排查文档的 Troubleshooting 一节按现象给出了检查项按对应情况处理MCP 没有响应Not Responding检查 MCP Server 是否已在客户端中正确配置并启用修改配置后重启 MCP 客户端确认shadcn在项目中可用即npx shadcnlatest能正常执行确认网络可以访问已配置的 Registry。Registry 无法访问 / 组件加载不出来核对components.json中 Registry URL 是否正确私有 Registry 检查认证环境变量是否已设置确认 Registry 在线且可访问检查命名空间写法是否为namespace/component。组件安装失败确认项目存在有效的components.json确认目标目录存在确认对组件目录有写权限检查所需依赖是否已安装。提示No tools or prompts按文档给出的顺序处理npx clear-npx-cache清除 npx 缓存后在客户端中重新启用 MCP Server如果问题出现在 Cursor 中还可以在 View - Output 里选择MCP: project-*查看日志。相关文档MCP 总览含 Cursor、VS Code、Codex、OpenCode 各客户端的配置mcp.mdx/mcp.mdx)Registry 开发侧的 MCP 说明Registry 需要暴露根registry.json才能被 MCP 请求索引registry/mcp.mdxcomponents.json各字段style、tailwind、aliases、registriescomponents-json.mdx/components-json.mdx)CLI 命令参考init、add、view、search等可与 MCP 对照使用cli.mdx/cli.mdx)【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/9 19:30:04 · 阅读 1.2k 如何把 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/uishadcn 的shadcnCLI 内置了一个 MCPModel Context ProtocolServer让 Claude Code 这类 AI 助手能够直接浏览 Registry、搜索组件并用自然语言把组件安装进你的项目。接入完成后你可以直接对 Claude Code 说 Add the button, dialog and card components to my project而不必逐条敲npx shadcnlatest add命令。本文以 Claude Code 为客户端覆盖三步把 shadcn MCP Server 配置进项目、用/mcp验证连接、用自然语言提示词安装 Registry 组件。如果你的项目还需要访问第三方或私有 Registry文中会给出components.json中registries字段的配置方式。准备条件MCP Server 通过npx shadcnlatest mcp启动它从项目根目录的components.json读取 Registry 配置。文档明确指出访问默认的 shadcn/ui Registry 不需要任何额外配置其他命名空间 Registry 则在components.json中配置。components.json本身是通过 CLI 初始化项目时生成的。如果你的项目还没有这个文件先在项目根目录运行npx shadcnlatest initinit命令会安装依赖、添加cn工具函数、配置 CSS 变量并生成项目配置。注意style和tailwind.baseColor等字段初始化后无法再更改。另外文档提醒MCP 工具只负责 Registry 操作搜索、浏览、安装。项目配置类操作aliases、framework、Tailwind 版本没有对应的 MCP 工具仍然要用npx shadcnlatest info或 CLI 命令处理。在 Claude Code 中接入 shadcn MCP Server在项目根目录运行npx shadcnlatest mcp init --client claude该命令会把 MCP Server 的配置写入项目的.mcp.json文件然后重启 Claude Code使配置生效。如果你想手动配置而不依赖这条命令在项目中创建.mcp.json写入{ mcpServers: { shadcn: { command: npx, args: [shadcnlatest, mcp] } } }两种方式写入的配置内容一致手动方式适合需要自己控制文件内容或该命令在你的环境不可用的情况。验证连接是否成功重启 Claude Code 后在会话中运行/mcp命令查看 MCP Server 列表列表中能看到shadcn条目且状态为Connected说明接入成功可以直接开始用自然语言操作 Registry。文档同时说明/mcp可用于调试 MCP Server。如果这里看不到shadcn或状态异常先检查.mcp.json是否按上面格式写入再重启一次客户端。用自然语言安装 Registry 组件连接成功后直接用文档给出的提示词验证核心能力。以下提示词均来自官方文档可原样使用浏览与搜索Show me all available components in the shadcn registryFind me a login form from the shadcn registry安装Add the button, dialog and card components to my projectAdd the button component to my projectCreate a login form using shadcn components命名空间针对你在components.json中配置过的 RegistryShow me components from acme registryInstall internal/auth-formBuild 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 exampleshadcn: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。常见问题排查文档的 Troubleshooting 一节按现象给出了检查项按对应情况处理MCP 没有响应Not Responding检查 MCP Server 是否已在客户端中正确配置并启用修改配置后重启 MCP 客户端确认shadcn在项目中可用即npx shadcnlatest能正常执行确认网络可以访问已配置的 Registry。Registry 无法访问 / 组件加载不出来核对components.json中 Registry URL 是否正确私有 Registry 检查认证环境变量是否已设置确认 Registry 在线且可访问检查命名空间写法是否为namespace/component。组件安装失败确认项目存在有效的components.json确认目标目录存在确认对组件目录有写权限检查所需依赖是否已安装。提示No tools or prompts按文档给出的顺序处理npx clear-npx-cache清除 npx 缓存后在客户端中重新启用 MCP Server如果问题出现在 Cursor 中还可以在 View - Output 里选择MCP: project-*查看日志。相关文档MCP 总览含 Cursor、VS Code、Codex、OpenCode 各客户端的配置mcp.mdx/mcp.mdx)Registry 开发侧的 MCP 说明Registry 需要暴露根registry.json才能被 MCP 请求索引registry/mcp.mdxcomponents.json各字段style、tailwind、aliases、registriescomponents-json.mdx/components-json.mdx)CLI 命令参考init、add、view、search等可与 MCP 对照使用cli.mdx/cli.mdx)【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考