101-skills/superpowers

Installiere das belt CLI Skill: npx skills add belt-sh/cli

Widget Renderer

Deklarative UI aus JSON via ui.inference.sh.

Schnellstart

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

Grundlegende Verwendung

import { WidgetRenderer } from "@/registry/blocks/widgets/widget-renderer"
import type { Widget, WidgetAction } from "@/registry/blocks/widgets/types"

const widget: Widget = {
  type: 'ui',
  title: 'Mein Widget',
  children: [
    { type: 'text', value: 'Hallo Welt' },
    { type: 'button', label: 'Klick mich', onClickAction: { type: 'click' } },
  ],
}

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

Widget-Typen

Layout

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

Typografie

{ "type": "title", "value": "Überschrift", "size": "2xl", "weight": "bold" }
{ "type": "text", "value": "Fließtext", "variant": "bold" }
{ "type": "caption", "value": "Kleiner Text" }
{ "type": "label", "value": "Feldbezeichnung", "fieldName": "email" }

Interaktiv

{ "type": "button", "label": "Absenden", "variant": "default", "onClickAction": { "type": "submit" } }
{ "type": "input", "name": "email", "placeholder": "E-Mail eingeben" }
{ "type": "textarea", "name": "message", "placeholder": "Ihre Nachricht" }
{ "type": "select", "name": "plan", "options": [{ "value": "pro", "label": "Pro" }] }
{ "type": "checkbox", "name": "agree", "label": "Ich stimme zu", "defaultChecked": false }

Anzeige

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

Beispiel: Flugkarte

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: 'Abflug' },
                { type: 'title', value: 'SFO', size: '2xl', weight: 'bold' },
              ]
            },
            { type: 'icon', iconName: 'plane', size: 'lg' },
            {
              type: 'col', gap: 1, align: 'end', children: [
                { type: 'caption', value: 'Ankunft' },
                { type: 'title', value: 'JFK', size: '2xl', weight: 'bold' },
              ]
            },
          ]
        },
      ]
    },
  ],
}

Beispiel: Formular

const formWidget: Widget = {
  type: 'ui',
  title: 'Kontaktformular',
  asForm: true,
  children: [
    {
      type: 'col', gap: 3, children: [
        { type: 'input', name: 'name', placeholder: 'Ihr Name' },
        { type: 'input', name: 'email', placeholder: 'E-Mail-Adresse' },
        { type: 'textarea', name: 'message', placeholder: 'Nachricht' },
        { type: 'button', label: 'Senden', variant: 'default', onClickAction: { type: 'submit' } },
      ]
    },
  ],
}

Farbverläufe

Name	Beschreibung
gradient-ocean	Blau-türkiser Verlauf
gradient-sunset	Orange-pinker Verlauf
gradient-purple	Lila Verlauf
gradient-cool	Kühler blauer Verlauf
gradient-midnight	Dunkelblauer Verlauf

Aktionen behandeln

const handleAction = (action: WidgetAction, formData?: WidgetFormData) => {
  switch (action.type) {
    case 'submit':
      console.log('Formulardaten:', formData)
      break
    case 'click':
      console.log('Schaltfläche geklickt')
      break
  }
}

Verwandte Skills

# Vollständige Agenten-Komponente
npx skills add inference-sh/skills@agent-ui

# Chat-UI-Blöcke
npx skills add inference-sh/skills@chat-ui

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

Dokumentation

• Widgets-Übersicht - Widgets verstehen
• Widget-Schema - Widget-JSON-Struktur
• Agenten, die UI generieren - Generative UIs erstellen

Komponenten-Dokumentation: ui.inference.sh/blocks/widgets