# DemoPage docs: build your demo from your code

> Connect your AI coding tool to DemoPage. It reads your code on your machine, maps your product's screens and flows, and sends the map. Each page waits for you to approve it, then gets checked in a demo browser. Your source code, secrets, and customer data are not sent.

Your portal is at https://app.demopage.io/portal.

## Connect your tool

In your portal, open Build your demo from your code. The DemoPage server is https://app.demopage.io/mcp.

- Cursor: press Add to Cursor.
- Claude Code: run claude mcp add --transport http demopage https://app.demopage.io/mcp
- Codex: run codex mcp add demopage --url https://app.demopage.io/mcp
- ChatGPT: in Settings, then Security and login, turn Developer mode on. Then under Plugins, press +, paste the server address, and choose OAuth.

![The Build your demo from your code step: the server address, an Add to Cursor button, setup lines for Claude Code, Codex, and ChatGPT, and Connected tools.](https://storage.googleapis.com/demopage-media/docs/ai-tools.0c21ea871c73.webp)

## Sign in and allow it

1. Ask your tool to create your DemoPage from this repo.
2. It opens a DemoPage sign-in. Sign in with your DemoPage account.
3. Read what it will be able to do and what it can't, then press Allow.

![Allow Codex to use DemoPage? A list of what it will be able to do and what it can't, with Allow and Deny buttons.](https://storage.googleapis.com/demopage-media/docs/ai-consent.cfd73dfae8f7.webp)

## Approve what it finds

- Pages your tool sends arrive held. None goes into a demo until you approve it.
- Ask the tool to list them and approve the ones you want. It approves only when you ask.
- Approved pages are checked in a demo browser. Any that don't load stay out.

## The guided prompt and the plugin

- The DemoPage server offers a create-demopage prompt with the full guide to mapping your code. In Claude Code, it's /mcp__demopage__create-demopage.
- Or install the DemoPage plugin from github.com/gaufire/demopage-plugins.

## Disconnect a tool

Your portal lists connected tools and when each was last used. Press Disconnect to end one. Changing your password ends every connection.

## More guides

- [Set up DemoPage](https://demopage.io/docs.md): From sign-up to a live demo on your site: pages, embed, leads, and signed-in screens.
- [Add the demo button to your site](https://demopage.io/docs/add-to-your-site.md): Paste one script tag on any site builder, or use your own button.
- [Choose pages, and who gets a live demo](https://demopage.io/docs/pages-and-access.md): Keep the pages the demo may show, and decide whose live demo waits for you.
- [Show your product, signed in](https://demopage.io/docs/demo-login.md): Give the guide a sandbox login so it can learn the product, then pick the pages a customer may see.
- [Get lead alerts in Slack](https://demopage.io/docs/slack-alerts.md): Post who watched your demo, what they asked, and a recap link into a Slack channel.
- [Connect your CRM](https://demopage.io/docs/crm.md): Record a demo for each new lead from HubSpot or Zapier.
- [Read your demo results](https://demopage.io/docs/results.md): What each number means, the questions buyers asked, and your latest leads.