UI Thing MCP Server教程如何让AI代理自动发现组件并生成Nuxt页面【免费下载链接】ui-thingA modern set of Nuxt components built with Reka UI TailwindCSS. Inspired by shadcn/ui shadcn-vue.项目地址: https://gitcode.com/gh_mirrors/ui/ui-thingUI Thing 是一个基于 Reka UI Tailwind CSS 构建的现代 Nuxt 组件库它的MCP Server能让 AI 代理Cursor、VS Code、Claude 等自动发现组件、获取完整源码并直接生成 Nuxt 页面。本教程带你用 3 步完成接入上手体验一句话生成页面的完整流程。为什么AI代理需要一个MCP Server如果你用 AI 编辑器写过代码应该遇到过这样的尴尬让 AI 给我做个登录卡片它凭记忆硬写一堆不符合组件库规范的代码类名不对、依赖缺失、无障碍行为也丢了。UI Thing 是一个copy-paste复制粘贴式的组件库——组件源码本身就是产品。而 MCPModel Context Protocol 相当于给 AI 装了一双眼睛AI 不再靠记忆猜组件名而是实时查询组件库索引AI 能拿到完整源码和文档而不是半吊子示例AI 能自动算出依赖安装计划不再漏装包MCP Server 提供的4类核心能力打开 server/mcp/tools/ 目录可以看到 18 个 MCP 工具按用途分为四类能力代表工具作用 组件发现list-components、search-components、resolve-library-item模糊查询、自动匹配最接近的组件 完整详情get-component、get-block、get-documentation-page获取完整源码和 Markdown 文档 安装计划get-install-plan、get-project-setup、validate-dependencies生成混合选择的依赖安装方案️ 页面规划plan-page、plan-form为新 Nuxt 项目推荐区块、组件和搭建顺序除了工具MCP Server 还内置了setup-project、build-page、create-form等提示词模板让 AI 直接套用成熟的搭建工作流。三步接入把MCP Server连上你的AI编辑器第一步获取 MCP 端点有两种方式托管端点推荐https://uithing.com/mcp开箱即用本地端点克隆仓库git clone https://gitcode.com/gh_mirrors/ui/ui-thing运行项目后访问http://localhost:3000/mcpMCP 配置定义在 nuxt.config.ts 中第二步添加到你的 AI 客户端以 Cursor 为例在~/.cursor/mcp.json中加入{ mcpServers: { ui-thing: { type: http, url: https://uithing.com/mcp } } }VS Code.vscode/mcp.json、Windsurf 的配置格式基本相同Claude Desktop 则通过npx mcp-remote https://uithing.com/mcp启动。第三步验证连接对 AI 说一句列出 UI Thing 所有按钮相关的组件。如果 AI 返回了带分类、依赖数的组件清单来自list-components工具说明接入成功 ✅实战让AI自动发现组件并生成Nuxt落地页官方推荐的工作流只需 5 步你可以直接用自然语言触发get-project-setup— 获取新项目初始化方案plan-page— 指定页面类型如landing推荐区块和组件顺序resolve-library-item— 名称模糊时如日期选择器自动匹配最接近的组件get-install-plan— 生成完整依赖安装计划get-component/get-block— 拉取精确源码开始实现试试这些提示词感受AI 自动发现组件的效果Plan a landing page using UI Thing blocks Build an install plan for button, dialog, and Hero 1 Resolve the best UI Thing match for a date picker Fetch the full Button component source and docs用好MCP Server的3个技巧 模糊名称先走resolve-library-item先解析出精确名称再调用get-*详情工具避免拿错组件 多选组件必查依赖一次要用多个组件时用get-install-plan拿统一安装计划不会漏装依赖 别让 AI 凭记忆干活MCP 能给出精确答案时坚持让 AI 调用工具查询——这是它比裸 AI更可靠的根本原因相关文件路径MCP 工具源码server/mcp/tools/MCP 核心逻辑server/mcp/utils/library.ts官方 MCP 文档content/1.getting-started/6.mcp.mdAI 技能规范skills/uithing/【免费下载链接】ui-thingA modern set of Nuxt components built with Reka UI TailwindCSS. Inspired by shadcn/ui shadcn-vue.项目地址: https://gitcode.com/gh_mirrors/ui/ui-thing创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 UI Thing MCP Server教程如何让AI代理自动发现组件并生成Nuxt页面【免费下载链接】ui-thingA modern set of Nuxt components built with Reka UI TailwindCSS. Inspired by shadcn/ui shadcn-vue.项目地址: https://gitcode.com/gh_mirrors/ui/ui-thingUI Thing 是一个基于 Reka UI Tailwind CSS 构建的现代 Nuxt 组件库它的MCP Server能让 AI 代理Cursor、VS Code、Claude 等自动发现组件、获取完整源码并直接生成 Nuxt 页面。本教程带你用 3 步完成接入上手体验一句话生成页面的完整流程。为什么AI代理需要一个MCP Server如果你用 AI 编辑器写过代码应该遇到过这样的尴尬让 AI 给我做个登录卡片它凭记忆硬写一堆不符合组件库规范的代码类名不对、依赖缺失、无障碍行为也丢了。UI Thing 是一个copy-paste复制粘贴式的组件库——组件源码本身就是产品。而 MCPModel Context Protocol 相当于给 AI 装了一双眼睛AI 不再靠记忆猜组件名而是实时查询组件库索引AI 能拿到完整源码和文档而不是半吊子示例AI 能自动算出依赖安装计划不再漏装包MCP Server 提供的4类核心能力打开 server/mcp/tools/ 目录可以看到 18 个 MCP 工具按用途分为四类能力代表工具作用 组件发现list-components、search-components、resolve-library-item模糊查询、自动匹配最接近的组件 完整详情get-component、get-block、get-documentation-page获取完整源码和 Markdown 文档 安装计划get-install-plan、get-project-setup、validate-dependencies生成混合选择的依赖安装方案️ 页面规划plan-page、plan-form为新 Nuxt 项目推荐区块、组件和搭建顺序除了工具MCP Server 还内置了setup-project、build-page、create-form等提示词模板让 AI 直接套用成熟的搭建工作流。三步接入把MCP Server连上你的AI编辑器第一步获取 MCP 端点有两种方式托管端点推荐https://uithing.com/mcp开箱即用本地端点克隆仓库git clone https://gitcode.com/gh_mirrors/ui/ui-thing运行项目后访问http://localhost:3000/mcpMCP 配置定义在 nuxt.config.ts 中第二步添加到你的 AI 客户端以 Cursor 为例在~/.cursor/mcp.json中加入{ mcpServers: { ui-thing: { type: http, url: https://uithing.com/mcp } } }VS Code.vscode/mcp.json、Windsurf 的配置格式基本相同Claude Desktop 则通过npx mcp-remote https://uithing.com/mcp启动。第三步验证连接对 AI 说一句列出 UI Thing 所有按钮相关的组件。如果 AI 返回了带分类、依赖数的组件清单来自list-components工具说明接入成功 ✅实战让AI自动发现组件并生成Nuxt落地页官方推荐的工作流只需 5 步你可以直接用自然语言触发get-project-setup— 获取新项目初始化方案plan-page— 指定页面类型如landing推荐区块和组件顺序resolve-library-item— 名称模糊时如日期选择器自动匹配最接近的组件get-install-plan— 生成完整依赖安装计划get-component/get-block— 拉取精确源码开始实现试试这些提示词感受AI 自动发现组件的效果Plan a landing page using UI Thing blocks Build an install plan for button, dialog, and Hero 1 Resolve the best UI Thing match for a date picker Fetch the full Button component source and docs用好MCP Server的3个技巧 模糊名称先走resolve-library-item先解析出精确名称再调用get-*详情工具避免拿错组件 多选组件必查依赖一次要用多个组件时用get-install-plan拿统一安装计划不会漏装依赖 别让 AI 凭记忆干活MCP 能给出精确答案时坚持让 AI 调用工具查询——这是它比裸 AI更可靠的根本原因相关文件路径MCP 工具源码server/mcp/tools/MCP 核心逻辑server/mcp/utils/library.ts官方 MCP 文档content/1.getting-started/6.mcp.mdAI 技能规范skills/uithing/【免费下载链接】ui-thingA modern set of Nuxt components built with Reka UI TailwindCSS. Inspired by shadcn/ui shadcn-vue.项目地址: https://gitcode.com/gh_mirrors/ui/ui-thing创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
