MCP 服务器

MCP Lab Workshop

MCP server for controlling a real-time interactive dashboard deployed on Cloudflare Workers. It provides tools to toggle features, update statistics, set messages, and simulate traffic.

README

🚀 MCP Lab Workshop

Learn Model Context Protocol (MCP) with Cloudflare Workers

</div>

🎯 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

🎨 Interactive Dashboard - A beautiful dark-themed web app with real-time stats
🔧 MCP Server - A fully functional MCP server with 8 tools to control the dashboard
📡 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:

✅ Clone the repo to your GitHub
✅ Create a KV namespace automatically
✅ Deploy TWO workers: mcp-demo-app (dashboard) and mcp-server (MCP tools)
✅ 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

Tool	Description	Example
`toggle_feature`	Toggle features on/off	Toggle dark mode
`update_stats`	Change dashboard numbers	Set visitors to 9999
`set_message`	Update banner message	"Hello Interns! 👋"
`get_state`	View current app state	Get all settings
`reset_demo`	Reset to defaults	Clean slate
`simulate_traffic`	Generate fake activity	Simulate high traffic
`enable_all_features`	Turn on all features	Enable everything
`disable_all_features`	Turn off all features	Disable everything

💡 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)

Click "Deploy to Cloudflare"
Authorize GitHub and Cloudflare
Get your live URLs

Part 2: Explore the Dashboard (10 min)

Open the dashboard URL
See the dark-themed interface
Observe the stats and features

Part 3: Connect MCP Client (10 min)

Add MCP server to OpenCode
List available tools
Verify connection

Part 4: Control the Dashboard (15 min)

Toggle dark mode
Update statistics
Change the message
Simulate traffic
Watch real-time updates!

Part 5: Explore the Code (15 min)

Review MCP server implementation
Understand tool schemas
See KV storage in action
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