# MCP Server

### What is an MCP? How does it work with Supademo?

The Supademo Model Context Protocol (MCP) server gives compatible AI models and agents a secure, standardized way to access and work with demos on your Supademo workspace. 

That means tools like Claude, ChatGPT, or Gemini can help with real demo workflows like listing demos, updating hotspot or voiceover text, replacing outdated screenshots, generating trackable links in bulk, and organizing folders - using natural language instead of manual step-by-step editing.

### Overview

Supademo MCP makes it easier to turn natural-language requests into real demo work. Any editing or personalization that is available within the Supademo editor is now available through Claude, ChatGPT, Gemini, and more.

{% hint style="info" %}
**Here's an example LLM prompt that would update a Supademo via MCP:**\
\
Update this Supademo (cmewzomb200ci0m0jgnfi4xgm) by ensuring each step has a zoom applied to it, in variations of 70-100%, centered around the hotspot. Next, update the all of the hotspots to be black (#000) and change the hotspots to have a dark backdrop, and set the labels to be "Previous" and "Next" with a yellow (#FFC000) background color. 
{% endhint %}

This is especially useful for teams managing many demos across multiple personas, use cases, regions, or stages of the funnel.

<figure><img src="https://3896040775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL3ayyYPPw0hy6Yn2UhX0%2Fuploads%2FhHdOsB6u0A1VrCPLa5RF%2Fscreenshot-04_08%2C%2003_19_50%20PM.jpg?alt=media&#x26;token=1f247960-88cb-477e-bafd-88b2ca9cba5e" alt=""><figcaption></figcaption></figure>

#### Common use cases

<details>

<summary><strong>Create and organize demo libraries</strong></summary>

* List all workspaces and folders
* Create folder structures for teams, products, campaigns, or customers
* Rename or archive outdated folders
* Move demos in bulk to clean up your workspace

</details>

<details>

<summary><strong>Inspect and bulk update demos faster</strong></summary>

* Pull full demo details, including steps, hotspots, chapters, and settings
* Update appearance, CTA, behavior, sharing, audio, metadata, and default hotspot settings
* Duplicate a demo to create variants for specific accounts or personas
* Merge multiple demos into one combined experience

</details>

<details>

<summary><strong>Build personalized demos at scale</strong></summary>

* Duplicate a demo and tailor it for a customer, segment, or region
* Update demo backgrounds, tags, CTAs, chapter content, and form fields
* Generate trackable links in bulk for outreach or account-based campaigns

</details>

<details>

<summary><strong>Improve onboarding and guided experiences</strong></summary>

* Replace or update steps after UI changes
* Rework hotspot copy and positions
* Refresh voiceover text and regenerate voiceovers
* Archive old demos and restore them when needed

</details>

***

### Getting started

#### 1. Configure

{% @supademo/embed demoId="cmnyu0out23va1q1es93hmj4y" url="<https://app.supademo.com/demo/cmnyu0out23va1q1es93hmj4y>" %}

<details>

<summary><strong>Claude Web</strong></summary>

1. Open [Claude.ai](https://claude.ai) in your browser and log into your account.
2. Click your Profile Icon in the bottom-left corner.
3. Select Settings > Connectors
4. Click "Add custom connector"
5. Enter in "Supademo MCP" for the title and "<https://mcp.supademo.com/mcp>" for the URL in the modal
6. Click "Connect" or "Configure" for the newly added MCP and authenticate using your Supademo account
7. Use it in the chat interface by prompting via text or voice!

</details>

<details>

<summary><strong>Claude Code</strong></summary>

Use the built-in command to handle this automatically, which is safer because it validates the connection for you.

1. Run the Add Command: Open your terminal and run:

   Bash

   ```
   claude mcp add supademo --transport sse https://mcp.supademo.com/mcp
   ```
2. Choose the Scope: The CLI will ask if you want to save this for the Current Project (`.mcp.json`) or Globally (`~/.claude/config.json`). Choose Global if you want to use Supademo in every folder you work in.
3. Verify: Run `claude mcp list` to ensure the server is active and the tools are recognized.

</details>

<details>

<summary><strong>Claude Desktop</strong></summary>

Claude Desktop does not have a "button" to add remote URLs yet. You must edit the configuration file manually.

1. Open the Config File:
   * In-App: Go to Settings > Developer > Edit Config.
   * Manual Path (macOS): `~/Library/Application Support/Claude/claude_desktop_config.json`
   * Manual Path (Windows): `%APPDATA%\Claude\claude_desktop_config.json`
2. Add the Supademo Server: Paste the following block into the `mcpServers` object. If the file is empty, wrap it in curly braces:

   JSON

   ```
   {
     "mcpServers": {
       "supademo": {
         "type": "sse",
         "url": "https://mcp.supademo.com/mcp"
       }
     }
   }
   ```
3. Restart Claude: You must fully quit (not just close the window) and restart the Claude app for the tools to appear in the chat interface (look for the 🛠️ icon).

</details>

<details>

<summary><strong>Cursor</strong></summary>

1. Open Cursor.
2. Go to Cursor Settings:
   * Mac: `Cmd + Shift + J` (or click the gear icon in the top right).
   * Windows/Linux: `Ctrl + Shift + J`.
3. Navigate to Features > MCP.
4. Click "+ Add New MCP Server".
5. Fill in the details:
   * Name: `Supademo` (or whatever you prefer).
   * Type: Select SSE (since you have a URL).
   * URL: Paste `https://mcp.supademo.com/mcp`.
6. Click Save.

Cursor will immediately attempt to "handshake" with the server. If successful, you’ll see a green dot and a list of available tools (like `create_demo` or `search_demos`).

</details>

<details>

<summary><strong>Visual Studio Code</strong></summary>

VS Code now has native support for MCP servers built into the GitHub Copilot Chat extension.

1. Open the Command Palette: `Cmd + Shift + P` (Mac) or `Ctrl + Shift + P` (Windows).
2. Run Command: Search for `MCP: Add Server`.
3. Configure:
   * Target: Select Global (to use it in all projects).
   * Name: `Supademo`.
   * Type: Select SSE.
   * URL: `https://mcp.supademo.com/mcp`.
4. Confirm Trust: VS Code will ask if you trust this server; click Yes.
5. Use it: Open Copilot Chat (`Ctrl + Alt + I`) and ask, *"Show me my Supademos"* or *"Create a demo from this code."*

</details>

<details>

<summary><strong>ChatGPT (Coming soon)</strong></summary>

{% hint style="info" icon="hourglass-clock" %}
Coming soon!
{% endhint %}

</details>

<details>

<summary><strong>Gemini (Coming soon)</strong></summary>

{% hint style="info" icon="hourglass-clock" %}
Coming soon!
{% endhint %}

</details>

#### 2. Create or choose a Supademo

If you haven't already done so, create a Supademo by using the [Chrome Extension](https://chromewebstore.google.com/detail/supademo-ai-interactive-d/jblbcpkejogbghfdglhfjlplchcnmohm) or [Desktop App.](https://supademo.com/download) After installing, you'll be able to create your first interactive demo in under five minutes.

#### 2. Prompt AI

<div><figure><img src="https://3896040775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL3ayyYPPw0hy6Yn2UhX0%2Fuploads%2F3K1r0q6P59WeKaBxJ6Ph%2FScreenshot%202026-04-08%20at%203.23.57%E2%80%AFPM.png?alt=media&#x26;token=bd4196c2-c250-48b3-bcfc-d7d13ace541c" alt=""><figcaption></figcaption></figure> <figure><img src="https://3896040775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL3ayyYPPw0hy6Yn2UhX0%2Fuploads%2FfhOgrvRtnbz0YPHIhjuF%2FScreenshot%202026-04-08%20at%203.24.18%E2%80%AFPM.png?alt=media&#x26;token=df3501e5-f883-4e3f-99a8-c515c88d81e1" alt=""><figcaption></figcaption></figure></div>

Once you have configured your MCP, you can:

1. Authenticate your IDE or LLM with Supademo
2. Prompt the agent and specify that which demo you'd like to make changes to by pasting in your Supademo's ID or link.
3. Approve any of the requests the agent makes or provide additional context as requested

{% hint style="info" %}
**Prompt tips**

1. Be as specific as you can be for the best results
2. Start with a small prompt (i.e. changing a hotspot text in a single page, changing the description of a demo, generating voiceovers). After that, you can move on to **chained prompts** that contain multiple requests in one query.<br>

**Example prompt**

"For the demo cmnq9hezs0059kwxa0b09myai, update all of the hotspots to have black (#000) background, and make all the hotspot label backgrounds `#FFEA00`. Next, generate short voiceovers for each of the steps using 'Richard Yu' as the voice, but using shorter, direct variations of the existing hotspot for the voice."
{% endhint %}

#### 3. Review and tweak changes

Visually review the changes made by the MCP server in real time by refreshing your Supademo editor. From here, you can make additional edits by prompting your AI, or by augmenting your requests with the visual Supademo editor.&#x20;

#### 4. Give us feedback!

Got an idea that would make Supademo MCP more useful for you? Drop it in the form below:

{% @supademo/embed demoId="cmnqfdeon00ksz60j7dvrgm2w" url="<https://app.supademo.com/demo/cmnqfdeon00ksz60j7dvrgm2w>" %}

<br>