skills.rest
Razaib-khan
Razaib-khanCOMMUNITY
Explore all skills by this author →
GitHub

building-chatgpt-apps

Build ChatGPT Apps with interactive HTML widgets and FastMCP tool registration.

Updated Jan 15, 2026
Search Tags:#mcp#chatgpt apps#widgets#interactive ui#fastmcp#skybridge#window.openai
One-click install
npx skills add https://github.com/Razaib-khan/Hackathon-2-phases-2-3-4-5- --skill building-chatgpt-apps-razaib-khan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-chatgpt-apps
Source: https://github.com/Razaib-khan/Hackathon-2-phases-2-3-4-5-/tree/main/.claude/skills/building-chatgpt-apps
Command: npx skills add https://github.com/Razaib-khan/Hackathon-2-phases-2-3-4-5- --skill building-chatgpt-apps-razaib-khan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires mcp, uvicorn, httpx, python-dotenv, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you design and implement ChatGPT Apps that go beyond plain text by adding interactive widgets, MCP-backed tools, and structured responses. It solves the challenge of turning a conversational tool into a polished app experience with reliable UI-to-tool communication.

Core Features & Use Cases

  • Widget Architecture: Build self-contained HTML widgets that render inside ChatGPT and communicate through the window.openai bridge.
  • MCP Server Integration: Set up FastMCP tools, resources, and response metadata so ChatGPT can discover and display app capabilities.
  • Reliable Interaction Patterns: Use sendFollowUpMessage, toolOutput, and callTool for buttons, selections, and tool chaining.
  • Debugging & Validation: Troubleshoot rendering, caching, and metadata issues with the included verification and debugging guidance.
  • Use Case: Create a chapter reader app where a tool returns widget data, the widget shows a table of contents, and button clicks trigger follow-up prompts in ChatGPT.

Quick Start

Use the building-chatgpt-apps skill to turn my MCP tool into a ChatGPT widget app with the correct response metadata and an interactive HTML interface.

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 using MCP?▼

To build ChatGPT apps with interactive widgets, you create self-contained HTML UI components that render inside ChatGPT and register tools using FastMCP. The widgets communicate with the chat interface through the window.openai bridge to trigger follow-up prompts and tool chaining.

How does window.openai communication work for ChatGPT widget interaction?▼

The window.openai communication mechanism enables reliable UI-to-tool interaction by passing structured payloads between embedded HTML widgets and the chat interface. It supports interaction patterns like sendFollowUpMessage, toolOutput, and callTool for executing button clicks and tool chaining.

Can I use FastMCP to deploy ChatGPT apps with embedded HTML interfaces?▼

Yes, you can use FastMCP to deploy ChatGPT apps with embedded HTML interfaces. FastMCP handles tool registration, resource discovery, and skybridge response metadata, allowing text/html+skybridge resources to render interactive widgets directly within the ChatGPT environment.

What is the best way to structure MCP response metadata for ChatGPT widgets?▼

The best way to structure MCP response metadata for ChatGPT widgets is to use structuredContent payloads alongside text/html+skybridge resources. This format ensures ChatGPT correctly discovers app capabilities, renders the embedded UI, and processes action button interactions.

Why are my ChatGPT app widgets not rendering correctly with MCP tools?▼

ChatGPT app widgets fail to render correctly due to improper text/html+skybridge resource formatting, missing skybridge response metadata, or incorrect window.openai communication patterns. You can troubleshoot these rendering and caching issues using structured widget-specific debugging and verification guidance.

Do I need python-dotenv and uvicorn to run a FastMCP ChatGPT widget app?▼

Yes, you need uvicorn to serve the FastMCP application and python-dotenv to manage environment variables. These dependencies, along with httpx for asynchronous HTTP requests, provide the required runtime environment for deploying MCP-backed ChatGPT widget apps.

Related Skills

Explore More Software Engineering Skills→
BasedHardwareBasedHardware
13.1k

local-dev

Launch a Python backend and macOS app in local development environments.

Official
Intermediate
salmanparachasalmanparacha

building-chatgpt-apps

Build ChatGPT Apps with interactive widgets using the OpenAI Apps SDK and FastMCP.

Community
Intermediate
inpinitiinpiniti

mcp

Render json-render UIs inside MCP-enabled clients via Node.js server.

Community
Advanced
Ikram-AlamIkram-Alam

building-chatgpt-apps

Build ChatGPT Apps with interactive widgets and FastMCP servers.

Community
Advanced