How does widget hydration work?

Hydration is handled by the WidgetTemplateService, which takes a pre-defined template and injects live data from a tool result into placeholders (e.g., {{temperature}}) to create a final UI resource.

Does this skill support platforms other than ChatKit?

Yes, it includes patterns for multi-channel support, specifically allowing widgets to be translated into Slack Block Kit components for cross-platform consistency.

What is required to register a widget in an MCP server?

You need to define a widget template in JSON/YAML format, use the BaseMCPServer to register a widget_resource, and return a hydrated template from your tool definition.

What is an MCP Widget?

An MCP Widget is a visual UI component, such as a Card or Text block, that is generated by a Model Context Protocol (MCP) server and rendered directly within the ChatKit interface.

MCP Widget Authoring

Name: MCP Widget Authoring
Author: rbarazi

byrbarazi

デザインツール

Builds dynamic visual UI components and widgets for ChatKit within Model Context Protocol (MCP) server environments.

概要

The MCP Widget Authoring skill provides a robust framework for creating rich, interactive UI components that render directly in ChatKit from MCP tool results. By leveraging structured widget templates, JSON Schema validation, and the WidgetTemplateService for data hydration, developers can transform raw backend data into polished visual cards, text blocks, and images. This skill streamlines the workflow from server-side tool execution to front-end rendering, offering specialized patterns for BaseMCPServer integration and multi-channel compatibility for platforms like Slack via Block Kit mapping.

主な機能

Standardized widget template system with built-in JSON Schema validation
WidgetTemplateService for seamless data hydration into UI components
BaseMCPServer patterns for streamlined tool and resource registration
Multi-channel support including Slack Work Objects and Block Kit compatibility
Integration with ChatKit's native component library including Cards and Text
0 GitHub stars

ユースケース

Transforming complex API responses into user-friendly visual dashboards within chat
Building interactive monitoring tools that display real-time status cards via MCP
Standardizing UI output across multiple platforms like ChatKit and Slack

概要

主な機能

Standardized widget template system with built-in JSON Schema validation
WidgetTemplateService for seamless data hydration into UI components
BaseMCPServer patterns for streamlined tool and resource registration
Multi-channel support including Slack Work Objects and Block Kit compatibility
Integration with ChatKit's native component library including Cards and Text
0 GitHub stars

ユースケース

Transforming complex API responses into user-friendly visual dashboards within chat
Building interactive monitoring tools that display real-time status cards via MCP
Standardizing UI output across multiple platforms like ChatKit and Slack