ChatGPT Apps MCP Server

# Quick Start Guide Get your ChatGPT App running in 5 minutes! ## Step 1: Build the Components ```bash npm run build ``` This creates the calculator widget in the `assets/` folder. ## Step 2: Start the Server ```bash npm run server ``` You should see: ``` MCP Server listening on http://localhost:8000 SSE stream: GET http://localhost:8000/mcp Message post endpoint: POST http://localhost:8000/mcp/messages?sessionId=... ``` ## Step 3: Expose with ngrok In a new terminal: ```bash ngrok http 8000 ``` You'll get a URL like: `https://abc123.ngrok-free.app` ## Step 4: Add to ChatGPT 1. Go to **ChatGPT** (web or app) 2. Click **Settings** > **Connectors** 3. Click **Add Connector** 4. Enter your ngrok URL + `/mcp`: ``` https://abc123.ngrok-free.app/mcp ``` 5. Save ## Step 5: Test It! 1. Start a new conversation in ChatGPT 2. Click **More options** > Select your connector 3. Ask: - "Show me a calculator" - "Open calculator" - "Calculate 5 + 3" The interactive calculator widget should appear in ChatGPT! ## What Just Happened? 1. **MCP Server** - Your server exposes tools via the Model Context Protocol 2. **Calculator Tool** - When invoked, it returns a reference to your React component 3. **ChatGPT** - Fetches and renders your component inline in the conversation 4. **window.openai** - Your component can interact with ChatGPT through this API ## Next Steps - **Customize the calculator** - Edit `web/src/calculator/index.tsx` - **Add new components** - See README.md for instructions - **Deploy to production** - Set `BASE_URL` env variable and deploy ## Troubleshooting **Server won't start?** - Make sure port 8000 is free - Check that dependencies are installed: `npm install` and `cd server && npm install` **ChatGPT can't connect?** - Verify ngrok is running and the URL is correct - Make sure you added `/mcp` to the end of the URL - Check server logs for errors **Widget not rendering?** - Run `npm run build` first - Check browser console for JavaScript errors - Verify assets are accessible at your BASE_URL ## Development Tips **Hot reload during development:** ```bash # Terminal 1: Dev server for components npm run dev # Terminal 2: Server (restart after changes) npm run server ``` **See component locally:** Visit `http://localhost:4444` to test components without ChatGPT. Happy building! 🚀