widgets-ui 是 ui.inference.sh 提供的声明式 UI 组件技能,用于在 React/Next.js 中由 JSON 渲染界面,把结构化数据(尤其是智能体的响应)转换为可交互的 UI。
用途 它主要解决“让程序或智能体直接生成界面”的问题:应用只需给出一段符合结构的 Widget JSON,即可渲染出排版、表单与展示组件,而不必为每种响应手写 React 组件。
主要能力
- 布局组件:row(行)、col(列)、box(盒子,支持 background、padding、radius 等属性)。
- 排版组件:title、text、caption、label。
- 交互组件:button、input、textarea、select、checkbox,支持 name、placeholder、options、defaultChecked 等字段,并通过 onClickAction 触发动作。
- 展示组件:badge、icon、image、divider。
- 渐变背景:gradient-ocean、gradient-sunset、gradient-purple、gradient-cool、gradient-midnight。
- 表单能力:Widget 可设置 asForm: true,配合 submit 动作收集表单数据。
- 动作处理:通过 onAction 回调接收动作与表单数据,区分 submit、click 等类型。
使用方式 该技能本身通过命令安装:npx skills add belt-sh/cli。组件通过以下命令添加到项目:npx shadcn@latest add https://ui.inference.sh/r/widgets.json。之后从 @/registry/blocks/widgets/widget-renderer 引入 WidgetRenderer,从 @/registry/blocks/widgets/types 引入 Widget、WidgetAction 类型,并用 <WidgetRenderer widget={widget} onAction={(action, formData) => ...} /> 渲染。官方还给出航班卡片和联系表单作为示例。
适用场景 适合需要在 React/Next.js 应用中根据结构化数据动态生成表单、信息卡片等交互界面的场景,特别是智能体响应需要直接变成 UI 时。
限制 收费、价格、平台与效果等具体信息暂未提供。