ChatGPT App Example

A demonstration project showcasing how to build interactive applications for ChatGPT using the Apps SDK and Model Context Protocol (MCP).

🌟 Overview

This project demonstrates how to create custom applications that integrate directly with ChatGPT, allowing users to interact with dynamic UI components within the chat interface. The application uses the Model Context Protocol (MCP) to communicate between ChatGPT and a custom backend server.

Key Features

• 🔧 MCP Server Implementation - Backend server using Express.js and MCP SDK
• ⚛️ React UI Components - Interactive frontend components rendered in ChatGPT
• 🎨 Tailwind CSS Integration - Modern, responsive UI styling
• 📦 TypeScript Support - Fully typed codebase

🏗️ Project Structure

chatgpt-app-example/
├── server/
│   └── index.ts              # MCP server implementation
├── web/
│   ├── src/
│   │   └── component.jsx  # React component for UI
│   └── dist/                 # Built component output
├── package.json
├── tsconfig.json
└── README.md

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• pnpm (or npm/yarn)
• ngrok account (for local testing with ChatGPT)
• ChatGPT Plus account (for testing in ChatGPT UI)

Installation

1. Clone the repository:

git clone https://github.com/mikelopster/chatgpt-app-example.git
cd chatgpt-app-example

2. Install dependencies:

pnpm install

3. Build the UI component:

pnpm run build:esbuild

Running the Server

Start the development server:

pnpm run dev

The server will start on http://localhost:3000 with the MCP endpoint available at http://localhost:3000/mcp.

Exposing Your Local Server

Use ngrok to create a public HTTPS tunnel:

ngrok http 3000

Copy the HTTPS URL provided by ngrok (e.g., https://random-string.ngrok.app).

🔌 Connecting to ChatGPT

1. Open ChatGPT and go to Settings → Connectors → Advanced
2. Enable Developer mode
3. Click Create to add a new connector
4. Fill in the details:
   • Name: Greeting App
   • Description: A simple app to show a greeting
   • Connector URL: https://your-ngrok-url.ngrok.app/mcp
5. Save and enable the connector in a new chat
6. Try it out by typing: "Use the Greeting App to greet the world"

💡 How It Works

Architecture Overview

User Input → ChatGPT → MCP Server → Backend Processing → UI Rendering

1. User Request: User invokes a tool through ChatGPT
2. Tool Call: ChatGPT sends a request to the MCP server
3. Processing: Server processes the request and prepares response data
4. Response: Server returns structured content and UI template
5. Rendering: ChatGPT renders the React component with the data
6. Interaction: User interacts with the rendered UI

Available Tools

show_greeting

• Description: Displays a simple greeting message
• Input: name (string) - The name to greet
• Authentication: Not required
• Output: Interactive greeting card with custom message

Component Structure

The React component (GreetingComponent.jsx) demonstrates:

• Reading data from window.openai.toolOutput
• Listening to openai:set_globals events for updates
• Rendering dynamic content based on structured data
• Using TailwindCSS for styling

🛠️ Development

Scripts

• pnpm run dev - Start development server with hot reload (using tsx)
• pnpm run start - Start production server
• pnpm run build - Build TypeScript files
• pnpm run build:esbuild - Build React component for production

Tech Stack

Backend:

• Express.js - Web framework
• @modelcontextprotocol/sdk - MCP protocol implementation
• TypeScript - Type safety
• Zod - Schema validation

Frontend:

• React 18 - UI components
• TailwindCSS (via CDN) - Styling
• esbuild - Fast bundling

📚 Documentation

For comprehensive guides and concepts:

• Main Documentation (Thai) - Detailed guide in Thai language
• Apps SDK Documentation - Official OpenAI documentation
• MCP Protocol Guide - Understanding MCP basics

Key Concepts

Model Context Protocol (MCP) is the communication standard that enables:

• LLMs to interact with external tools and services
• Secure and structured data exchange
• Dynamic UI rendering within ChatGPT
• Tool registration and discovery

Apps SDK provides:

• Helper functions for building MCP servers
• UI template management
• Authentication framework
• Best practices and patterns

📖 Additional Resources

• OpenAI Apps Platform
• MCP Specification
• Design Guidelines