开发者 API 指南用 SmoothUI REST API 构建组件自动化工作流【免费下载链接】smoothuiSmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, Shadcn/ui and Motion项目地址: https://gitcode.com/gh_mirrors/sm/smoothuiSmoothUI REST API 是开源组件库 SmoothUI 面向开发者开放的公开接口无需注册、无需鉴权就能查询组件列表、关键词搜索、自然语言推荐、获取源码甚至直接拿到安装命令。本文以「组件自动化工作流」为主线从零带你上手这套接口把手动翻文档、复制粘贴代码变成脚本一键搞定适合所有想提升组件引入效率的前端开发者。SmoothUI 是什么为什么需要它的 APISmoothUI 是一个基于 React、Tailwind CSS、Shadcn/ui 与 Motion 构建的开源 UI 组件库提供大量带平滑动画的组件如 animated-tabs、magnetic-button、rich-popover和可直接拼装的页面区块 Blocks。随着组件数量增长传统打开文档→人工筛选→复制代码的方式效率越来越低。SmoothUI REST API 恰好解决了这个痛点程序化发现用一条 URL 就能拿到全部组件的元数据精确筛选按分类、复杂度、动画类型、标签过滤AI 友好专为 AI Agent 设计的自然语言推荐接口⚡无缝安装每个组件自带 shadcn 安装命令SmoothUI REST API 快速上手无需鉴权、支持 CORSSmoothUI REST API 的核心设计原则是开箱即用无需认证所有接口直接 GET 即可访问全面 CORS响应头包含Access-Control-Allow-Origin: *浏览器与 Node 环境都能调用返回 JSON结构化数据便于程序解析先来一个最直观的体验——用 curl 请求组件列表curl https://smoothui.dev/api/v1/components?pageSize3返回结果中每个组件都包含名称、分类、标签、复杂度、安装命令等完整元数据例如{ name: animated-tabs, displayName: AnimatedTabs, category: navigation, tags: [animation, tabs, navigation], complexity: moderate, animationType: spring, installCommand: npx shadcnlatest add smoothui/animated-tabs }核心接口速查表方法路径功能说明GET/api/v1/components分页列出全部组件支持多条件筛选GET/api/v1/components/{name}获取单个组件详情可附带源码GET/api/v1/components/search关键词相关性搜索返回评分排序GET/api/v1/blocks分页列出全部页面区块GET/api/v1/blocks/{name}获取单个区块详情可附带源码GET/api/v1/suggest自然语言描述需求推荐 Top 10 组件一键列出全部组件列表与筛选参数/api/v1/components是组件自动化的入口支持 5 个实用的筛选参数参数可选值示例说明categorybutton、navigation、feedback、ai按 UI 分类过滤complexitysimple、moderate、complex按实现复杂度过滤animationTypespring、tween、scroll、gesture按动画技术过滤taganimation、modal按标签精确匹配page/pageSize1/50最大 100分页控制例如想找出所有弹簧动画 导航类组件curl https://smoothui.dev/api/v1/components?categorynavigationanimationTypespringtaganimationpageSize20响应结构包含data组件数组、total总数、page、pageSize、totalPages方便你编写翻页循环实现批量处理。精准搜索与自然语言推荐为 AI 而生的两个接口关键词搜索/api/v1/components/search支持q关键词、category预过滤、tags逗号分隔、全部匹配。结果按relevanceScore从高到低排序名称精确匹配得分最高非常适合模糊回忆组件名的场景curl https://smoothui.dev/api/v1/components/search?qmodaldialog自然语言推荐/api/v1/suggest这是最智能的接口只需要用一句人话描述需求它会同时扫描组件和区块返回相关性最高的 10 条建议curl https://smoothui.dev/api/v1/suggest?needanimated tab navigation它的实现很有意思——suggest/route.ts 采用纯关键词评分算法分别对名称、标签、用例、描述、分类打分后排序不依赖任何 LLM响应速度极快。AI Agent 完全可以先调用它做选型再自动安装。获取组件源码实现自动化安装每个组件详情接口都支持includesource参数直接把源码一起返回curl https://smoothui.dev/api/v1/components/animated-tabs?includesource更妙的是元数据里的installCommand字段已经写好了官方安装命令例如npx shadcnlatest add smoothui/animated-tabs这意味着你的工作流可以做到零人工干预查询 → 筛选 → 拿到安装命令 → 自动执行。如果你用的是 shadcn 生态还可以直接请求/r/{组件名}.json获取 registry 格式的组件定义无缝接入现有 CLI 工具链。实战用 SmoothUI REST API 搭建组件自动化工作流结合上面的接口我们设计一个真实场景批量安装所有导航类 spring 动画组件。工作流分为三步调用列表接口拿到匹配组件从响应中提取每个组件的installCommand逐条执行安装# 1. 拉取符合条件的组件列表 curl https://smoothui.dev/api/v1/components?categorynavigationanimationTypespring \ components.json # 2. 用 jq 提取安装命令并批量执行 cat components.json | jq -r .data[].installCommand | while read cmd; do eval $cmd done同样的思路可以扩展出更多工作流CI 自动同步每次发布前用 API 检查组件是否有更新自动拉取新版本AI 代码生成Agent 先用/suggest选型再用/components/{name}?includesource拿源码拼进页面文档巡检定期抓取组件元数据对比本地使用情况发现过时组件响应字段与错误处理每个组件/区块都携带丰富的元数据理解这些字段能帮你写出更健壮的工作流字段含义name/displayNamekebab-case 标识符 / PascalCase 展示名category/tags分类与标签用于筛选useCases自然语言描述的使用场景compositionHints与其他组件组合的提示dependencies/registryDependenciesnpm 依赖与 SmoothUI 内部依赖hasReducedMotion是否支持减弱动效propsCount公共 props 数量接口出错时会返回统一格式{ error: 描述信息, status: 404 }。例如请求不存在的组件会返回 404缺少必填参数会返回 400。建议你的工作流对这两种错误都做兜底处理。进阶阅读源码与本地调试如果你想深入理解接口实现克隆仓库后可以直接阅读源码git clone https://gitcode.com/gh_mirrors/sm/smoothui接口实现集中在apps/docs/app/api/v1/目录组件列表与筛选components/route.ts组件详情与源码components/[name]/route.ts关键词搜索components/search/route.ts自然语言推荐suggest/route.ts通用 CORS 与响应封装_shared.ts完整 OpenAPI 规范openapi.json特别推荐先看openapi.json它完整定义了所有端点、参数、响应模型与枚举值是理解这套 API 最快的入口。组件元数据的类型定义则在 packages/data/component-meta.ts 中。结语SmoothUI REST API 把组件发现、选型、安装的完整链路全部开放了出来无需鉴权、支持 CORS、自带安装命令还专门设计了面向 AI Agent 的自然语言推荐接口。无论是写一个批量安装脚本、在 CI 中自动同步组件还是让 AI 帮你生成页面这套 API 都能让流程自动化、标准化。现在就打开终端用第一条 curl 命令开启你的组件自动化之旅吧【免费下载链接】smoothuiSmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, Shadcn/ui and Motion项目地址: https://gitcode.com/gh_mirrors/sm/smoothui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 开发者 API 指南：用 SmoothUI REST API 构建组件自动化工作流
开发者 API 指南用 SmoothUI REST API 构建组件自动化工作流【免费下载链接】smoothuiSmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, Shadcn/ui and Motion项目地址: https://gitcode.com/gh_mirrors/sm/smoothuiSmoothUI REST API 是开源组件库 SmoothUI 面向开发者开放的公开接口无需注册、无需鉴权就能查询组件列表、关键词搜索、自然语言推荐、获取源码甚至直接拿到安装命令。本文以「组件自动化工作流」为主线从零带你上手这套接口把手动翻文档、复制粘贴代码变成脚本一键搞定适合所有想提升组件引入效率的前端开发者。SmoothUI 是什么为什么需要它的 APISmoothUI 是一个基于 React、Tailwind CSS、Shadcn/ui 与 Motion 构建的开源 UI 组件库提供大量带平滑动画的组件如 animated-tabs、magnetic-button、rich-popover和可直接拼装的页面区块 Blocks。随着组件数量增长传统打开文档→人工筛选→复制代码的方式效率越来越低。SmoothUI REST API 恰好解决了这个痛点程序化发现用一条 URL 就能拿到全部组件的元数据精确筛选按分类、复杂度、动画类型、标签过滤AI 友好专为 AI Agent 设计的自然语言推荐接口⚡无缝安装每个组件自带 shadcn 安装命令SmoothUI REST API 快速上手无需鉴权、支持 CORSSmoothUI REST API 的核心设计原则是开箱即用无需认证所有接口直接 GET 即可访问全面 CORS响应头包含Access-Control-Allow-Origin: *浏览器与 Node 环境都能调用返回 JSON结构化数据便于程序解析先来一个最直观的体验——用 curl 请求组件列表curl https://smoothui.dev/api/v1/components?pageSize3返回结果中每个组件都包含名称、分类、标签、复杂度、安装命令等完整元数据例如{ name: animated-tabs, displayName: AnimatedTabs, category: navigation, tags: [animation, tabs, navigation], complexity: moderate, animationType: spring, installCommand: npx shadcnlatest add smoothui/animated-tabs }核心接口速查表方法路径功能说明GET/api/v1/components分页列出全部组件支持多条件筛选GET/api/v1/components/{name}获取单个组件详情可附带源码GET/api/v1/components/search关键词相关性搜索返回评分排序GET/api/v1/blocks分页列出全部页面区块GET/api/v1/blocks/{name}获取单个区块详情可附带源码GET/api/v1/suggest自然语言描述需求推荐 Top 10 组件一键列出全部组件列表与筛选参数/api/v1/components是组件自动化的入口支持 5 个实用的筛选参数参数可选值示例说明categorybutton、navigation、feedback、ai按 UI 分类过滤complexitysimple、moderate、complex按实现复杂度过滤animationTypespring、tween、scroll、gesture按动画技术过滤taganimation、modal按标签精确匹配page/pageSize1/50最大 100分页控制例如想找出所有弹簧动画 导航类组件curl https://smoothui.dev/api/v1/components?categorynavigationanimationTypespringtaganimationpageSize20响应结构包含data组件数组、total总数、page、pageSize、totalPages方便你编写翻页循环实现批量处理。精准搜索与自然语言推荐为 AI 而生的两个接口关键词搜索/api/v1/components/search支持q关键词、category预过滤、tags逗号分隔、全部匹配。结果按relevanceScore从高到低排序名称精确匹配得分最高非常适合模糊回忆组件名的场景curl https://smoothui.dev/api/v1/components/search?qmodaldialog自然语言推荐/api/v1/suggest这是最智能的接口只需要用一句人话描述需求它会同时扫描组件和区块返回相关性最高的 10 条建议curl https://smoothui.dev/api/v1/suggest?needanimated tab navigation它的实现很有意思——suggest/route.ts 采用纯关键词评分算法分别对名称、标签、用例、描述、分类打分后排序不依赖任何 LLM响应速度极快。AI Agent 完全可以先调用它做选型再自动安装。获取组件源码实现自动化安装每个组件详情接口都支持includesource参数直接把源码一起返回curl https://smoothui.dev/api/v1/components/animated-tabs?includesource更妙的是元数据里的installCommand字段已经写好了官方安装命令例如npx shadcnlatest add smoothui/animated-tabs这意味着你的工作流可以做到零人工干预查询 → 筛选 → 拿到安装命令 → 自动执行。如果你用的是 shadcn 生态还可以直接请求/r/{组件名}.json获取 registry 格式的组件定义无缝接入现有 CLI 工具链。实战用 SmoothUI REST API 搭建组件自动化工作流结合上面的接口我们设计一个真实场景批量安装所有导航类 spring 动画组件。工作流分为三步调用列表接口拿到匹配组件从响应中提取每个组件的installCommand逐条执行安装# 1. 拉取符合条件的组件列表 curl https://smoothui.dev/api/v1/components?categorynavigationanimationTypespring \ components.json # 2. 用 jq 提取安装命令并批量执行 cat components.json | jq -r .data[].installCommand | while read cmd; do eval $cmd done同样的思路可以扩展出更多工作流CI 自动同步每次发布前用 API 检查组件是否有更新自动拉取新版本AI 代码生成Agent 先用/suggest选型再用/components/{name}?includesource拿源码拼进页面文档巡检定期抓取组件元数据对比本地使用情况发现过时组件响应字段与错误处理每个组件/区块都携带丰富的元数据理解这些字段能帮你写出更健壮的工作流字段含义name/displayNamekebab-case 标识符 / PascalCase 展示名category/tags分类与标签用于筛选useCases自然语言描述的使用场景compositionHints与其他组件组合的提示dependencies/registryDependenciesnpm 依赖与 SmoothUI 内部依赖hasReducedMotion是否支持减弱动效propsCount公共 props 数量接口出错时会返回统一格式{ error: 描述信息, status: 404 }。例如请求不存在的组件会返回 404缺少必填参数会返回 400。建议你的工作流对这两种错误都做兜底处理。进阶阅读源码与本地调试如果你想深入理解接口实现克隆仓库后可以直接阅读源码git clone https://gitcode.com/gh_mirrors/sm/smoothui接口实现集中在apps/docs/app/api/v1/目录组件列表与筛选components/route.ts组件详情与源码components/[name]/route.ts关键词搜索components/search/route.ts自然语言推荐suggest/route.ts通用 CORS 与响应封装_shared.ts完整 OpenAPI 规范openapi.json特别推荐先看openapi.json它完整定义了所有端点、参数、响应模型与枚举值是理解这套 API 最快的入口。组件元数据的类型定义则在 packages/data/component-meta.ts 中。结语SmoothUI REST API 把组件发现、选型、安装的完整链路全部开放了出来无需鉴权、支持 CORS、自带安装命令还专门设计了面向 AI Agent 的自然语言推荐接口。无论是写一个批量安装脚本、在 CI 中自动同步组件还是让 AI 帮你生成页面这套 API 都能让流程自动化、标准化。现在就打开终端用第一条 curl 命令开启你的组件自动化之旅吧【免费下载链接】smoothuiSmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, Shadcn/ui and Motion项目地址: https://gitcode.com/gh_mirrors/sm/smoothui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考