Chatgpt App Example
MCP server: Chatgpt App Example
Installation
npx chatgpt-app-exampleAsk AI about Chatgpt App Example
Powered by Claude Β· Grounded in docs
I know everything about Chatgpt App Example. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
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
- Clone the repository:
git clone https://github.com/mikelopster/chatgpt-app-example.git
cd chatgpt-app-example
- Install dependencies:
pnpm install
- 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
- Open ChatGPT and go to Settings β Connectors β Advanced
- Enable Developer mode
- Click Create to add a new connector
- Fill in the details:
- Name: Greeting App
- Description: A simple app to show a greeting
- Connector URL:
https://your-ngrok-url.ngrok.app/mcp
- Save and enable the connector in a new chat
- 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
- User Request: User invokes a tool through ChatGPT
- Tool Call: ChatGPT sends a request to the MCP server
- Processing: Server processes the request and prepares response data
- Response: Server returns structured content and UI template
- Rendering: ChatGPT renders the React component with the data
- 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_globalsevents 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 serverpnpm run build- Build TypeScript filespnpm 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
