Widget渲染器Skill widgets-ui

---

name: widgets-ui description: “从JSON为React/Next.js声明式UI小部件，来自ui.inference.sh。从结构化代理响应渲染丰富的交互式UI。功能：表单、按钮、卡片、布局、输入、选择、复选框。用途：代理生成的UI、动态表单、数据展示、交互式卡片。触发词：小部件、声明式ui、json ui、小部件渲染器、代理小部件、动态ui、表单小部件、卡片小部件、shadcn小部件、结构化输出ui”

Widget渲染器

通过ui.inference.sh从JSON声明式UI。

快速开始

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: '我的小部件',
  children: [
    { type: 'text', value: '你好世界' },
    { type: 'button', label: '点击我', onClickAction: { type: 'click' } },
  ],
}

<WidgetRenderer
  widget={widget}
  onAction={(action, formData) => console.log(action, formData)}
/>

小部件类型

布局

{ "type": "row", "gap": 2, "children": [...] }
{ "type": "col", "gap": 2, "children": [...] }
{ "type": "box", "background": "gradient-ocean", "padding": 4, "radius": "lg", "children": [...] }

排版

{ "type": "title", "value": "标题", "size": "2xl", "weight": "bold" }
{ "type": "text", "value": "正文文本", "variant": "bold" }
{ "type": "caption", "value": "小文本" }
{ "type": "label", "value": "字段标签", "fieldName": "email" }

交互式

{ "type": "button", "label": "提交", "variant": "default", "onClickAction": { "type": "submit" } }
{ "type": "input", "name": "email", "placeholder": "输入邮箱" }
{ "type": "textarea", "name": "message", "placeholder": "您的消息" }
{ "type": "select", "name": "plan", "options": [{ "value": "pro", "label": "Pro" }] }
{ "type": "checkbox", "name": "agree", "label": "我同意", "defaultChecked": false }

显示

{ "type": "badge", "label": "新", "variant": "secondary" }
{ "type": "icon", "iconName": "check", "size": "lg" }
{ "type": "image", "src": "https://...", "alt": "图片", "width": 100, "height": 100 }
{ "type": "divider" }

示例：航班卡片

const flightWidget: Widget = {
  type: 'ui',
  children: [
    {
      type: 'box', background: 'gradient-ocean', padding: 4, radius: 'lg', children: [
        {
          type: 'row', justify: 'between', children: [
            {
              type: 'col', gap: 1, children: [
                { type: 'caption', value: '出发' },
                { type: 'title', value: 'SFO', size: '2xl', weight: 'bold' },
              ]
            },
            { type: 'icon', iconName: 'plane', size: 'lg' },
            {
              type: 'col', gap: 1, align: 'end', children: [
                { type: 'caption', value: '到达' },
                { type: 'title', value: 'JFK', size: '2xl', weight: 'bold' },
              ]
            },
          ]
        },
      ]
    },
  ],
}

示例：表单

const formWidget: Widget = {
  type: 'ui',
  title: '联系表单',
  asForm: true,
  children: [
    {
      type: 'col', gap: 3, children: [
        { type: 'input', name: 'name', placeholder: '您的姓名' },
        { type: 'input', name: 'email', placeholder: '邮箱地址' },
        { type: 'textarea', name: 'message', placeholder: '消息' },
        { type: 'button', label: '发送', variant: 'default', onClickAction: { type: 'submit' } },
      ]
    },
  ],
}

渐变

名称	描述
gradient-ocean	蓝绿渐变
gradient-sunset	橙粉渐变
gradient-purple	紫色渐变
gradient-cool	冷蓝渐变
gradient-midnight	深蓝渐变

处理动作

const handleAction = (action: WidgetAction, formData?: WidgetFormData) => {
  switch (action.type) {
    case 'submit':
      console.log('表单数据:', formData)
      break
    case 'click':
      console.log('按钮被点击')
      break
  }
}

相关技能

# 完整代理组件
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

文档

• 小部件概述 - 理解小部件
• 小部件模式 - 小部件JSON结构
• 生成UI的代理 - 构建生成式UI

组件文档: ui.inference.sh/blocks/widgets