Shadcn Space MCP

shadcnspace-mcp

适用于 Shadcn Space 的官方模型上下文协议（MCP）服务。

此 MCP 服务允许 AI IDE 和编码 Agent（Cursor、Windsurf、Claude Desktop、Cline、Antigravity 等）直接在你的项目中发现、搜索、安装和构建 Shadcn Space UI 区块、落地页和组件，无需复制粘贴。

快速安装

使用 CLI

npx shadcnspace-cli install <client>

支持的客户端

• cursor
• windsurf
• claude
• cline
• antigravity

手动安装

添加到你的 IDE 或客户端的 MCP 配置（mcpServers）中：

{
  "mcpServers": {
    "shadcnspace-mcp": {
      "command": "npx",
      "args": ["-y", "shadcnspace-mcp@latest"]
    }
  }
}

了解更多详情，请访问我们的文档：如何使用 MCP 服务

---

可用工具

此服务提供 14 个专用工具，可通过 MCP 调用：

工具名称	描述
listCategories	返回全部 14 个区块类别（hero、features、pricing、testimonials、faq、cta、header、footer、stats、forms、content、ecommerce、ai、widgets），并提供总数、免费区块和 PRO 区块的实时数量。
listBlocks	列出区块及其许可证信息（isPro）。支持按 category 和许可证类型（all、free、pro）筛选。
listFreeBlocks	仅列出 100% 免费且无需任何许可证的 Shadcn Space 区块。支持按类别和关键词筛选。
listComponents	列出基础组件，支持搜索查询和许可证筛选（all、free、pro）。
getBlockInstall	返回特定区块的官方安装命令、组件导出名称、导入路径、JSX 示例、样式选项（base/radix）和许可证要求。
searchBlocks	按关键词、类别和可选的 freeOnly 筛选条件搜索区块。
listInstalledBlocks	列出用户项目中当前已安装的区块，并获取其文件。
listPages	列出所有 Shadcn Space 完整页面。
getPageInstall	返回特定完整页面的官方安装命令、导出名称、导入路径、用法示例和样式选项。
searchPages	使用关键词或标签搜索完整页面。
listInstalledPages	列出项目中当前已安装的页面。
getLandingPageGuidelines	全面的 UI/UX 落地页架构：区块顺序（Hero -> Logos -> Features -> Testimonials -> Pricing -> FAQ -> CTA -> Footer）、容器规范和垂直间距节奏。
handleError	自我修复诊断工具，用于解决许可证错误、缺少 components.json、找不到组件和 CLI 安装失败等问题。
get_audit_checklist	AI Agent 的强制工作流规则：样式检查（base/radix）、包管理器检测、许可证处理和导航栏去重。

许可说明： 所有页面和 PRO 区块都需要有效的许可证密钥，并在 components.json 的 registries 中配置邮箱。免费区块无需许可证即可直接安装。

---

可用提示词

该服务提供 7 个丰富的提示词，帮助加速 UI 架构设计：

提示词 / 命令	描述
build-landing-page	为 AI Agent 提供分步指导，帮助其设计并搭建完整且转化率高的落地页。
add-hero-section	查找、安装并集成高影响力的 Hero 区块到现有页面中。
add-pricing-section	添加支持月付 / 年付切换的多档定价表。
add-feature-grid	添加现代化的功能展示区或 Bento 网格区块。
create-ui	使用 Shadcn Space 区块设计完整 UI 页面的通用提示词。
search	按主题或关键词查找特定 UI 区块。
customization-guidelines	严格规定已安装区块中哪些部分可以安全自定义（仅限文本）。

---

使用 MCP Inspector 进行测试和调试

你可以在浏览器中使用官方 MCP Inspector 交互式检查、测试和调试所有工具和提示词：

npm run inspector

---

Agent 使用示例

在 AI IDE 中完成配置后，你可以提出如下请求：

“显示 Shadcn Space 中所有可用的免费 Hero 区块。”

“使用 Hero、Bento 功能区、客户评价、定价和 FAQ，为 AI 效率应用搭建完整的 SaaS 落地页。”

“提供 base 样式下 pricing-01 的安装命令和导入语句。”

“Shadcn Space 提供哪些类别的区块？”

---

Agent 指令（Claude / Cursor / Windsurf）

为确保 AI 助手遵循 Shadcn Space 的官方最佳实践（检查 Base 与 Radix、包管理器，并避免重复导航栏），请将 claude-instructions.md 中的系统提示词复制到 .cursorrules、.windsurfrules 或 Claude Project Instructions 中。

---

许可证与致谢

由 Shadcn Space 创建。

MIT