A fun, interactive visual demo inspired by the 90's "This is your brain on drugs" PSA commercials - but positive! Shows the dramatic difference between AI without MCP (sad and isolated) vs AI with MCP (connected and powerful).
- Split-screen comparison showing "before and after"
- Animated visuals with glowing effects and floating icons
- 90's PSA aesthetic with dramatic styling
- Interactive easter eggs (click the AIs!)
- Mobile responsive for different screen sizes
- Zero dependencies - just open and run
-
[0:00-0:15] Open the page, let the animations grab attention
- Say: "Let me show you what I mean..."
-
[0:15-0:45] Point to the LEFT side (without MCP)
- Say: "This is your AI. Isolated. Can't see your database, can't access GitHub, can't connect to anything. Just sits there, waiting for you to copy-paste everything."
-
[0:45-1:15] Point to the RIGHT side (with MCP)
- Say: "This is your AI on MCP. Connected to your database, your GitHub, your docs, your entire stack. See those connections? That's MCP servers - each one unlocking new capabilities."
- Optional: Click the happy AI for the easter egg surprise
-
[1:15-1:30] Scroll to bottom, point to tagline
- Say: "MCP: Plug Claude into Everything."
- Full screen the browser - press F11 or Cmd+Shift+F before starting
- Let the animations breathe - pause after opening to let people see the contrast
- Use your pointer/cursor - circle around the floating icons on the right
- Play with the easter eggs if audience seems engaged (click the AIs)
- Timing is key - don't rush, let the visual do the talking
-
Open the file:
cd ~/mcp-demo open index.html
Or just double-click
index.html -
Browser recommendations:
- Chrome/Edge (best animation performance)
- Firefox (good)
- Safari (works but some animations may be slightly different)
-
Before presenting:
- Close other tabs/windows
- Disable browser notifications
- Check that animations are smooth
- Test both easter eggs (click each AI)
Want to tweak it? Easy edits:
Change the icons on the right side:
- Line 335-338: Change the emojis (🗄️📁💬🔧) to whatever tools you want to highlight
- Examples: 🐘 (Postgres), 🐙 (GitHub), 📊 (Analytics), ☁️ (Cloud)
Update the feature lists:
- Lines 288-294: "Without MCP" features
- Lines 309-315: "With MCP" features
Modify the tagline:
- Line 327: Change "PLUG CLAUDE INTO EVERYTHING"
Adjust colors:
- Line 75-76: Without MCP background (currently red tint)
- Line 78-79: With MCP background (currently green tint)
The demo includes two fun interactions:
- Click the sad AI (left): Gets a sad message about wanting MCP
- Click the happy AI (right): Gets an excited message about being connected
Use these if:
- You're presenting to a technical audience who might explore
- You want a laugh during Q&A
- Someone asks "can I try it?"
Beyond the 4-minute pitch:
- Booth demo at conferences (runs on loop)
- Website embed for explaining MCP
- Social media (screenshot the comparison)
- Onboarding new team members to MCP concept
- Internal presentations to non-technical stakeholders
If the demo doesn't load or animations glitch:
- Have a screenshot ready
- Say: "Imagine this..." and describe the visual
- Move on quickly - the concept is simple enough
index.html- The complete demo (single file, no dependencies)README.md- This file
Ideas for enhancements (if you have time):
- Add sound effects (egg cracking vs. power-up sound)
- Animate connection lines from nodes to the center AI
- Add a "transformation" animation (click button to see AI transform from sad to happy)
- Add real MCP server names as tooltips on the floating icons
- Create a "loading" sequence showing MCP servers connecting one by one
This demo was built to illustrate a concept quickly and memorably. It's meant to be FUN, not comprehensive. The detailed technical stuff comes after you've got their attention with this visual hook.
Remember: Show, don't tell. Let the visual do the work, then explain MCP's technical power.