后端前端【免费下载链接】react-starter-kitModern React starter kit with Bun, TypeScript, Tailwind CSS, tRPC, Stripe, and Cloudflare Workers. Production-ready monorepo for building fast web apps.项目地址https://gitcode.com/gh_mirrors/rea/react-starter-kit点击查看免费下载shadcn CLI 内置的 MCPModel Context Protocol服务器让 Claude Code、Cursor、VS Code 等 AI 编程助手能够直接对组件注册表registry执行搜索、浏览、查看与安装操作。本文基于本仓库.agents/skills/shadcn/mcp.md文档展开结合仓库中的components.json、packages/ui组件库与scripts脚本系统讲解 MCP 的启动配置、七个核心工具、私有 Registry 配置方法以及在本 monorepo 中的实际落地场景读完即可在自己的编辑器中打通「AI 助手 ↔ shadcn registry」的自动化链路。MCP Server 是什么把 Registry 变成 AI 可调用的工具shadcn/ui 本身是一个通过 CLI 把组件以源代码形式安装进项目的框架参考 SKILL.md。MCP Server 是这个生态的延伸它以标准输入输出stdio方式启动一个本地服务把「搜索组件、查看组件详情、安装组件」等 registry 操作暴露成一组结构化工具供 AI 助手按需调用。在 react-starter-kit 中UI 组件集中在packages/ui包内组件以源码形式存在于 components 目录并由 packages/ui/index.ts 统一 re-export包括cn工具函数。这意味着开发者在应用代码如 apps/app/routes/(app)/settings.tsx/settings.tsx)中通过repo/ui或/components别名直接导入组件。MCP Server 恰好补足了「AI 助手需要新增组件」时的体验不需要让 AI 手写猜测组件 API而是让它直接查询 registry、获取权威的组件源码与示例。注意MCP 工具只负责 registry 操作search、view、install。项目配置层面的信息别名、框架、Tailwind 版本等并没有 MCP 等价物应使用npx shadcnlatest info获取。这一边界在本文「工具」一节会再次强调。Setup两种方式启动并接入编辑器启动 MCP Server 只有两条命令shadcn mcp # 以 stdio 方式启动 MCP 服务器 shadcn mcp init # 为你的编辑器写入 MCP 配置shadcn mcp init会探测当前编辑器并自动写入对应的配置文件。不同编辑器对应的配置文件如下编辑器配置文件Claude Code.mcp.jsonCursor.cursor/mcp.jsonVS Code.vscode/mcp.jsonOpenCodeopencode.jsonCodex~/.codex/config.toml需手动配置其中 Claude Code、Cursor、VS Code、OpenCode 均由init命令自动生成只有 Codex 需要手动编辑~/.codex/config.toml。与项目中的其他 CLI 约定一致SKILL.md 强调所有 shadcn 命令都应使用项目包管理器对应的 runner 执行npx shadcnlatest、pnpm dlx shadcnlatest或bunx --bun shadcnlatest。在本仓库中根目录 package.json 的 scripts 区给出了 bun 的对应封装ui:add: bun --cwd packages/ui add, ui:list: bun --cwd packages/ui list, ui:update: bun --cwd packages/ui update, ui:essentials: bun --cwd packages/ui essentials因此在本仓库中等价于shadcn mcp的写法是bunx --bun shadcnlatest mcpshadcn mcp init对应bunx --bun shadcnlatest mcp init。MCP 工具集七个 Registry 操作入口MCP Server 共暴露 7 个工具覆盖「查配置 → 列清单 → 模糊搜索 → 查看详情 → 查示例 → 拿安装命令 → 审计清单」的完整工作流。shadcn:get_project_registries返回components.json中配置的 registry 名称。若当前目录不存在components.json则报错。输入无。这是其余工具的前提——AI 助手在动手前先确认项目配置了哪些 registry。以本仓库为例apps/app/components.json 与 packages/ui/components.json 都采用new-york风格、lucide图标库、Tailwind CSS variables且都没有自定义registries字段即仅使用内置的shadcn官方 registry。shadcn:list_items_in_registries列出指定 registry 中的全部条目。registry 可以是指定命名空间如acme、公共 GitHub 源如owner/repo或 registry catalog URL。省略registries参数时列出components.json中配置的所有 registry。输入参数参数类型说明registriesstring[]可选省略则列出全部已配置 registrytypesstring[]可选按条目类型过滤如[ui, block]limitnumber可选最大条目数默认 100offsetnumber可选分页偏移量types参数对应的取值可参考 registry.md 中的条目类型定义registry:ui、registry:block、registry:lib、registry:hook、registry:file、registry:page、registry:theme、registry:style、registry:font、registry:item等。传入时一般省略registry:前缀直接写ui、block。shadcn:search_items_in_registries跨 registry 进行模糊搜索fuzzy search是 AI 助手「帮我找一个 hero 组件」这类自然语言诉求的落点。省略registries时会搜索components.json中配置的所有 registry。输入参数参数类型说明registriesstring[]可选省略则搜索全部已配置 registryquerystring必填搜索关键词typesstring[]可选按类型过滤如[ui, block]limitnumber可选默认 100offsetnumber可选分页偏移量CLI 侧的等价命令是npx shadcnlatest search shadcn -q sidebar参见 SKILL.md 的 Quick ReferenceMCP 工具把这一能力直接交给了 AI 助手。shadcn:view_items_in_registries查看条目详情包括完整文件内容。这对「安装前审计第三方 registry 代码」尤其有用——与 CLI 的npx shadcnlatest view shadcn/button语义一致。输入参数参数类型说明itemsstring[]必填条目地址如[shadcn/button, shadcn/card, owner/repo/item]条目地址的完整语法bare name / 命名空间 / URL / GitHub 地址可参考 registry.md 的 Address Schemes 表。shadcn:get_item_examples_from_registries查找带源码的使用示例与 demo。省略registries时搜索全部已配置 registry。输入参数参数类型说明registriesstring[]可选省略则搜索全部已配置 registryquerystring必填如accordion-demo、button exampleshadcn:get_add_command_for_items返回对应条目的 CLI 安装命令即shadcn add的等价形式。输入参数参数类型说明itemsstring[]必填如[shadcn/button]shadcn:get_audit_checklist返回验证组件imports、依赖、lint、TypeScript的检查清单。输入无。对应 SKILL.md 中「Review added components」的硬性要求——从任何 registry 添加组件后都必须核对子组件是否齐备如SelectItem是否在SelectGroup内、导入是否正确、是否符合 Critical Rules。配置 Registry命名空间、私有源与 GitHub 源除内置的shadcnregistry 外可以通过components.json的registries字段配置命名空间或带认证的私有 registry{ registries: { acme: https://acme.com/r/{name}.json, private: { url: https://private.com/r/{name}.json, headers: { Authorization: Bearer ${MY_TOKEN} } } } }配置规则有三条名称必须以开头如acme、privateURL 中必须包含{name}占位符CLI 安装某条目时会用条目名替换该占位符${VAR}引用从环境变量解析避免把密钥写死在配置文件中。公共 GitHub registry 无需配置只要目标仓库根目录存在registry.json就可以直接用owner/repo形式作为 registry 源甚至可用owner/repo/item-name#ref固定到某个 ref。GitHub registry 是「源 registry」形态CLI 直接消费无需先执行shadcn build生成条目 JSON详见 registry.md 的 GitHub Registries 一节。当前仅支持公开的github.com仓库私有仓库与 GitHub Enterprise 需要额外的产品决策。此外社区 registry 索引位于https://ui.shadcn.com/r/registries.json可作为发现第三方 registry 的入口。在本仓库中的应用实践monorepo 中的组件安装react-starter-kit 的 UI 代码组织方式决定了 MCP 工具在这里的具体用法。packages/ui是一个独立的 shadcn 项目有自己的 components.json根目录 package.json 提供了ui:add/ui:list/ui:update/ui:essentials等 bun 封装脚本。其中 essentials.ts 内置了一份「必备组件清单」button、input、select、checkbox、switch、card、dialog、avatar、tooltip 等与本仓库 components 目录 中实际安装的组件高度吻合。因此在 MCP 场景下向 AI 助手提出「安装一个 select 组件」时助手会调用shadcn:get_add_command_for_items拿到add select命令再按项目 runner 转换为bunx --bun shadcnlatest add select或仓库的ui:add脚本执行新增组件后需要手动在 packages/ui/index.ts 补一行 re-export文件头注释明确说明「the CLI does not」这是本仓库特有的落地步骤安装第三方 registry 组件如magicui/shimmer-button后应使用shadcn:view_items_in_registries或--view预审源码再检查导入路径是否与本项目别名/前缀、repo/ui一致最后用shadcn:get_audit_checklist做最终核验。边界与提示MCP 不做什么文档末尾特别强调了一条边界MCP 工具处理 registry 操作search、view、install项目配置信息aliases、framework、Tailwind version没有 MCP 等价物请使用npx shadcnlatest info。对应地SKILL.md 中info --json的输出字段aliases、isRSC、tailwindVersion、base、iconLibrary、packageManager等是 AI 助手做配置决策的依据完整的字段含义可参考 cli.md 的 info 命令一节。理解这条边界有助于合理分工需要「找出项目里有哪些 registry、装什么组件」交给 MCP 工具需要「判断组件 API、别名前缀、Tailwind 版本」则直接读components.json或运行info。两者配合AI 助手才能在 react-starter-kit 这类 monorepo 中准确完成组件从检索、审计到安装的完整闭环。赞分享后端前端【免费下载链接】react-starter-kitModern React starter kit with Bun, TypeScript, Tailwind CSS, tRPC, Stripe, and Cloudflare Workers. Production-ready monorepo for building fast web apps.项目地址https://gitcode.com/gh_mirrors/rea/react-starter-kit点击查看免费下载相关推荐在 Zed 编辑器中配置 GitHub MCP Server远程端点与本地 Docker 完整指南在 Zed 编辑器中配置 GitHub MCP Server远程端点与本地 Docker 完整指南 本指南基于 GitHub 官方 MCP Server 仓库后端MCP 服务AI 应用在Cursor编辑器中配置mcp-feedback-enhanced扩展的完整指南在Cursor编辑器中配置mcp feedback enhanced扩展的完整指南 mcp feedback enhanced是一个为Cursor编辑器设计的增使用 Rube MCP 在 Codex 中自动化 Ipdata.co 操作从连接配置到工作流执行的完整指南使用 Rube MCP 在 Codex 中自动化 Ipdata.co 操作从连接配置到工作流执行的完整指南 composio skills/ipdata coAI 技能AI 插件工作流自动化人工智能上一篇Byzer-lang集群日志管理集中式日志收集与分析下一篇如何将LAVIS视觉语言模型与Hugging Face集成完整部署指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考