Skip to main content
1

Build your widget for production

Create an optimized production build:
pnpm build
This creates:
  • Minified and optimized JavaScript
  • CSS with unused styles removed
  • Static assets with hashed filenames
  • Source maps for debugging
Output directory: dist/chatgpt/
2

Deploy your widget UI

Deploy the built widget to any static hosting service:

Vercel

Zero-config static hosting

Netlify

Simple drag-and-drop deployment

Cloudflare Pages

Fast global CDN
Upload the dist/chatgpt/ directory to your chosen platform. You’ll get a public URL like:
https://your-widget.vercel.app
The included pnpm mcp server is a dummy server for local development only. Do not use it in production.
3

Create a production MCP server

Create your own production MCP server that references your deployed UI as a resource.Your MCP server should:
  • Define the tools your widget needs
  • Return your widget UI URL as an MCP resource when tools are invoked
  • Handle any backend logic or API calls
Example MCP server configuration:
// Your production MCP server
const server = createMCPServer({
  tools: [
    {
      name: 'show-my-widget',
      description: 'Display my custom widget',
      handler: async () => {
        return {
          resource: {
            url: 'https://your-widget.vercel.app',
            type: 'ui'
          }
        };
      }
    }
  ]
});
Deploy this MCP server to a Node.js hosting service (Vercel, Railway, etc.).
4

Configure ChatGPT

Connect your production MCP server to ChatGPT:
  1. Open ChatGPT in developer mode
  2. Navigate to User > Settings > Apps & Connectors > Create
  3. Enter your MCP server URL with the /mcp path: 
    https://your-mcp-server.vercel.app/mcp
  4. Test by sending show app to ChatGPT