skills.rest
skaile-ai
skaile-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-rendering

Render UI components from the UI_MANIFEST and emit ui_render events.

Updated Mar 28, 2026
Search Tags:#catalog#forms#maps#data-table#chat components#ui rendering
One-click install
npx skills add https://github.com/skaile-ai/ai-assets --skill ui-rendering
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-rendering
Source: https://github.com/skaile-ai/ai-assets/tree/main/forge-project/skills/ui-rendering
Command: npx skills add https://github.com/skaile-ai/ai-assets --skill ui-rendering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Rendering interactive UI components inside chat enables immediate data collection, structured input, and rich feedback without leaving the conversation, reducing context switching and back-and-forth.

Core Features & Use Cases

  • Emit ui_render events to display catalogs, forms, data-tables, maps, and previews directly in the chat.
  • Support multiple components (catalog, single-select, multi-select, form, confirm, data-table, markdown, code, image, file-link, file-list, location, map) and guide user interactions with on_interact callbacks.
  • Enforce UI_MANIFEST compliance by ensuring components exist in the manifest and that interactions trigger appropriate client-side actions.

Quick Start

Render a catalog of options in the chat and capture the user’s selection.

Frequently Asked Questions about ui-rendering

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

FAQPage Schema
How do I render interactive UI components directly inside a chat conversation?▼

You can render interactive UI components inside chat by emitting ui_render events with unique IDs via the Agent UI Protocol, enabling catalogs, forms, tables, and maps to display directly in the conversation.

Can I display a data table or map in chat without making users leave the conversation?▼

Yes, rendering a data-table or map inside chat reduces context switching by embedding rich previews and structured data directly within the conversation interface using ui_render events.

How do I capture user input from a form rendered in a chat conversation?▼

Capture user input from a rendered form by using on_interact callbacks, which trigger appropriate client-side actions and return the user's structured selection or input data back to the chat session.

What UI components are supported for rendering inside chat conversations?▼

Supported components include catalog, single-select, multi-select, form, confirm, data-table, markdown, code, image, file-link, file-list, location, and map, all drawn strictly from the UI_MANIFEST.

Does rendering chat UI components require a specific manifest or protocol?▼

Yes, chat UI rendering enforces UI_MANIFEST compliance by drawing components only from the declared manifest and requires the Agent UI Protocol to emit ui_render events for display.

Why are my custom UI components not rendering inside the chat interface?▼

Custom UI components fail to render inside chat if they are not declared in the UI_MANIFEST, as the rendering process strictly enforces manifest compliance and only draws from approved components.

Related Skills

Explore More Design & Creative Skills→
victor-telesvictor-teles
1

components

Register generative and interactable UI components for AI-driven React rendering.

Community
Intermediate
andfaniloandfanilo
629

using-streamlit-session-state

Persist Streamlit session state across script reruns with widget keys and callbacks.

Community
Intermediate
ouzayrouzayr

web-search

Searches the web for current information and fetches content from specified URLs.

Community
Intermediate
wulaosijiwulaosiji
28

feishu-card-parser

Parse Feishu Interactive Card JSON into Markdown and plain text.

Community
Basic