用途
widgets-ui 是一个基于 JSON 的声明式 UI 渲染方案，面向 React/Next.js 项目，由 ui.inference.sh 提供。它的核心目标是把智能体返回的结构化响应渲染成丰富的交互式 UI，例如表单、卡片和各类可交互组件。开发者无需为每种响应手写 JSX，只需提供符合 schema 的 widget JSON 对象即可。
主要能力
该技能基于 WidgetRenderer 组件和配套的 Widget、WidgetAction 类型定义工作。支持的组件类型包括：
- 布局：
row、col、box（box 支持 background、padding、radius 等属性）。 - 排版：
title、text、caption、label。 - 交互：
button、input、textarea、select、checkbox，按钮可通过onClickAction触发 submit、click 等动作。 - 展示：
badge、icon、image、divider。
此外还提供多种渐变背景，包括 gradient-ocean、gradient-sunset、gradient-purple、gradient-cool、gradient-midnight。
使用方式
安装组件：
npx shadcn@latest add https://ui.inference.sh/r/widgets.json
安装配套 CLI 技能：
npx skills add belt-sh/cli
基础用法：从 @/registry/blocks/widgets/widget-renderer 引入 WidgetRenderer，从 @/registry/blocks/widgets/types 引入类型，构造 widget 对象后传入组件，并通过 onAction 回调处理交互。示例：
import { WidgetRenderer } from "@/registry/blocks/widgets/widget-renderer"
import type { Widget, WidgetAction } from "@/registry/blocks/widgets/types"
const widget: Widget = {
type: 'ui',
title: 'My Widget',
children: [
{ type: 'text', value: 'Hello World' },
{ type: 'button', label: 'Click me', onClickAction: { type: 'click' } },
],
}
<WidgetRenderer
widget={widget}
onAction={(action, formData) => console.log(action, formData)}
/>
表单场景可设置 asForm: true，并通过 onAction 中的 submit 类型获取表单数据。动作处理示例：
const handleAction = (action: WidgetAction, formData?: WidgetFormData) => {
switch (action.type) {
case 'submit':
console.log('Form data:', formData)
break
case 'click':
console.log('Button clicked')
break
}
}
相关技能还包括 agent-ui、chat-ui、tools-ui，可分别通过 npx skills add inference-sh/skills@agent-ui、@chat-ui、@tools-ui 安装。组件文档位于 ui.inference.sh/blocks/widgets。
适用场景
适合需要让智能体根据结构化响应动态生成交互界面的应用，例如生成联系人表单、航班信息卡片等；也可用于聊天或智能体场景中即时渲染 UI 组件。
限制
资料主要提供组件类型、安装命令与代码示例，未说明完整的属性列表、版本兼容范围、浏览器支持、收费与价格等信息，这些内容暂未提供。