ChatGPT MCP Server Interactive Components

You can run four MCP servers that deliver interactive widgets inside ChatGPT. These servers host authentication, product search with recommendations, checkout flows, and membership signup, enabling branded, multi-step user experiences that persist state across conversations.

How to use

Connect to an MCP server from ChatGPT by adding a connector and pointing it at one of the provided URLs. Once connected, you can start interacting with the corresponding interactive widget in a chat. Each server presents a distinct UI pattern: authentication, product search with a carousel and recommendations, checkout with a cart, and a membership signup flow.

How to install

Prerequisites: you need Node.js 20.x or higher and npm 10.x or higher. (Optional) The Heroku CLI can be used for deployment.

Local development steps you can follow to try these MCP servers locally are shown here.

# Prerequisites
node -v  # should be 20.x or higher
npm -v   # should be 10.x or higher

# Optional: install Heroku CLI if you plan to deploy
# heroku --version

# 1. Clone the project
git clone <your-repo-url>
cd ChatGPT-Components

# 2. Install dependencies
npm install

# 3. Set environment variables (example for product search API access)
export UNWRANGLE_API_KEY=your_api_key_here

# 4. Start the server
npm start

# 5. Test in ChatGPT by adding a connector (use one of the MCP URLs below)
# - https://chatgpt-components-0d9232341440.herokuapp.com/mcp
# - https://chatgpt-components-0d9232341440.herokuapp.com/mcp2
# - https://chatgpt-components-0d9232341440.herokuapp.com/mcp3
# - https://chatgpt-components-0d9232341440.herokuapp.com/mcp4

Connecting to the live MCP servers

Use the following live MCP URLs to connect from ChatGPT. Open ChatGPT, go to Settings, then Connectors, choose Add Connector, and paste one of these URLs.

Authentication server: https://chatgpt-components-0d9232341440.herokuapp.com/mcp Product Search server: https://chatgpt-components-0d9232341440.herokuapp.com/mcp2 Checkout server: https://chatgpt-components-0d9232341440.herokuapp.com/mcp3 Membership server: https://chatgpt-components-0d9232341440.herokuapp.com/mcp4

What you can do with each server

Authentication server provides a 3-screen login, verification, and success flow with session IDs and state persistence.

Product Search server presents a product carousel with images, prices, ratings, Agentforce recommendations, and a detail view for each item. It supports dark/light mode.

Checkout server enables add-to-cart confirmations, a full checkout flow with pre-filled shipping and payment details, and an order summary with success animations. It enforces single-item carts.

Membership server offers Circle 360 signup with a 3-tier UI, a dynamic order summary, a processing screen with confetti, and a demo reset option for testing.

Notes on environment and configuration

An environment variable named UNWRANGLE_API_KEY is used for product search integration. You need to supply your API key to access the product data source.