mcpField
W
widgets-ui

widgets-ui

github.com/inference-sh设计与 UI7891.0k 次安装2 周前更新
代码仓库

关于 widgets-ui

将声明式 JSON 转换为 UI 组件的 React 渲染器，面向构建结构化界面的开发者，支持布局、表单和展示元素。

主要功能

  1. 01通过 JSON 定义 UI 组件
  2. 02行、列和盒式布局
  3. 03文本与展示组件
  4. 04交互式表单和按钮
  5. 05处理动作与表单数据

适用场景

  1. 01根据 widget JSON 渲染界面
  2. 02构建交互式表单
  3. 03展示结构化内容
  4. 04处理组件按钮动作

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/inference-sh/skills --skill widgets-ui

安装后在 Claude Code 中输入/widgets-ui确认已加载。

详细介绍

安装 belt CLI skill： npx skills add belt-sh/cli

Widget 渲染器

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

Widget 渲染器

快速入门

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

Widget 类型

布局
{ "type": "row", "gap": 2, "children": [...] }
{ "type": "col", "gap": 2, "children": [...] }
{ "type": "box", "background": "gradient-ocean", "padding": 4, "radius": "lg", "children": [...] }
排版
{ "type": "title", "value": "Heading", "size": "2xl", "weight": "bold" }
{ "type": "text", "value": "Body text", "variant": "bold" }
{ "type": "caption", "value": "Small text" }
{ "type": "label", "value": "Field label", "fieldName": "email" }
交互
{ "type": "button", "label": "Submit", "variant": "default", "onClickAction": { "type": "submit" } }
{ "type": "input", "name": "email", "placeholder": "Enter email" }
{ "type": "textarea", "name": "message", "placeholder": "Your message" }
{ "type": "select", "name": "plan", "options": [{ "value": "pro", "label": "Pro" }] }
{ "type": "checkbox", "name": "agree", "label": "I agree", "defaultChecked": false }
显示
{ "type": "badge", "label": "New", "variant": "secondary" }
{ "type": "icon", "iconName": "check", "size": "lg" }
{ "type": "image", "src": "https://...", "alt": "Image", "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: 'departure' },
                { type: 'title', value: 'SFO', size: '2xl', weight: 'bold' },
              ]
            },
            { type: 'icon', iconName: 'plane', size: 'lg' },
            {
              type: 'col', gap: 1, align: 'end', children: [
                { type: 'caption', value: 'arrival' },
                { type: 'title', value: 'JFK', size: '2xl', weight: 'bold' },
              ]
            },
          ]
        },
      ]
    },
  ],
}

示例：表单

const formWidget: Widget = {
  type: 'ui',
  title: 'Contact Form',
  asForm: true,
  children: [
    {
      type: 'col', gap: 3, children: [
        { type: 'input', name: 'name', placeholder: 'Your name' },
        { type: 'input', name: 'email', placeholder: 'Email address' },
        { type: 'textarea', name: 'message', placeholder: 'Message' },
        { type: 'button', label: 'Send', 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('Form data:', formData)
      break
    case 'click':
      console.log('Button clicked')
      break
  }
}

相关技能

# Full agent component
npx skills add inference-sh/skills@agent-ui

# Chat UI blocks
npx skills add inference-sh/skills@chat-ui

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

文档

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

评论

支持 Markdown