Which MCP tool does this skill utilize?

It specifically utilizes the mcp__plugin_mermaid-collab_mermaid__render_ui tool provided by the mermaid-collab integration server.

Can I collect files using this skill?

Yes, the skill includes a FileUpload component that can collect one or more files from the user and return the data to the Claude session.

How does data collection work in forms?

Any input component with a 'name' property will automatically have its value collected and returned in the 'data' field when an action button is clicked by the user.

What is the difference between blocking and non-blocking modes?

Blocking mode waits for the user to take an action before returning results, while non-blocking mode returns immediately after rendering, making it ideal for status displays.

What is the purpose of the render_ui tool?

It allows Claude to send JSON UI definitions to a browser client for interactive data collection and rich status display, extending its capabilities beyond the terminal.

AI-UI Interactive Components

Name: AI-UI Interactive Components
Author: ben-mad-jlp

byben-mad-jlp

•

Design Tools

Enables Claude to render interactive browser-based UI components and collect structured user feedback via MCP.

About

This skill integrates the render_ui MCP tool into Claude Code, allowing the AI to present complex information through a rich set of browser components like cards, tables, and forms. By bridging the gap between a CLI environment and a graphical interface, it enables Claude to gather structured input via toggles, sliders, and text fields, or display real-time status updates using progress bars and spinners. It is particularly useful for workflows requiring user confirmation, complex data visualization, or interactive configuration sessions where standard text-based interaction is insufficient.

Key Features

Real-time Status Indicators using ProgressBars, Spinners, and Badges
Interactive Form Collection with named inputs (Toggles, Sliders, FileUploads)
Blocking and Non-blocking Render Modes for flexible workflows
1 GitHub stars
Structured Layout Components for Cards, Dividers, and Link Navigation
Rich Data Display including Tables, CodeBlocks, and JSON Viewers

Use Cases

Gathering complex configuration settings from a user via a structured web form.
Presenting data analysis results in formatted tables and syntax-highlighted code blocks for easier review.
Displaying real-time build or deployment progress with interactive status components.

About

Key Features

Real-time Status Indicators using ProgressBars, Spinners, and Badges
Interactive Form Collection with named inputs (Toggles, Sliders, FileUploads)
Blocking and Non-blocking Render Modes for flexible workflows
1 GitHub stars
Structured Layout Components for Cards, Dividers, and Link Navigation
Rich Data Display including Tables, CodeBlocks, and JSON Viewers

Use Cases

Gathering complex configuration settings from a user via a structured web form.
Presenting data analysis results in formatted tables and syntax-highlighted code blocks for easier review.
Displaying real-time build or deployment progress with interactive status components.