skills.rest
ahostbr
ahostbrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

generative-ui

Renders interactive widgets such as dashboards, tables, and charts in chat.

Updated Aug 5, 2026
Search Tags:#charts#dashboard#forms#tables#chat-ui#generative-ui#interactive-widgets
One-click install
npx skills add https://github.com/ahostbr/liteharness --skill generative-ui-ahostbr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generative-ui
Source: https://github.com/ahostbr/liteharness/tree/main/liteharness/catalog/skills/ls-genui
Command: npx skills add https://github.com/ahostbr/liteharness --skill generative-ui-ahostbr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of turning dense information into clear, interactive visuals that users can understand and act on immediately inside the chat.

Core Features & Use Cases

  • Inline interactive widgets: Embeds charts, tables, dashboards, forms, and selectors directly in the conversation without forcing a modal or separate panel.
  • Multiple rendering bands: Uses a fast themed catalog band, flexible specs layouts for multi-component dashboards, or custom HTML for bespoke interactivity.
  • Optional interactivity: Supports blocking interactions (like buttons and forms) when you need user input to continue the workflow.

Quick Start

Use the generative-ui skill to render an interactive table widget from your data in the current chat context.

Frequently Asked Questions about generative-ui

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

FAQPage Schema
How do I render interactive widgets inline in chat conversations?▼

To render interactive widgets inline in chat, you apply a workflow that replaces long-form explanations with visual UI like dashboards, tables, and charts directly within the conversation.

Can I embed forms and charts directly in a chat interface?▼

Yes, you can embed forms and charts directly in a chat interface using inline interactive widgets, allowing users to interact with UI components like selectors and forms without forcing a separate panel.

What is the best way to display dashboards and tables in a generated UI?▼

The best way to display dashboards and tables in a generated UI is by using flexible specs layouts or a fast themed catalog band, which organizes multi-component visuals into actionable interfaces.

Does generative-ui support blocking interactions for user input?▼

Yes, generative-ui supports optional blocking interactive mode, enabling buttons and forms to pause the workflow until the user provides the necessary input to continue.

Can I use custom HTML for bespoke interactivity in chat widgets?▼

Yes, you can use custom HTML bands for bespoke interactivity in chat widgets, providing an alternative to themed catalog bands and specs layouts when you need highly customized UI behavior.

What type of JSON contract is required for interactive chat widgets?▼

Interactive chat widgets require a JSON tool contract that includes a mandatory type field, alongside specifications for catalog, specs, and html rendering bands to define the output.

Related Skills

Explore More Design & Creative Skills→
leaderiopleaderiop
7

Advanced Modular Library Design

Define package boundaries and API contracts for modular libraries.

Community
Advanced
a-taka-tak
1

git-commit-push

Automates staging, committing, and pushing with standardized Git workflow.

Community
Basic
YuvalShafririYuvalShafriri

dashboard-ux-reviewer

Review dashboard code and suggest UX and data visualization improvements.

Community
Advanced
Ahoo-WangAhoo-Wang
15

fetcher-viewer-components

Create React data tables and filter panels with Ant Design.

Community
Intermediate