skills.rest
Aadi-110i
Aadi-110iCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

widgets-ui

Renders declarative JSON widget definitions as interactive React and Next.js UI components.

Updated Jul 28, 2026
Search Tags:#react#next.js#shadcn#widgets#declarative ui#generative ui#json renderer
One-click install
npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill widgets-ui-aadi-110i
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: widgets-ui
Source: https://github.com/Aadi-110i/PEP-PROJECT/tree/main/skills/widgets-ui
Command: npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill widgets-ui-aadi-110i

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Agents and LLM backends often need to return rich, interactive interfaces rather than plain text, but hand-coding React components for every response is impractical. This Skill lets you render structured JSON widget definitions into forms, cards, layouts, and inputs inside React or Next.js applications. ## Core Features & Use Cases - Declarative JSON-to-UI Rendering: Convert widget JSON (rows, columns, boxes, text, buttons, inputs, selects, checkboxes, badges, icons, images) into rendered components via a single WidgetRenderer. - Form Handling & Actions: Capture submit and click actions with collected form data through a unified onAction callback. - Themed Layouts: Apply gradient backgrounds, spacing, radius, and typography variants for polished cards such as flight summaries or contact forms. - Use Case: An AI agent returns a JSON widget describing a booking confirmation card with an input and submit button; the frontend renders it directly and sends the user's form data back to the agent. ## Quick Start Install the widget renderer with npx shadcn@latest add https://ui.inference.sh/r/widgets.json, then render a JSON widget with the WidgetRenderer component and handle actions via onAction.

Frequently Asked Questions about widgets-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render JSON as UI components in React?▼

Define a widget object with a type and children describing layout, text, and inputs, then pass it to the WidgetRenderer component. The renderer maps each JSON node to the corresponding React component and returns events through the onAction callback.

How do I install the widgets component from ui.inference.sh?▼

Run npx shadcn@latest add https://ui.inference.sh/r/widgets.json in your project. This adds the widget renderer block to your shadcn registry so you can import WidgetRenderer and the Widget types.

Does the widget renderer work with Next.js and shadcn?▼

Yes, the widgets are distributed through the shadcn registry and are designed for React and Next.js applications. Installation uses the standard shadcn CLI add command.

How do I handle form submissions from a JSON widget?▼

Set asForm to true on the widget and give the submit button an onClickAction of type submit. The onAction handler receives the action plus a formData object containing values from inputs, textareas, selects, and checkboxes.

What widget types are supported in the JSON schema?▼

The schema supports layout nodes (row, col, box), typography (title, text, caption, label), interactive elements (button, input, textarea, select, checkbox), and display elements (badge, icon, image, divider), with gradient backgrounds and spacing options.

Related Skills

Explore More Software Engineering Skills→
shobhit-16shobhit-16

interactive-widgets

Stream interactive Flutter widgets within AI conversation streams via Nexus.

Community
Advanced
AvanadeAvanade
28

coreex-api

Scaffolds CoreEx MVC controllers and Minimal API endpoints for CRUD and custom actions.

Official
Advanced
quanngynxquanngynx

ai-elements

Create AI chat interface components for Next.js and shadcn/ui projects.

Community
Basic
SheshiyerSheshiyer
4

widgets-ui

Render interactive React UI from JSON widget schemas.

Community
Intermediate