Medicine Carousel MCP Server

TypeScript implementation of a medicine catalog MCP server for ChatGPT Apps SDK integration with OAuth 2.1 authentication. Displays FDA-approved Lilly Direct pharmaceuticals in an interactive carousel interface and provides authenticated user profile access.

Overview

This MCP (Model Context Protocol) server provides an interactive medicine catalog for Lilly Direct pharmaceuticals with OAuth 2.1 + PKCE authentication through Auth0. It displays FDA-approved medications in a responsive carousel interface and enables authenticated users to access personalized profile data from AWS API Gateway.

Features

• 💊 Interactive Medicine Carousel - Browse 7 FDA-approved medicines
• 🔐 OAuth 2.1 Authentication - Secure user authentication via Auth0 with PKCE
• 👤 User Profile Integration - Fetch authenticated user data from AWS API Gateway
• 🏥 Pharmaceutical Styling - Professional medical interface design
• 🛒 Direct Purchase Links - Links to Lilly Direct for each medicine
• ✅ FDA Certification Display - Clear FDA-approved badges
• 🚚 Free Delivery Badges - Delivery information for each medicine
• 📱 Responsive Design - Works across all ChatGPT display modes
• 🔧 Built with TypeScript - Type-safe development with Express
• 🚀 Cloud Deployment Ready - Configured for Render.com

Medicine Catalog

Currently includes 7 FDA-approved medicines:

1. Zepbound - Weight management medication
2. Humalog - Insulin family products
3. Humulin - Insulin family products
4. Emgality - Migraine prevention
5. Basaglar - Long-acting insulin
6. LYUMJEV - Rapid-acting insulin
7. Rezvoglar - Long-acting insulin biosimilar

Local Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

Deployment on Render.com

Build Configuration

• Build Command: npm install && npm run build
• Start Command: npm start
• Environment: Node 18+

Environment Variables

Required environment variables:

# Server Configuration
NODE_ENV=production
PORT=8000  # Auto-configured by Render

# Auth0 OAuth Configuration
AUTH0_DOMAIN=your-tenant.auth0.com
AUTH0_ISSUER_BASE_URL=https://your-tenant.auth0.com
AUTH0_CLIENT_ID=your_client_id
AUTH0_CLIENT_SECRET=your_client_secret
AUTH0_AUDIENCE=https://your-api-gateway-url.com

Auth0 Setup

1. Create Auth0 Account at https://auth0.com
2. Create API in Auth0 Dashboard:
   • Name: Your API name
   • Identifier: Your AWS API Gateway URL (used as AUTH0_AUDIENCE)
   • Signing Algorithm: RS256
   • Enable RBAC if needed
3. Enable Dynamic Client Registration:
   • Settings → Advanced → OAuth → Enable OIDC Dynamic Application Registration
4. Configure Login Connections:
   • Ensure at least one connection (Google, Username-Password, etc.) is enabled
   • Enable connection for dynamically created clients

Deployment Steps

1. Connect GitHub Repository

   • Fork this repository
   • Connect to Render.com

2. Configure Build Settings

   • Build Command: npm install && npm run build
   • Start Command: npm start
   • Environment: Node 18+

3. Set Environment Variables

   • NODE_ENV=production
   • PORT (auto-configured by Render)

MCP Tools

Available Tools

Public Tools (No Authentication Required)

• show-all-medicines: Display all medicines in interactive carousel
• show-medicine: Display specific medicine by name

Authenticated Tools (OAuth Required)

• get-user-profile: Fetch authenticated user profile from AWS API Gateway
  • Requires OAuth login via ChatGPT
  • Returns user name and organization
  • Displays in interactive user profile widget

Tool Features

• Interactive carousel navigation with arrow buttons
• FDA-approved certification badges
• Free delivery indicators
• Direct purchase links to Lilly Direct
• Professional pharmaceutical styling
• Responsive design for all screen sizes
• User authentication with Auth0 OAuth 2.1 + PKCE
• Secure token-based API calls to AWS

ChatGPT Integration

MCP Configuration

Add the server URL to ChatGPT Desktop MCP settings:

{
  "medicine-carousel-mcp": {
    "command": "curl", 
    "args": ["-X", "POST", "https://your-app.onrender.com/mcp"]
  }
}

UI Integration

• Resource Pattern: Uses ui://widget/medicine-carousel.html
• MIME Type: text/html+skybridge for ChatGPT Apps compatibility
• State Sync: Carousel state synchronizes with ChatGPT interface
• Display Modes: Supports inline, picture-in-picture, and fullscreen modes

Architecture

Current Implementation

• Express.js: HTTP server optimized for cloud deployment
• MCP SDK: Model Context Protocol integration for ChatGPT
• TypeScript: Type-safe development with interfaces
• Auth0: OAuth 2.1 + PKCE authentication provider
• AWS API Gateway: Backend API with JWT authorization
• Static Data: Medicine catalog defined in src/data.ts
• Embedded HTML: Self-contained UI widgets with inline CSS/JS

Authentication Flow

1. ChatGPT queries /.well-known/oauth-protected-resource for OAuth metadata
2. ChatGPT discovers Auth0 via /.well-known/openid-configuration
3. ChatGPT dynamically registers with Auth0 using /oidc/register
4. User authenticates through Auth0 OAuth flow with PKCE
5. ChatGPT receives JWT access token with proper audience
6. Token is sent in Authorization header on tool invocations
7. MCP server extracts and stores token for authenticated API calls
8. AWS API Gateway validates JWT and returns user data

Data Structure

interface MedicineItem {
  id: string;
  name: string;
  logo: string;        // Medicine brand logo URL
  image: string;       // Product image URL  
  buyLink: string;     // Lilly Direct purchase URL
  buyLinkText: string; // Custom button text
}

Future Improvements

Dynamic Data Integration

• Replace static medicine list with API integration
• Real-time availability and pricing updates
• Automatic new medicine inclusion

Enhanced Authentication & Personalization

• ✅ User OAuth authentication (Completed)
• ✅ User profile integration (Completed)
• Prescription management
• Insurance coverage integration
• Personalized medicine recommendations based on user data
• Order history and refill reminders

Enhanced MCP Capabilities

• Medicine availability checking
• Prescription status tracking
• Delivery scheduling
• Medicine comparison tools
• Integration with user medical records

Security & Compliance

• OAuth 2.1 + PKCE: Industry-standard authentication flow
• JWT Token Validation: AWS API Gateway validates all authenticated requests
• Secure Token Storage: Tokens stored in memory, never persisted
• Input Sanitization: All user inputs properly validated
• HTTPS Assets: All medicine images served over HTTPS
• Safe External Links: Direct links to official Lilly Direct domain
• Environment Variables: Secrets managed via environment variables, never in code
• CORS Support: Proper headers for ChatGPT integration
• No PII Storage: No personal identifiable information stored on MCP server

Development Notes

• Uses StreamableHTTPServerTransport for ChatGPT Apps compatibility
• OAuth 2.1 + PKCE flow automatically handled by ChatGPT
• Tokens extracted from Authorization header by verifyToken middleware
• Non-blocking token verification - public tools work without auth
• Responsive carousel with dynamic width calculations
• Professional pharmaceutical styling with FDA compliance indicators
• Touch-friendly navigation for mobile devices
• Optimized image loading and layout consistency
• AWS API Gateway integration for authenticated backend calls

API Endpoints

MCP Protocol

• POST /mcp - Main MCP endpoint for tool invocations and resource requests

OAuth & Health

• GET /.well-known/oauth-protected-resource - OAuth discovery metadata (required by ChatGPT)
• GET /mcp/oauth - OAuth configuration helper
• GET /health - Server health check

Testing

Test Public Tools

# Show all medicines (no auth required)
curl -X POST https://your-app.onrender.com/mcp \
  -H "Content-Type: application/json" \
  -d '{"method": "tools/call", "params": {"name": "show-all-medicines"}}'

Test Authenticated Tool

Authenticated tools require valid OAuth token from ChatGPT. Use ChatGPT interface to test the get-user-profile tool after logging in.

---

Note: This server uses static medicine data for demonstration. OAuth integration enables secure access to user-specific data from AWS API Gateway. All secrets must be configured via environment variables.