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

🚀 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