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.

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.

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

Getting started

1. Configure

Claude Web/Desktop

1. Open 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!

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

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 or Desktop App. 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

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."

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.

Important Note

Once you've applied changes via the MCP, be sure to do a hard refresh (Command + Shift + R) on your Supademo page.

4. Give us feedback!

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

---

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 "<original>(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

Analytics

Query demo performance data, viewer sessions, and engagement metrics directly through your AI assistant. These tools are optimized to generate rich visualizations and graphs — not just tables.

Tool	What it does	Example prompt
get_top_performing_demos	Rank demos by views, engagement, or completion	"Which demos got the most views in the last 30 days? Show me the top 5 with engagement and completion rates, and how they compare to the previous period."
get_demo_analytics	Full analytics breakdown for a specific demo	"Give me a full analytics breakdown for [demo name] over the last 30 days — total views, unique views, engagement, completion, and how each step performed."
get_demo_sessions	Individual viewer sessions with details	"Who has been viewing [demo name] in the last 30 days? Show me the individual viewer sessions with their email, location, how many times they viewed it, and whether they completed it."
get_device_analytics	Device, browser, and location breakdown	"What devices, browsers, and countries are my demo viewers coming from over the last 30 days?"
get_demo_hotspot_performance	Hotspot click performance and drop-offs	"Show me the hotspot click performance for [demo name] — which steps are people clicking through and where are they dropping off?"