skills.rest
Asmayaseen
AsmayaseenCOMMUNITY
Explore all skills by this author →
GitHub

building-chatgpt-apps

Build ChatGPT apps with interactive widgets and MCP-backed tools.

2|Updated Dec 24, 2025
Search Tags:#development#sdk#mcp#openai#chatgpt#widgets#widget-patterns
One-click install
npx skills add https://github.com/Asmayaseen/hackathon-2 --skill building-chatgpt-apps-asmayaseen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-chatgpt-apps
Source: https://github.com/Asmayaseen/hackathon-2/tree/main/.claude/skills/building-chatgpt-apps
Command: npx skills add https://github.com/Asmayaseen/hackathon-2 --skill building-chatgpt-apps-asmayaseen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Guides developers in creating ChatGPT Apps with interactive widgets and MCP-backed tools, streamlining UI-rich integrations inside ChatGPT conversations.

Core Features & Use Cases

  • Widget architecture and MCP server setup with FastMCP
  • Embedding HTML widgets using the window.openai APIs (toolOutput, sendFollowUpMessage, callTool)
  • Defining widget metadata via _meta["openai.com/widget"] for ChatGPT to render

Quick Start

  • Use the building-chatgpt-apps skill to scaffold a minimal MCP-backed widget and verify widget rendering in a ChatGPT app.

Frequently Asked Questions about building-chatgpt-apps

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build ChatGPT apps with interactive widgets?▼

To build ChatGPT apps with interactive widgets, developers design widget architectures and use the window.openai APIs alongside the text/html+skybridge MIME type to render UI components directly inside ChatGPT conversations.

What is the text/html+skybridge MIME type used for in ChatGPT apps?▼

The text/html+skybridge MIME type is used for embedding interactive HTML widgets within ChatGPT apps, allowing the window.openai APIs to handle rendering and communication between the widget and the chat interface.

How do I set up an MCP server for ChatGPT app widgets?▼

You can set up an MCP server for ChatGPT app widgets using FastMCP, configuring it to provide MCP-backed tools that integrate with widget architectures and Developer Mode workflows for interactive UI rendering.

Can I use the window.openai APIs to send messages from a widget?▼

Yes, you can use the window.openai APIs like sendFollowUpMessage, toolOutput, and callTool to enable interactive widgets to send messages, output tool results, and trigger actions within a ChatGPT app.

How does ChatGPT identify and render custom widget metadata?▼

ChatGPT renders custom widgets by reading widget metadata defined through the _meta["openai.com/widget"] configuration, which provides the necessary architectural instructions for the UI integration.

Do I need Developer Mode to create ChatGPT apps with MCP-backed tools?▼

Yes, utilizing Developer Mode workflows is required for creating ChatGPT apps with MCP-backed tools, as it provides the environment needed to scaffold MCP servers and verify widget rendering.

Related Skills

Explore More Software Engineering Skills→
anilcan-karaanilcan-kara

fastmcp

Scaffold, validate, and deploy Python MCP servers with FastMCP.

Community
Intermediate
hafiznaveedchuhan-ctrlhafiznaveedchuhan-ctrl

building-chatgpt-apps

Build interactive ChatGPT Apps with MCP servers and embedded widgets.

Community
Advanced
Ikram-AlamIkram-Alam

building-chatgpt-apps

Build ChatGPT Apps with interactive widgets and FastMCP servers.

Community
Advanced
hussain9491hussain9491

building-chatgpt-apps

Build ChatGPT Apps combining FastMCP servers with embedded HTML widgets.

Community
Advanced