A declarative UI engine that renders complex React components from simple JSON structures provided by AI agents.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install widgets-ui
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install widgets-ui using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Widget Renderer?
Widget Renderer is a specialized tool within the Openclaw Skills ecosystem designed to bridge the gap between structured AI responses and interactive user interfaces. By using a declarative JSON-to-UI approach, developers can render forms, buttons, and layouts without writing custom React code for every unique agent response. This skill enables Openclaw Skills users to build dynamic dashboards, generative UI experiences, and agentic workflows that feel native and responsive to the user.
Built on top of modern standards, it leverages the shadcn/ui ecosystem to ensure that every rendered element is accessible and aesthetically pleasing. Whether you are displaying a simple text response or a complex multi-column layout with gradients, this skill handles the heavy lifting of UI transformation, allowing your AI agents to communicate through rich, functional interfaces.
Widget Renderer Use Cases
- Generating dynamic contact forms and surveys based on agent logic.
- Visualizing structured data such as flight tickets, weather reports, or user profile cards.
- Building interactive agent dashboards using pre-defined layout widgets.
- Rapid prototyping of UI components within AI-powered applications using Openclaw Skills.
- Rendering real-time tool outputs for developer-centric agent workflows.
How Widget Renderer Works
- The developer installs the widget registry component into their React or Next.js project using shadcn.
- The application receives a structured JSON object representing a UI widget from an AI model or a backend service.
- The WidgetRenderer component parses the JSON to identify layout, typography, and interactive elements.
- It maps these definitions to internal Shadcn-based components like inputs, buttons, and flexible box containers.
- The user interacts with the generated UI, and the component manages state and event propagation via a centralized onAction callback.
Widget Renderer Setup
To integrate this component into your project as part of your Openclaw Skills toolkit, execute the following command:
npx shadcn@latest add https://ui.inference.sh/r/widgets.json
Once installed, you can import the renderer and define your widget structure:
import { WidgetRenderer } from "@/registry/blocks/widgets/widget-renderer"
const widget = {
type: 'ui',
children: [{ type: 'text', value: 'Hello from Openclaw Skills' }]
}
export default function App() {
return <WidgetRenderer widget={widget} />
}
Widget Renderer Data Schema & Taxonomy
The skill utilizes a strict JSON schema to define the visual structure. This schema is essential for ensuring compatibility within the Openclaw Skills ecosystem:
| Category | Elements |
|---|---|
| Layout | row, col, box (supports gap, padding, radius, and background) |
| Typography | title, text, caption, label (supports size, weight, variant) |
| Interactive | button, input, textarea, select, checkbox (supports onClickAction) |
| Display | badge, icon, image, divider |
All interactive elements return a WidgetAction object which includes the action type and any associated formData captured from the UI.
Widget Renderer Advanced Features
- Built-in gradient support for box layouts including ocean, sunset, and midnight themes.
- Declarative form handling using the asForm property to automatically aggregate child input data.
- Comprehensive typography control with support for varying weights, sizes, and semantic roles.
- Native integration with other Openclaw Skills such as chat-ui and tools-ui for full-stack agent experiences.
- Support for custom icons and optimized image rendering within widget containers.
SKILL.md
Loading
Related Openclaw Skills
Web Search and Content Extraction
A powerful integration for performing AI-driven web searches and structured content extraction via the inference.sh CLI.
Video Prompting Guide
A comprehensive framework for engineering high-quality prompts to generate cinematic AI videos using modern models.
Video Ad Specs
A professional toolkit for generating platform-optimized video ads with exact technical specifications for TikTok, Instagram, YouTube, and LinkedIn.
Tool UI Components
A professional collection of React and Next.js components designed to visualize the complete lifecycle of AI agent tool executions.
YouTube Thumbnail Design
Automate the creation of high-CTR YouTube thumbnails using AI image generation and data-driven design psychology.
Core Prompt Patcher
A dynamic persona injector that automatically synchronizes your workspace SOUL.md into the core system prompt to ensure identity persistence across updates.
METADATA
Featured*
