Widgets Ui

What This Skill Does

The Widgets UI skill by okaris allows your OpenClaw agent to break free from plain text responses by rendering rich, interactive user interfaces directly within the chat interface. By leveraging a declarative JSON schema, the agent can structure data into visual elements like buttons, inputs, cards, and layouts. This skill essentially enables the agent to function as a micro-application generator. When the agent receives a request for complex data, it can deliver a structured form, a selection grid, or a multi-part card layout that allows the user to interact with the system far more effectively than through standard text. The renderer is built on top of shadcn/ui, ensuring that the generated components look professional and consistent with modern React/Next.js design standards.

Installation

To integrate this skill into your environment, use the OpenClaw CLI: clawhub install openclaw/skills/skills/okaris/widgets-ui

After installing the package, you will need to add the necessary component registry to your frontend project using the provided shadcn integration command: npx shadcn@latest add https://ui.inference.sh/r/widgets.json Ensure that you have set up the WidgetRenderer within your application's message display component to handle the incoming JSON payload and map it to the interactive UI elements.

Use Cases

This skill is ideal for tasks requiring structured input or visual data presentation. Use it for:

• Dynamic Form Generation: Creating survey forms or lead capture widgets on the fly based on user intent.
• Interactive Dashboards: Rendering compact data summaries, such as stock price cards or flight status updates, complete with action buttons.
• Contextual Navigation: Providing menu-based responses that allow users to select steps in a multi-stage workflow.
• Rich Data Entry: Replacing error-prone text prompts with dedicated input fields, selects, and checkboxes.

Example Prompts

1. "Look up flight information for the next trip to Tokyo and present the results in a card format with a booking button."
2. "Create a multi-step preference form for my new profile settings using checkboxes and text inputs."
3. "Show me the status of the current server load as a dashboard and include a button to trigger a manual restart if needed."

Tips & Limitations

• Keep your JSON payloads lightweight to ensure fast rendering speeds in the chat interface.
• The skill requires a React/Next.js environment; it will not work in environments without standard DOM support.
• Always validate the JSON schema before sending it to the client to ensure the renderer can parse the components correctly.
• Avoid overly nesting layouts, as deeply nested components may impact mobile responsiveness and performance.