About Chatgpt App Example
Chatgpt App Example is an MCP server published by mikelopster in the Communication category: mCP server: Chatgpt App Example.
The repository has 1 stars and 0 forks, with the last commit a year ago. Six months or more without a commit doesn't mean the server is broken, but check the open issues before depending on it in production.
Install
git clone https://github.com/mikelopster/chatgpt-app-exampleThis server has no ConduID identity, so agent calls to it are not receipted. Pin the version you install and review the source before granting it credentials.
Tools (4)
AuthenticationNot required
Parameters not published.
DescriptionDisplays a simple greeting message
Parameters not published.
Input`name` (string) - The name to greet
Parameters not published.
OutputInteractive greeting card with custom message
Parameters not published.
Ask AI
Ask AI about Chatgpt App Example
Powered by Claude · Grounded in docs
Security checks
Static checks derived from the repository 18 hours ago. Heuristics on the source, not an audit.
- ✓README presentThe repository ships documentation.
- !License declaredNo license file. Legally you have no right to use it in a product.
- !Tests presentNo tests found. Behaviour changes may go unnoticed between versions.
- ✓Dependencies pinnedA lockfile pins dependency versions.
- ✓No dynamic code executionSource scan found no eval, dynamic Function, or shell execution.
- !Scoped permissionsDoesn't declare a permission scope. Assume it can do anything its process can.
README
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
📖 Additional Resources
README fetched from the repository 18 hours ago. The original is authoritative.