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

•

Herramientas de Diseño

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

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.

Características Principales

01Real-time Status Indicators using ProgressBars, Spinners, and Badges

02Interactive Form Collection with named inputs (Toggles, Sliders, FileUploads)

03Blocking and Non-blocking Render Modes for flexible workflows

041 GitHub stars

05Structured Layout Components for Cards, Dividers, and Link Navigation

06Rich Data Display including Tables, CodeBlocks, and JSON Viewers

Casos de Uso

01Gathering complex configuration settings from a user via a structured web form.

02Presenting data analysis results in formatted tables and syntax-highlighted code blocks for easier review.

03Displaying real-time build or deployment progress with interactive status components.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ben-mad-jlp/claude-mermaid-collab using-ai-ui

For use in Claude.ai and ChatGPT

Download Skill