Logo
ChatGPT Apps SDK

ChatGPT Apps SDK

A production-ready template for building rich, interactive widgets that render natively inside ChatGPT using Model Context Protocol. Demonstrates custom tools returning interactive React components instead of plain text. Includes SDK bootstrap patches for iframe compatibility and custom hooks for ChatGPT-specific APIs.

Visit Project
Next.js 15 React 19 MCP Zod Tailwind CSS 4

Features

  • MCP server implementation with OpenAI-specific metadata for widget rendering
  • Custom React hooks: useWidgetProps, useDisplayMode, useCallTool, useSendMessage
  • SDK bootstrap patching history.pushState, fetch, and DOM observers for iframe compatibility
  • CORS middleware for cross-origin React Server Component fetching
  • Fullscreen mode support within ChatGPT
  • Automatic dark mode detection and styling
  • Reference Doctor Finder application with symptom-to-specialty matching
  • One-click Vercel deployment

Challenge

Extending ChatGPT with custom tools traditionally returns plain text. Building rich, interactive UI components that render natively inside ChatGPT’s interface requires solving iframe compatibility issues and creating developer-friendly APIs.

Solution

Created a custom SDK bootstrap that patches browser APIs to work within ChatGPT’s iframe environment. Built a hook library for accessing ChatGPT-specific APIs and CORS middleware for cross-origin RSC fetching. The template demonstrates the full pattern with a Doctor Finder reference app.

Highlights

  • Rich React widgets render inside ChatGPT
  • Custom hooks for ChatGPT-specific APIs
  • Complete template with Doctor Finder demo