widgets-ui

用途

widgets-ui 是一个声明式 UI 组件技能，用于在 React/Next.js 应用中，根据 JSON 结构渲染丰富的交互式界面。它由 ui.inference.sh 提供，主要面向需要将结构化智能体响应转化为可视化 UI 的场景。

主要能力

该技能提供 WidgetRenderer 组件，以及 Widget、WidgetAction 等类型定义。开发者可以用 JSON 描述界面结构，由渲染器统一呈现。支持的组件类型包括：

• 布局：row（行）、col（列）、box（盒子，支持背景、内边距、圆角）
• 排版：title（标题）、text（正文）、caption（说明文字）、label（字段标签）
• 交互：button（按钮）、input（输入框）、textarea（多行文本）、select（下拉选择）、checkbox（复选框）
• 展示：badge（徽章）、icon（图标）、image（图片）、divider（分隔线）

内置渐变背景包括 gradient-ocean（蓝青渐变）、gradient-sunset（橙粉渐变）、gradient-purple（紫色渐变）、gradient-cool（冷蓝渐变）、gradient-midnight（深蓝渐变）。

使用方式

安装 belt CLI 技能：

npx skills add belt-sh/cli

通过 shadcn 添加组件：

npx shadcn@latest add https://ui.inference.sh/r/widgets.json

基本用法：

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)}
/>

处理动作：

const handleAction = (action: WidgetAction, formData?: WidgetFormData) => {
  switch (action.type) {
    case 'submit':
      console.log('Form data:', formData)
      break
    case 'click':
      console.log('Button clicked')
      break
  }
}

适用场景

适合在 React/Next.js 项目中，将智能体返回的结构化数据渲染为可交互界面，例如航班信息卡片、联系表单等。示例中的航班卡片使用 box、row、col、caption、title、icon 组合展示出发地与目的地；表单示例使用 asForm 与 input、textarea、button 组合收集用户输入。

相关技能

# 完整智能体组件
npx skills add inference-sh/skills@agent-ui

# 聊天 UI 区块
npx skills add inference-sh/skills@chat-ui

# 工具 UI
npx skills add inference-sh/skills@tools-ui

限制

资料未提供该技能的收费、价格、平台兼容范围、性能表现或效果保证等信息，暂未提供。