Azure OpenAI Web Browsing MCP Server

## Prerequisites - **Node.js**: Version 18 or higher (install from [nodejs.org](https://nodejs.org/)). - **Azure OpenAI Account**: Sign up at [Azure Portal](https://portal.azure.com/), create an OpenAI resource, deployment (e.g., `gpt-4o`), and obtain API key/endpoint. - **Playwright**: Installed automatically via `npx playwright install`. - **ngrok or Cloudflare Tunnel** (for local exposure): Free accounts at [ngrok.com](https://ngrok.com) or [cloudflare.com/tunnel](https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/tunnel-guide/local/). - **ChatGPT Desktop App**: Latest version with Developer Mode enabled. ## Setup for ChatGPT Desktop ### Option 1: Using Developer Mode (Recommended) 1. Open ChatGPT Desktop → **Settings** → **Apps & Connectors** → **Advanced settings** → Enable **Developer Mode**. 2. Go to **Settings** → **Apps & Connectors** → **Create** (or "New Connector"). 3. Enter the MCP server URL (e.g., `https://your-ngrok-url.ngrok-free.app/mcp` for remote, or local if tunneled). 4. Add authentication if required (e.g., headers with API keys via JSON config). 5. Save and test the connector. The server exposes tools like `browser_navigate` and `browser_screenshot`. ### Option 2: Local Server Setup 1. Follow **Start Command** above to run the server on `http://localhost:8787`. 2. Expose via HTTPS (MCP requires it): - **ngrok**: `ngrok http 8787` → Copy HTTPS URL (e.g., `https://abc123.ngrok-free.app`). - **Cloudflare Tunnel**: Install `cloudflared`, run `cloudflared tunnel --url http://localhost:8787` → Use provided URL. 3. Use the full `/mcp` endpoint URL (e.g., `https://abc123.ngrok-free.app/mcp`) in ChatGPT Developer Mode. ## Configuration Examples ### Basic Setup Minimal `.env` file: ```env AZURE_OPENAI_API_KEY=your_key AZURE_OPENAI_ENDPOINT=https://your-resource.openai.azure.com/ AZURE_OPENAI_DEPLOYMENT_NAME=gpt-4o PORT=8787 ``` Run `npm start`. ### Advanced Setup Add to `.env` for stealth mode and proxies: ```env AZURE_OPENAI_API_KEY=your_key AZURE_OPENAI_ENDPOINT=https://your-resource.openai.azure.com/ AZURE_OPENAI_DEPLOYMENT_NAME=gpt-4o PLAYWRIGHT_STEALTH=true HTTP_PROXY=http://your-proxy:port # Optional MAX_CONCURRENT_BROWSERS=5 ``` Restart server. ### Production Setup - Use PM2: `npm install -g pm2`, then `pm2 start npm --name "mcp-browser" -- start`. - Secure with Azure Key Vault for secrets. - Deploy to Azure App Service or Vercel with HTTPS enforced. - Add `MCP_AUTH_TOKEN=your_token` to `.env` and configure ChatGPT connector headers: ```json { "headers": { "Authorization": "Bearer your_token" } } ``` ## Using with ChatGPT - **Available Tools**: `browser_navigate` (go to URL), `browser_screenshot` (capture image), `browser_click` (interact), `browser_extract` (scrape text), powered by Playwright and Azure OpenAI for intelligent actions. - **Example Prompts**: - "Navigate to https://news.ycombinator.com and list top 5 stories." - "Check current weather in NYC by browsing weather.com and screenshot the forecast." - "Verify if example.com is up, then summarize its homepage." - **Limitations/Considerations**: - Rate limits on Azure OpenAI and websites. - Playwright detects bots; use stealth mode. - Headless browser only; no GUI. - Ensure HTTPS tunneling for local runs. ## Troubleshooting - **Server not starting**: Check Node version (`node -v`), missing deps (`npm install`), or invalid Azure creds (test with `curl` to endpoint). - **Connection refused in ChatGPT**: Verify HTTPS URL with `/mcp` (e.g., `curl https://your-url/mcp`), ngrok not expired. - **Playwright errors**: Run `npx playwright install --with-deps`, check browser permissions. - **Tool failures**: Logs in terminal; increase `DEBUG=mcp*` env var. Azure quota exceeded? Check portal. - **Auth issues**: Match headers in ChatGPT connector with server `MCP_AUTH_TOKEN`. - **ngrok free limits**: Upgrade or use Cloudflare for persistent tunnels.