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

0•

デザインツール

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.

主な機能

01Standardized widget template system with built-in JSON Schema validation

02WidgetTemplateService for seamless data hydration into UI components

03BaseMCPServer patterns for streamlined tool and resource registration

04Multi-channel support including Slack Work Objects and Block Kit compatibility

05Integration with ChatKit's native component library including Cards and Text

060 GitHub stars

ユースケース

01Transforming complex API responses into user-friendly visual dashboards within chat

02Building interactive monitoring tools that display real-time status cards via MCP

03Standardizing UI output across multiple platforms like ChatKit and Slack

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add rbarazi/agent-skills mcp-widget-authoring

For use in Claude.ai and ChatGPT

Download Skill