inference.sh

widget renderer

renders declarative ui from json. agents return widget data, the renderer turns it into interactive components.

how it works

widgets are json objects describing ui structure. the renderer recursively builds react components from nodes like box, row, text, button, etc.

json
1{2  "type": "ui",3  "children": [4    {5      "type": "box",6      "background": "gradient-purple",7      "padding": 4,8      "radius": "lg",9      "children": [10        { "type": "title", "value": "Hello World", "size": "xl" },11        { "type": "caption", "value": "This is a widget" },12        {13          "type": "button",14          "label": "Click me",15          "onClickAction": { "type": "greet" }16        }17      ]18    }19  ]20}

click "show data" on any example below to see its json structure.

real-world examples

production-ready widget patterns inspired by popular apps.

flight tracker

real-time flight status card with minHeight

DEPARTURE

SFO

San Francisco
✈️

5h 45m

on time

ARRIVAL

JFK

New York

weather forecast

current conditions with minHeight

San Francisco

Partly Cloudy

68°

⛅

H: 72° L: 58°

task checklist

interactive to-do list with onCheckedChangeAction

Today's Tasks

email composer

draft email with form fields

New Email

FROM

[email protected]

TO

SUBJECT

calendar event

event creation with date and time

FRIDAY

28

Lunch

12:00 - 12:45 PM

Q1 Roadmap Review

1:00 - 2:00 PM

Team Standup

3:30 - 4:00 PM

shopping cart

order summary with items and totals

Your Order
Item
Brown Sugar Latte

Large • Oat Milk • Less Ice

$6.50
Item
Taro Milk Tea

Medium • Regular Sugar

$5.75

Subtotal

$12.25

Tax

$1.07
Total

$13.32

text & content

primitives for displaying text, titles, captions, and badges.

text variants

Default text - standard body copyBold text variantMuted text for secondary info

title sizes

Small (sm)

Medium (md)

Large (lg)

Extra Large (xl)

badges

defaultsecondaryoutlinedestructive

layout

row, column, and box for composing complex layouts.

row - horizontal layout

ABC

box - container with background

Surface
Gradient

form elements

interactive inputs, selects, and checkboxes.

input

select

checkbox

backgrounds

gradient presets and semantic surfaces.

gradient presets

blue
purple
warm
cool
sunset
midnight

actions

interactive elements with onClickAction, onChangeAction, and loading states.

button variants

buttons with onClickAction

loading behavior

buttons show loading state during action execution

loadingBehavior: "self" shows spinner on the clicked button

action with payload

actions can include data payloads

confirmation dialog

inline buttons instead of card footer actions

Delete Project?
This action cannot be undone. All data will be permanently deleted.

form with actions

card as form with inputs and submit button

Quick Feedback

installation

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

usage

tsx
1import { WidgetRenderer } from '@/components/widgets/widget-renderer'2import type { Widget, WidgetAction } from '@/registry/blocks/agent/types'34export function MyWidget() {5  const widget: Widget = {6    type: 'ui',7    title: 'Hello',8    children: [9      { type: 'text', value: 'Welcome to widgets!' },10      {11        type: 'button',12        label: 'Click me',13        onClickAction: { type: 'greet' }14      },15    ],16  }1718  const handleAction = (action: WidgetAction) => {19    console.log('Action triggered:', action)20  }2122  return <WidgetRenderer widget={widget} onAction={handleAction} />23}