ChatGPT MCP Server Examples

Build interactive, branded components for ChatGPT using the Model Context Protocol (MCP)

This repository contains complete, production-ready examples of MCP servers that demonstrate how to create rich, interactive experiences within ChatGPT. Each example showcases different UI patterns, state management techniques, and integration strategies.

🎯 What You'll Learn

• How to build MCP servers that serve interactive widgets to ChatGPT

• State management across user sessions

• Dark/light mode support

• Multi-step UI flows with transitions

• API integration and data presentation

• Deployment strategies

Related MCP server: ChatGPT Apps SDK Next.js Starter

🚀 Live MCP Server URLs

You can connect to these live servers directly in ChatGPT:

How to Connect

1. Open ChatGPT → Settings → Connectors

2. Click "Add Connector"

3. Paste one of the URLs above

4. Start chatting! Try: "Log me into my Target account" or "Search for fitness trackers"

📚 What's Included

4 Complete MCP Server Examples

1. Authentication Server (/mcp)

• 3-screen authentication flow (login → verification → success)

• Session management with unique session IDs

• State persistence across tool calls

• Demo credentials for testing

Example prompt: "I need to sign in to Target"

2. Product Search Server (/mcp2)

• Product carousel widget with images, prices, ratings

• Agentforce personalized recommendations

• Integration with Unwrangle API

• Detail view for individual products

• Dark/light mode support

Example prompt: "Search Target for fitness trackers"

3. Checkout Server (/mcp3)

• Add-to-cart confirmation widget

• Complete checkout flow with pre-filled payment/shipping

• Order summary and success animations

• Single-item cart enforcement

Example prompt: "Add the Fitbit to my cart and checkout"

4. Membership Server (/mcp4)

• Circle 360 membership signup

• 3-tier selection UI

• Dynamic order summary

• Processing screen with success confetti

• Demo reset endpoint for testing

Example prompt: "Sign me up for Circle 360"

🏗️ Repository Structure

ChatGPT Components/
├── server.js                 # Main Node.js MCP server (all 4 servers)
├── widgets/                  # Interactive HTML components
│   ├── target-auth.html      # Authentication widget
│   ├── product-carousel.html # Product search widget
│   ├── add-to-cart.html      # Add to cart widget
│   ├── checkout.html         # Checkout widget
│   └── circle-signup.html    # Membership signup widget
├── public/                   # Static pages
│   ├── auth.html            # External auth page (Custom GPT Actions)
│   └── privacy.html         # Privacy policy
├── docs/                     # Documentation
│   ├── BUILDING_MCP_SERVERS.md    # Tutorial: Build your own
│   ├── ARCHITECTURE.md            # System design overview
│   └── examples/                  # Detailed example docs
│       ├── authentication.md
│       ├── product-search.md
│       ├── checkout.md
│       └── membership.md
├── package.json             # Dependencies
├── Procfile                 # Heroku deployment config
└── README.md               # You are here

🎓 Getting Started

Prerequisites

• Node.js 20.x or higher

• npm 10.x or higher

• (Optional) Heroku CLI for deployment

Local Development

1. Clone the repository

git clone <your-repo-url>
cd ChatGPT-Components

2. Install dependencies

npm install

3. Set environment variables

export UNWRANGLE_API_KEY=your_api_key_here  # For product search

4. Start the server

npm start

5. Test in ChatGPT

   • Add connector: http://localhost:8000/mcp (or /mcp2, /mcp3, /mcp4)

   • Start chatting!

Deploy to Heroku

heroku create your-app-name
heroku config:set UNWRANGLE_API_KEY=your_api_key_here
git push heroku main

Your MCP servers will be available at:

• https://your-app-name.herokuapp.com/mcp

• https://your-app-name.herokuapp.com/mcp2

• https://your-app-name.herokuapp.com/mcp3

• https://your-app-name.herokuapp.com/mcp4

📖 Learn More

• Building MCP Servers Tutorial - Step-by-step guide to creating your own MCP server

• Architecture Overview - How the system works under the hood

• Example Documentation - Deep dives into each example server

🎨 Key Features Demonstrated

UI/UX Patterns

• ✅ Multi-screen flows with smooth transitions

• ✅ Loading states and progress indicators

• ✅ Success animations (checkmarks, confetti)

• ✅ Dark/light mode support (respects ChatGPT theme)

• ✅ Responsive design

• ✅ Form validation and error handling

Technical Patterns

• ✅ Session management with unique IDs

• ✅ State persistence across tool calls

• ✅ SSE (Server-Sent Events) for real-time communication

• ✅ Multiple MCP servers on one Node.js app

• ✅ External API integration

• ✅ Widget-to-server communication

• ✅ window.openai API usage

Business Logic

• ✅ Authentication flows

• ✅ Product recommendations

• ✅ Shopping cart management

• ✅ Payment/checkout flows

• ✅ Membership signups

🔧 Customization

Each widget is self-contained in widgets/ and can be customized:

• Styling: Modify CSS within each HTML file

• Branding: Change colors, logos, and text

• Flow: Add/remove steps in multi-screen flows

• Behavior: Edit JavaScript event handlers

Server logic is in server.js:

• Tools: Add new tool definitions in each createMcpXServer function

• Sessions: Customize state management in authSessions, cartStorage, etc.

• APIs: Integrate your own backend services

🤝 Contributing

This repository is designed to be:

• Educational: Learn by example

• Modular: Copy what you need

• Production-ready: Use as-is or customize

Feel free to fork, modify, and build upon these examples!

📝 License

MIT License - feel free to use this code in your own projects!

🆘 Support

• Issues: Open a GitHub issue

• Questions: Check the documentation

• Examples: See detailed guides in docs/examples/

🌟 What's Next?

After exploring these examples, try:

1. Building your own MCP server from scratch

2. Combining multiple tools in creative ways

3. Integrating with your own APIs and services

4. Deploying to production

Check out BUILDING_MCP_SERVERS.md to get started!

Built with ❤️ using the Model Context Protocol