Skip to main content
The last step is making your MCP endpoint reachable from ChatGPT over HTTPS.
1

Start the server locally

Build the widgets (if applicable) and start the development server:
# Build the widget HTML files
npm run build:widgets

# Start the MCP server with hot reload
npm run dev
Your server will be running at http://localhost:3000 (TypeScript) or http://localhost:8000 (Python) with the MCP endpoint at /mcp. Keep this running in one terminal.
2

Expose your server with ngrok

ChatGPT needs an HTTPS URL to connect to your MCP server. Use ngrok to create a tunnel:
ngrok http 3000   # or 8000 for the Python example
ngrok will provide a public URL like https://abc123.ngrok-free.app. Your MCP endpoint is at https://abc123.ngrok-free.app/mcp.
3

Configure Content Security Policy domains

Configure CSP domains in your OpenAI app settings so the checkout widget can load Gr4vy Embed:
  • connectDomains: ["api.*.gr4vy.app"]
  • resourceDomains: ["cdn.*.gr4vy.app"]
  • frameDomains: ["*.gr4vy.app"]
These are optional during local development with ngrok, but required in production. Without them, Gr4vy Embed will fail silently.
4

Connect to ChatGPT

  1. Open ChatGPT (a Pro, Business, Team, or Enterprise subscription is required).
  2. Enable Developer Mode in your ChatGPT settings.
  3. Navigate to Settings → Apps (or the equivalent in your ChatGPT version).
  4. Click Create App.
  5. Paste your MCP endpoint URL: https://abc123.ngrok-free.app/mcp
  6. ChatGPT auto-discovers your tools (list_products, show_cart, start_checkout) and resources.
Start a new conversation in ChatGPT and enable the app:
Screenshot of ChatGPT showing the option to enable the app in a conversation
  • Ask “What plants do you have?” — the catalog widget should appear inline.
  • Filter, add a few items, then click Proceed to Checkout — the checkout widget should appear with a Gr4vy payment form.
  • Enter a test card and submit — the onComplete callback should fire with a transaction ID.
5

View transaction in Gr4vy Dashboard

After a successful payment, the transaction appears in your Gr4vy dashboard where you can manage routing rules, payment methods, and orchestration.
6

Deploy to production

Deploy your MCP server to any hosting provider that supports your runtime:
  1. Set all Gr4vy environment variables (GR4VY_ID, GR4VY_PRIVATE_KEY or GR4VY_PRIVATE_KEY_PATH, GR4VY_MERCHANT_ACCOUNT_ID, GR4VY_ENVIRONMENT, GR4VY_WEBHOOK_SECRET) on your hosting provider.
  2. Build the widgets and server as part of your deploy pipeline (npm run build for TypeScript, or pip install . for Python).
  3. Use the appropriate start command for your runtime (npm start for TypeScript, python server.py for Python).
  4. Update your ChatGPT App’s MCP URL to point at your production HTTPS domain.
  5. Register the production webhook URL in your Gr4vy dashboard (https://your-domain.com/webhooks/gr4vy) if you enabled webhook verification.
  6. Switch GR4VY_ENVIRONMENT from sandbox to production once you are ready.
Once these are in place, your ChatGPT app is live and ready to accept real payments through Gr4vy.