🚀 MCP Lab Workshop

Learn Model Context Protocol (MCP) with Cloudflare Workers

🎯 What is This?

An interactive workshop for SE interns to learn about Model Context Protocol (MCP) servers. Deploy a live dashboard app that can be controlled in real-time via MCP tools.

What You'll Build

1. 🎨 Interactive Dashboard - A beautiful dark-themed web app with real-time stats

2. 🔧 MCP Server - A fully functional MCP server with 8 tools to control the dashboard

3. 📡 Real-time Connection - Watch the dashboard update live as you call MCP tools

✨ Features

Demo App

• 🌙 Dark-themed beautiful UI with Cloudflare branding

• 📊 Live statistics that update in real-time

• 🎛️ Feature toggles (Analytics, Notifications, Dark Mode, Animations)

• 📡 Activity feed showing all MCP actions

• ⚡ Server-Sent Events for instant updates

MCP Server

• 🛠️ 8 MCP Tools for controlling the dashboard

• 🔓 No authentication required - perfect for learning

• 🌍 Edge deployed - runs on Cloudflare's global network

• 📦 KV storage for state management

🚀 Quick Deploy

One-Click Deploy

Click the button above to deploy to your Cloudflare account:

The deploy process will:

1. ✅ Clone the repo to your GitHub

2. ✅ Create a KV namespace automatically

3. ✅ Deploy TWO workers: mcp-demo-app (dashboard) and mcp-server (MCP tools)

4. ✅ Give you live URLs instantly

Important: The deployment creates two separate workers. Make sure both are deployed successfully!

Manual Deploy

If you prefer to deploy manually:

# Clone the repo
git clone https://github.com/MattDMitch/mcp-lab-workshop.git
cd mcp-lab-workshop

# Install dependencies
npm install

# Login to Cloudflare
npx wrangler login

# Run deploy script (creates KV namespace and deploys both workers)
npm run deploy

This will deploy:

• ✅ mcp-demo-app - The monitoring dashboard UI

• ✅ mcp-server - The MCP tools server

🎮 Using the MCP Server

Once deployed, you'll get ONE worker with multiple endpoints:

• Dashboard: https://YOUR-WORKER-NAME.YOUR-SUBDOMAIN.workers.dev/

• MCP Server: https://YOUR-WORKER-NAME.YOUR-SUBDOMAIN.workers.dev/mcp

Both the dashboard and MCP server run in the same worker using path-based routing

Connect to MCP Server

Add the MCP server to your OpenCode or MCP client:

{
  "mcpServers": {
    "demo": {
      "url": "https://REPO-NAME-mcp.YOUR-SUBDOMAIN.workers.dev"
    }
  }
}

Available Tools

💡 Try These Examples

Toggle Dark Mode

curl -X POST https://mcp-server.YOUR-SUBDOMAIN.workers.dev/mcp/tools/call \
  -H "Content-Type: application/json" \
  -d '{
    "tool": "toggle_feature",
    "arguments": {"feature": "darkMode"}
  }'

Set Custom Message

curl -X POST https://mcp-server.YOUR-SUBDOMAIN.workers.dev/mcp/tools/call \
  -H "Content-Type: application/json" \
  -d '{
    "tool": "set_message",
    "arguments": {"message": "Welcome SE Interns! 🎉"}
  }'

Simulate High Traffic

curl -X POST https://mcp-server.YOUR-SUBDOMAIN.workers.dev/mcp/tools/call \
  -H "Content-Type: application/json" \
  -d '{
    "tool": "simulate_traffic",
    "arguments": {"amount": "high"}
  }'

Update Stats

curl -X POST https://mcp-server.YOUR-SUBDOMAIN.workers.dev/mcp/tools/call \
  -H "Content-Type: application/json" \
  -d '{
    "tool": "update_stats",
    "arguments": {"stat": "visitors", "value": 9999}
  }'

🏗️ Architecture

┌─────────────────────────────────┐
│  Demo App Worker                │
│  - Dark-themed dashboard        │
│  - Server-Sent Events           │
│  - Real-time updates            │
└────────────┬────────────────────┘
             │
             ↓
┌─────────────────────────────────┐
│  Cloudflare KV Namespace        │
│  - App state storage            │
│  - Activity logs                │
└────────────┬────────────────────┘
             │
             ↓
┌─────────────────────────────────┐
│  MCP Server Worker              │
│  - 8 MCP tools                  │
│  - Tool execution               │
│  - State management             │
└─────────────────────────────────┘

📚 Workshop Guide

Part 1: Deploy (10 min)

1. Click "Deploy to Cloudflare"

2. Authorize GitHub and Cloudflare

3. Get your live URLs

Part 2: Explore the Dashboard (10 min)

1. Open the dashboard URL

2. See the dark-themed interface

3. Observe the stats and features

Part 3: Connect MCP Client (10 min)

1. Add MCP server to OpenCode

2. List available tools

3. Verify connection

Part 4: Control the Dashboard (15 min)

1. Toggle dark mode

2. Update statistics

3. Change the message

4. Simulate traffic

5. Watch real-time updates!

Part 5: Explore the Code (15 min)

1. Review MCP server implementation

2. Understand tool schemas

3. See KV storage in action

4. Learn about SSE for real-time updates

🎓 Learning Objectives

After this workshop, you'll understand:

• ✅ What MCP is and why it's useful

• ✅ How to build an MCP server

• ✅ Tool schemas and execution

• ✅ Real-time web applications with SSE

• ✅ Cloudflare Workers and KV storage

• ✅ Edge computing concepts

🛠️ Tech Stack

• Cloudflare Workers - Serverless execution

• Workers KV - Edge storage

• MCP Protocol - Tool calling interface

• Server-Sent Events - Real-time updates

• Vanilla JS - No framework complexity

📂 Project Structure

mcp-lab-complete/
├── README.md              # This file
├── wrangler.toml          # Cloudflare config
├── package.json           # Project metadata
├── demo-app/
│   └── index.js          # Dashboard worker
└── mcp-server/
    └── index.js          # MCP server worker

🎨 Customization Ideas

For Students:

• Add new MCP tools

• Create custom themes

• Add more statistics

• Build a notification system

• Add WebSocket support

For Instructors:

• Create coding challenges

• Add quiz questions

• Build team competitions

• Create extension exercises

🔗 Resources

• Cloudflare Workers Docs

• Model Context Protocol Spec

• Workers KV Guide

• Server-Sent Events

📄 License

MIT License - Free to use for educational purposes

🙌 Credits

Built for Cloudflare SE Intern Workshops

Made with ❤️ and ☕

Ready to learn MCP?