# 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. {% embed url="" %} ### Getting started #### 1. Configure
Claude Web/Desktop {% @supademo/embed demoId="cmnyu0out23va1q1es93hmj4y" url="" %} 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 "" 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!
Claude Code 1. Open a terminal and run: 
claude mcp add --transport http supademo https://mcp.supademo.com/mcp
(Add `--scope user` if you want it available across all your Claude Code projects. Default scope is local, i.e. this project only.) 2. Start (or restart) Claude Code in your project, then run the `/mcp` slash command. 3. In the `/mcp` panel, select **Supademo**, then choose **Authenticate** — your browser will open to Supademo's login and redirect back after OAuth completes. 4. Back in `/mcp`, confirm the status shows **connected**. Type `/` and you should see Supademo tools appear in autocomplete. 5. Use it by prompting in the chat — e.g. "list my Supademo workspaces" or "upload this image to my demo."
ChatGPT {% @supademo/embed demoId="cmo7fnqcj1z4x37n2vaxfxytl" url="" %} > Note: Supademo MCP isn't an OpenAI-verified connector yet, so you'll need to enable **Developer mode** to add it as a custom app. This is flagged by ChatGPT as elevated risk — fine for your own use, but each teammate sees the same warning. 1. In ChatGPT, click your profile (bottom-left) and select **Settings**. 2. In the sidebar, select **Apps**. 3. Click **Advanced settings** (next to "Create app"). 4. Toggle **Developer mode** on, then click **Back**. 5. Click **Create app** in the top right. 6. In the **New App** modal, fill in: * **Name**: Supademo * **MCP Server URL**: `https://mcp.supademo.com/mcp` * **Authentication**: OAuth (from the dropdown) 7. Tick **"I understand and want to continue"** at the bottom, then click **Create**. 8. ChatGPT will prompt you to authenticate. Sign in with your Supademo account in the popup and approve access. 9. Back in **Settings → Apps**, Supademo should now appear under **Enabled apps** alongside GitHub. 10. Use it in any chat by mentioning Supademo in your prompt, or by clicking the **+ / Tools** picker in the composer and selecting Supademo.
Cursor 1. Open Cursor and press `Cmd + Shift + J` (macOS) or `Ctrl + Shift + J` (Windows/Linux) to open Cursor Settings. 2. In the sidebar, select **Tools & Integrations** (older builds: **Features → MCP**). 3. Click **+ Add Custom MCP** (or **New MCP Server**) — this opens `~/.cursor/mcp.json` for editing. 4. Add the Supademo entry inside `mcpServers`, save, and close: 
{
     "mcpServers": {
       "Supademo MCP": {
         "url": "https://mcp.supademo.com/mcp"
       }
     }
   }
5. Back on the **Tools & Integrations** page, click the **Needs Login / Authenticate** button that appears next to "Supademo MCP". 6. A browser window opens on Supademo — sign in and approve access. Cursor will redirect back automatically. 7. Confirm the entry shows a green dot and the Supademo tools appear under **Available Tools**. 8. Open the chat panel (`Cmd + L`), switch the mode selector to **Agent**, and prompt normally. Cursor will invoke Supademo tools as needed (asking for approval on each tool the first time).
#### 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
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.
**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.
{% hint style="warning" %} **Important Note** Once you've applied changes via the MCP, be sure to do a **hard refresh (Command + Shift + R)** on your Supademo page. {% endhint %} #### 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="" %} *** ### Available features in Supademo MCP #### Workspaces & Demos | Tool | What it does | Key capabilities | | ----------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------- | | `list_workspaces` | List workspaces you have access to | Returns id, name, role, plan | | `list_demos` | List demos in a workspace | Search by title, filter by folder, paginate, scope: `me` or `workspace` | | `get_demo` | Fetch full demo tree | Include: `steps`, `hotspots`, `chapters`, `buttons`, `formFields`, `links` | | `duplicate_demo` | Clone a demo with all content | Auto-titles `"(Copy)"` — rename via `update_demo_settings` | | `merge_demos` | Combine 2–50 demos into a new one | Array order = step order; optional title & `shared` flag | | `move_demos` | Move demos between locations |

Personal, Shared, or Folder

(up to 100 at once)

| #### Edit Demo Settings | Field group | What you can change | Example fields | | ----------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Title & state** | Rename, archive, restore | `title`, `archived` | | **Appearance** | Brand, watermark, layout | `color`, `font`, `darkmode`, `border`, `fullWidth`, `topBar`, `brandLogo`, `watermarkText`, `watermarkLink`, `showWatermark`, `mobileHotspotView` | | **Background** | Demo-level background | `background: { type, value }` — Color, CustomColor, Gradient, Pattern, Url | | **CTA** | Global call-to-action button | `text`, `color`, `textColor`, `link` | | **Behavior / Autoplay** | Playback controls | `autoplay`, `autoplayDuration`, `autoPlayDelay`, `loop`, `showPlayPause`, `progressBar`, `showPlayBar`, `nextButton`, `showSteps`, `customizePerStep` | | **Sharing** | Visibility & access | `shared`, `allowDuplicate`, `allowExternalComments`, `indexable`, `displayAuthor`, `displayDescription`, `domainURL`, `showSupademoLink`, `sendNotification` | | **Hotspot defaults** | Defaults for new hotspots | `textVisible`, `animationVisible`, `opacity` | | **Metadata / SEO** | Embed & preview metadata | `metaDescription`, `customMetadataImage`, `detectBrowserLanguage`, `showCCButton` | | **Audio** | Background music | `recordOwnVoice`, `backgroundMusicUrl`, `backgroundMusicVolume` | #### Steps | Tool | What it does | Key capabilities | | --------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `create_steps` | Add regular or chapter steps | Regular: `image` + `text`; Chapter: `chapterType` (Password, Link, Form) + `chapter` block with buttons/formFields; `position` to insert | | `update_steps` | Edit step content & display | `text`, `customDescription`, `image`, `mediaFitMode` (Cover/Contain), `mediaAlignMode` (Center/Top/Bottom/Left/Right), `backdrop` (None/Light/Dark), `playbackRate`, `duration`, `transition`, **zoom** (`zoomPositionX/Y`, `zoomWidth` — height auto-calculated; set all to null to remove) | | `delete_steps` | Remove steps (1–100 at once) | Auto-renumbers remaining steps | | `copy_steps` | Duplicate steps | Same-demo: specify `stepIds`; cross-demo: copies all | | `reorder_steps` | Rearrange step order | Provide all step IDs in desired order | #### Hotspots | Tool | What it does | Key capabilities | | ----------------- | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `create_hotspots` | Add hotspots to steps | `style` (Circle/Tooltip/Area/Anchor/Pointer/Modal), `animation` (Ripple/Spinner/Pulse/Ping), `position` (x/y %), `size`, `colors` (bg/text), `hotspotWidth` (Small/Medium/Large), `borderRadius`, `textAlign`, `text` | | `update_hotspots` | Edit hotspot styling & navigation | All of the above, plus `isVisible`, `textVisible`, `tooltipPosition`, `htmlValue`, **`nextButton`** & **`backButton`** (`enabled`, `text`, `action` Slide/ExternalUrl, `url`, `bgColor`, `textColor`) | | `delete_hotspots` | Remove hotspots by ID | Batch by `{stepId, hotspotId}` pairs | #### Chapters | Tool | What it does | Key capabilities | | ----------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `update_chapters` | Edit chapter layout, buttons & forms | `type`, `heading`, `description`, `theme`, `layout`, `enabled`, `skip`, `password`, `emailValidationMode`, `emailDomainList`, `coverImageType/Source`, `logoEnabled/Source`. **Buttons** (inline CRUD): `content`, `btnColor`, `color`, `linkTxt`, `isLinkExternal`, `openInNewTab`, `animation`, `order`. **Form fields** (inline CRUD): `fieldType` (SingleLineText/Dropdown/Textarea), `label`, `placeholder`, `required`, `options`, `businessFieldType` | | `delete_chapters` | Remove chapter blocks from steps | Deletes chapter, buttons, and form fields | #### Folders | Tool | What it does | Key capabilities | | --------------- | --------------------------- | ------------------------------------------------------------------ | | `list_folders` | List folders with hierarchy | Filter by `type` (Demo/Showcase), nest via `parentId` | | `create_folder` | Create a folder | `personal` (true/false), `parentId` for nesting, `type` | | `rename_folder` | Rename a folder | 1–255 chars | | `delete_folder` | Delete folder | Archives (doesn't permanently delete) contained demos & subfolders | #### Tags | Tool | What it does | Key capabilities | | --------------- | ---------------------------- | ----------------------------------------------------------------------------------- | | `list_tags` | List workspace tags | Returns id, name, color, demo/showcase counts | | `manage_tags` | Batch create/update/delete | Actions: `create` (name + optional color), `update` (by tagId), `delete` (by tagId) | | `set_demo_tags` | Attach/detach tags on a demo | Modes: `replace`, `add`, `remove` | #### Voiceovers & Audio | Tool | What it does | Key capabilities | | ----------------------- | ---------------------------- | -------------------------------------------------------------------------------------- | | `list_voices` | List TTS voices | 70+ built-in ElevenLabs voices across accents; cloned voices (Growth/Enterprise only) | | `generate_voiceovers` | Set text + generate AI audio | Per-step text, voice ID, `speed` (0.7–1.2), `stability` (0.3–1.0); up to 75 steps/call | | `delete_voiceover` | Remove voiceover audio | Target specific `stepIds` or all steps | | `list_background_music` | List BG music tracks | Preset library + workspace-uploaded custom tracks | #### Trackable Links | Tool | What it does | Key capabilities | | -------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `manage_links` | Batch create/update/delete trackable demo links | `create` with `variables` (name, email, company, role, etc.) + `expiresAt`; `update` to change expiry or avatar colors; `delete` by linkId | #### Media Uploads | Tool | What it does | Key capabilities | | ---------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `get_upload_url` | Get signed S3 URL for images | Purposes: `brand-logo`, `watermark-logo`, `metadata-image`, `background-image`, `chapter-cover`, `chapter-logo`, `step-image`. Returns `uploadUrl` (PUT target) + `cdnUrl` to reference in other tools | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.supademo.com/customize/mcp-server.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.