How do I handle dark mode in my widgets?

You can use window.openai.theme to detect the user's current setting and apply corresponding CSS variables or classes to your widget's HTML for a native look and feel.

What is the text/html+skybridge mime type?

It is a specialized mime type used to register MCP resources as interactive templates that ChatGPT knows to render as interactive UI widgets rather than plain text.

How do I ensure my widget is the correct height?

You should call window.openai.notifyIntrinsicHeight(height) after rendering or whenever your content size changes to ensure the ChatGPT interface adjusts the iframe height correctly.

What is the window.openai bridge?

It is a JavaScript object available within the widget's sandboxed iframe that allows the UI to communicate with the ChatGPT runtime, access tool outputs, and call additional MCP tools.

Can my widget call other tools directly?

Yes, by setting 'openai/widgetAccessible: true' in the tool's metadata, you can invoke tools directly from the widget's JavaScript using the window.openai.callTool method.

OpenAI Widget Development

Name: OpenAI Widget Development
Author: mberto10

bymberto10

0•

设计工具

Streamlines the creation of interactive UI components and widgets for the OpenAI Apps SDK using the MCP skybridge protocol.

This skill provides specialized guidance for developers building interactive widgets that render directly within ChatGPT conversations. It covers the complete lifecycle of widget development, including defining HTML templates with the text/html+skybridge mime type, implementing the window.openai bridge for data access and tool invocation, and managing complex layouts and themes. By providing standardized patterns for CSP configuration, state management, and file handling, it enables the rapid deployment of sandboxed UI components that seamlessly extend the ChatGPT user experience through the Model Context Protocol.

主要功能

01Implementation patterns for bidirectional communication between widgets and MCP tools

02Standardized widget architecture patterns using the window.openai bridge

03Guidance on CSP configuration for secure external resource loading

04Support for advanced UI controls like modal requests and intrinsic height reporting

050 GitHub stars

06Automated templates for light and dark theme support within ChatGPT

使用场景

01Building data visualization dashboards that render directly in a chat thread

02Creating interactive forms or configuration panels for complex MCP tool inputs

03Developing custom file upload and management interfaces within the ChatGPT UI

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mberto10/mberto-compound mcp-widget-development

For use in Claude.ai and ChatGPT

Download Skill