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:
- Zepbound - Weight management medication
- Humalog - Insulin family products
- Humulin - Insulin family products
- Emgality - Migraine prevention
- Basaglar - Long-acting insulin
- LYUMJEV - Rapid-acting insulin
- 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
- Create Auth0 Account at https://auth0.com
- 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
- Enable Dynamic Client Registration:
- Settings → Advanced → OAuth → Enable OIDC Dynamic Application Registration
- Configure Login Connections:
- Ensure at least one connection (Google, Username-Password, etc.) is enabled
- Enable connection for dynamically created clients
Deployment Steps
-
Connect GitHub Repository
- Fork this repository
- Connect to Render.com
-
Configure Build Settings
- Build Command:
npm install && npm run build - Start Command:
npm start - Environment: Node 18+
- Build Command:
-
Set Environment Variables
NODE_ENV=productionPORT(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+skybridgefor 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
- ChatGPT queries
/.well-known/oauth-protected-resourcefor OAuth metadata - ChatGPT discovers Auth0 via
/.well-known/openid-configuration - ChatGPT dynamically registers with Auth0 using
/oidc/register - User authenticates through Auth0 OAuth flow with PKCE
- ChatGPT receives JWT access token with proper audience
- Token is sent in Authorization header on tool invocations
- MCP server extracts and stores token for authenticated API calls
- 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 helperGET /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.