Skip to main contentwidgets-ui
Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, buttons, cards, layouts, inputs, selects, checkboxes. Use for: agent-generated UIs, dynamic forms, data display, interactive cards. Triggers: widgets, declarative ui, json ui, widget renderer, agent widgets, dynamic ui, form widgets, card widgets, shadcn widgets, structured output ui
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/Sheshiyer/brandmint-oracle-aleph --skill widgets-uiيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
المزيد من هذا المستودع
End-to-end brand identity orchestration system. Generates text strategy, visual assets, campaign copy, video deliverables, and publishing outputs using 44 specialized skills across 9 categories. Chains FAL.AI/Nano Banana/Flux visual generation with brand positioning, buyer personas, and campaign workflows via wave-based execution. Includes Remotion-based programmatic video generation.
Transform markdown documentation folders into professional Astro-based wikis using refero-design principles (research-first, anti-AI-slop: no default emojis, no 3-column layouts, sections + dividers + media blocks over cards, neutral color system). Use when the user has a folder of .md files and wants to generate a polished wiki/documentation site with dark/light mode support, readable typography, and professional aesthetics. Triggers on requests involving markdown-to-wiki conversion, documentation site generation, Astro wiki creation, or brand wiki themes.
Defines brand voice persona and tone calibration using persona and positioning data to produce a reusable meta-prompt for copywriting.
المهن ذات الصلةSOC
استنادا إلى تصنيف SOC المهني
| name | widgets-ui |
| description | Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, buttons, cards, layouts, inputs, selects, checkboxes. Use for: agent-generated UIs, dynamic forms, data display, interactive cards. Triggers: widgets, declarative ui, json ui, widget renderer, agent widgets, dynamic ui, form widgets, card widgets, shadcn widgets, structured output ui |
Widget Renderer
Declarative UI from JSON via ui.inference.sh.
Quick Start
npx shadcn@latest add https://ui.inference.sh/r/widgets.json
Basic Usage
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' },
{ : , : , : { : } },
],
}
<
widget={widget}
onAction={ .(action, formData)}
/>
type
'button'
label
'Click me'
onClickAction
type
'click'
WidgetRenderer
(action, formData) =>
console
log
Widget Types
Layout
{ "type": "row", "gap": 2, "children": [...] }
{ "type": "col", "gap": 2, "children": [...] }
{ "type": "box", "background": "gradient-ocean", "padding": 4, "radius": "lg", "children": [...] }
Typography
{ "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" }
Interactive
{ "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 }
Display
{ "type": "badge", "label": "New", "variant": "secondary" }
{ "type": "icon", "iconName": "check", "size": "lg" }
{ "type": "image", "src": "https://...", "alt": "Image", "width": 100, "height": 100 }
{ "type": "divider" }
Example: Flight Card
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' },
]
},
]
},
]
},
],
}
Example: Form
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' } },
]
},
],
}
Gradients
| Name | Description |
|---|
gradient-ocean | Blue teal gradient |
gradient-sunset | Orange pink gradient |
gradient-purple | Purple gradient |
gradient-cool | Cool blue gradient |
gradient-midnight | Dark blue gradient |
Handling Actions
const handleAction = (action: WidgetAction, formData?: WidgetFormData) => {
switch (action.type) {
case 'submit':
console.log('Form data:', formData)
break
case 'click':
console.log('Button clicked')
break
}
}
Related Skills
npx skills add inference-sh/skills@agent-ui
npx skills add inference-sh/skills@chat-ui
npx skills add inference-sh/skills@tools-ui
Documentation
