mcpField
W
widgets-ui

widgets-ui

github.com/inference-shデザイン・UI7891.0k 回インストール2 週間前に更新
リポジトリ

widgets-ui について

宣言的な JSON を UI コンポーネントに変換する React レンダラーです。レイアウト、フォーム、表示要素などを含む構造化 UI を作る開発者向けです。

主な機能

  1. 01JSON による UI ウィジェット定義
  2. 02行・列・ボックスのレイアウト
  3. 03テキストと表示コンポーネント
  4. 04フォームとボタンの操作
  5. 05アクションとフォームデータの処理

活用シーン

  1. 01ウィジェット JSON から UI を描画
  2. 02インタラクティブなフォームの構築
  3. 03構造化コンテンツの表示
  4. 04ウィジェットのボタン操作処理

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/widgets-uiを入力して読み込まれたか確認します。

詳細

belt CLI スキルをインストールする： npx skills add belt-sh/cli

ウィジェットレンダラー

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

ウィジェットの種類

レイアウト
{ "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 対応