{"slug": "how-i-built-a-remote-mcp-server-so-ai-agents-can-build-product-demos", "title": "How I built a remote MCP server so AI agents can build product demos", "summary": "A developer built a remote Model Context Protocol (MCP) server for Demo My Product, a tool that turns screenshots into clickable product walkthroughs, allowing AI agents like Claude, Cursor and ChatGPT to create and publish demos directly. The server runs at a single URL using Streamable HTTP with OAuth-based authentication, and on the Pro plan it can screenshot a public URL and return the page's buttons and links so agents place hotspots on real elements instead of guessing coordinates from pixels.", "body_md": "I build [Demo My Product](https://demomyproduct.com). It makes clickable product walkthroughs out of screenshots. You can click through an example without signing up: [https://demomyproduct.com/d/zs2pfbuwu2](https://demomyproduct.com/d/zs2pfbuwu2)\n\nMost of the work in building a demo is repetitive. You upload screenshots and put them in order. You write a title for each step, draw a hotspot on the button that matters, and write a tooltip. Then you blur any email addresses before anyone sees them. It's structured, tedious work, and I wanted an AI agent to do it. So the product ships with a remote MCP (Model Context Protocol) server, and Claude, Cursor or ChatGPT can build and publish a demo for you.\n\nThis post covers how it's put together and the decisions I made along the way.\n\nFirst, the data model in plain terms. A demo is a list of steps. Each step is an image with hotspots on it. A hotspot has a tooltip and a click action: go to the next step, jump to any step, open a link, or end the demo.\n\nYou can blur areas of a step. The blur is rendered into the published image, not laid over it, so the original pixels never reach the viewer. A published demo gets a public link, an iframe embed, and a per-step funnel showing views, completion and where people drop off.\n\nThe model is small and explicit, so an agent can reason about it well. \"Put a hotspot on the main button of each screenshot and publish it\" maps cleanly onto a handful of operations.\n\nA lot of MCP servers are local processes you install with npm or pip. I went with a remote server at a single URL:\n\n```\nhttps://demomyproduct.com/mcp\n```\n\nThe agent works against *your account*, not your filesystem. Demos, screenshots and published links all live in the app, so the server belongs next to the app. Going remote also means:\n\nThe server uses Streamable HTTP: JSON-RPC over POST to a single URL. A request without a token gets a standard MCP auth challenge:\n\n```\nPOST https://demomyproduct.com/mcp   (no token)\n→ 401 {\"jsonrpc\":\"2.0\",\"error\":{\"code\":-32000,\"message\":\"missing authorization header\"}}\n→ WWW-Authenticate: Bearer resource_metadata=\"https://demomyproduct.com/.well-known/oauth-protected-resource/mcp\", scope=\"demos\"\n```\n\nThe protected-resource metadata points the client at the authorization server, `https://demomyproduct.com/api/auth`. That server publishes:\n\n`registration_endpoint`, so clients can use `openid profile offline_access demos`\nSticking to the spec is what lets \"paste a URL and it works\" hold in every client. The first time an agent connects, your browser opens Demo My Product. You sign in (or create an account), check the agent's name, and press Allow. I care about that screen showing the agent's name. You should know which client you're granting access to.\n\nConnecting from Claude Code is one line:\n\n```\nclaude mcp add --transport http demomyproduct https://demomyproduct.com/mcp\n```\n\nThen run `/mcp`, pick `demomyproduct` and authenticate. In claude.ai or Claude Desktop, go to Settings → Connectors → Add custom connector. In Cursor, it's Settings → MCP. ChatGPT works in workspaces that have custom connectors enabled.\n\nAn agent can do anything you can do in the editor. It can list and create demos, add screenshots, write step titles, place hotspots and tooltips, blur sensitive areas, change a demo's settings, and publish.\n\nScreenshots are the awkward part. I don't push image data through tool arguments. The agent asks for a **one-time upload link** and sends the image there (PNG or JPEG, up to 10 MB). The server turns it into a step. This works for any page, including ones behind a login, because the agent supplies the image itself.\n\nOn the Pro plan there's a second route. The agent gives the server a public URL. The server opens it in a browser, takes the screenshot, and **returns the buttons and links on the page**. That last part matters most. Without it, the agent would be guessing hotspot coordinates from pixels. With the element list, hotspots land on the actual button.\n\nPages that need a sign-in can't be captured this way. For those, the agent falls back to uploading its own screenshots.\n\nThe agent acts as you, with your plan's limits. It can publish as many demos as your plan allows. It can only capture pages on Pro. Publishing needs a verified email address. There are also rate limits: 120 calls a minute, 60 uploads an hour and 30 captures an hour.\n\nEverything the agent creates shows up in the normal editor. You can review and change it before or after publishing. That was deliberate. I don't want the agent's output to be a black box. It's a first draft you can fix by hand.\n\nThe app is built on Next.js and uses Stripe for billing.\n\nThese are the prompts I start from:\n\nThe guide to connecting an agent is at [https://demomyproduct.com/help/build-demos-with-ai-agents](https://demomyproduct.com/help/build-demos-with-ai-agents). The free plan publishes one demo with no card needed, and the agent works on it.\n\nThe feedback I want most is on the agent workflow. Which tools did you expect that aren't there? Where does the agent get things wrong? Leave a comment and I'll answer here.", "url": "https://wpnews.pro/news/how-i-built-a-remote-mcp-server-so-ai-agents-can-build-product-demos", "canonical_source": "https://dev.to/michaelfreeman_dmp/how-i-built-a-remote-mcp-server-so-ai-agents-can-build-product-demos-3n3b", "published_at": "2026-10-10 05:24:32+00:00", "updated_at": "2026-10-10 05:30:34.329745+00:00", "lang": "en", "topics": ["ai-agents", "agent-protocols", "developer-tools", "ai-tools"], "entities": ["Demo My Product", "Model Context Protocol", "Claude", "Cursor", "ChatGPT", "Claude Code", "Claude Desktop"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/how-i-built-a-remote-mcp-server-so-ai-agents-can-build-product-demos", "markdown": "https://wpnews.pro/news/how-i-built-a-remote-mcp-server-so-ai-agents-can-build-product-demos.md", "text": "https://wpnews.pro/news/how-i-built-a-remote-mcp-server-so-ai-agents-can-build-product-demos.txt", "jsonld": "https://wpnews.pro/news/how-i-built-a-remote-mcp-server-so-ai-agents-can-build-product-demos.jsonld"}}