cf-mcp-playground

cf-mcp-playground

Enables AI clients to explore MCP concepts, retrieve quickstart guides, and ask questions with Redis-cached answers, supporting deployment on Cloudflare Workers and Docker.

Category
Visit Server

README

cf-mcp-playground

Cloudflare Worker 與 Docker 雙運行環境的 Model Context Protocol (MCP) 服務,內建 MCP Skills 知識庫 與 Redis 提問快取加速 機制。


🌟 核心特色

  1. 雙重運行環境 (Dual Runtime):
    • ⛅ Cloudflare Workers:支援 Edge 邊緣全球部署,極速冷啟動與低延遲。
    • 🐳 Docker & Node.js:提供 docker-compose.yml,一鍵啟動 MCP 服務與 Redis 容器。
  2. MCP Skills 知識庫:
    • 完整介紹什麼是 MCP、什麼是 MCP Skill。
    • 詳細比較 Tools (工具)、Resources (資源)、Prompts (提示詞) 的差異與組合模式。
    • 提供各大客戶端 (Claude Desktop, Cursor, Zed, Cloudflare) 的配置指南。
  3. Redis 重複提問秒級直答 (Smart Caching):
    • 當使用者提問時,系統會自動標準化問題並計算快取鍵。
    • Cache HIT (命中):直接從 Redis 毫秒級回傳歷史快取結果,大幅節省 Token 與延遲。
    • Cache MISS (未命中):檢索知識庫生成完整回答,自動快取至 Redis。
    • 支援 Redis 斷線自動降級為記憶體快取 (Memory Fallback),確保高可用性。

🛠️ MCP Tools & Capabilities

工具名稱 說明
explain_mcp_skill 詳細介紹什麼是 MCP 與 MCP Skill,以及與 Tool/Resource/Prompt 的差別與範例。
get_mcp_quickstart 取得 MCP 在 Claude Desktop, Cursor, Docker, Cloudflare 的快速安裝指南。
list_mcp_concepts 列出知識庫中所有核心概念清單。
ask_mcp_assistant 智能問答工具,內建 Redis 快取,重複問題直接從快取極速回答。
get_cache_stats 檢視 Redis 快取的命中次數 (Hits)、未命中次數 (Misses) 與總項目數。
clear_mcp_cache 清空快取記錄。

🚀 快速開始

方式一:使用 Docker 啟動 (包含 Redis)

# 啟動 MCP 服務與 Redis 容器
docker compose up --build -d

# 查看運行日誌
docker compose logs -f

# 停止服務
docker compose down

服務啟動後:

  • 服務首頁 / 儀表板:http://localhost:3000/
  • MCP 串流通訊端點:http://localhost:3000/mcp 或 http://localhost:3000/sse
  • 健康檢查端點:http://localhost:3000/health
  • REST 問答 API:POST http://localhost:3000/api/ask

方式二:本機開發模式 (Node.js)

# 安裝依賴
npm install

# 執行單元測試 (驗證 MCP Tools & 快取機制)
npm test

# 啟動本機開發伺服器
npm run dev:node

方式三:部署至 Cloudflare Workers

1. 登入 Cloudflare

在終端機中執行:

npx wrangler login

瀏覽器會自動開啟進行 Cloudflare 帳號授權。

若使用 CI/CD 或 API Token 登入:

export CLOUDFLARE_API_TOKEN="你的 Cloudflare API Token"
export CLOUDFLARE_ACCOUNT_ID="你的 Cloudflare Account ID"

2. 測試 Worker 本機模擬

npm run dev:worker

3. 部署到 Cloudflare 全球邊緣網路

npm run deploy

部署成功後,即可獲得專屬的 Worker 網址(例如 https://cf-mcp-playground.<your-subdomain>.workers.dev/mcp)。


🔌 在 AI 客戶端中使用

1. Claude Desktop 配置

編輯 claude_desktop_config.json:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "cf-mcp-remote": {
      "url": "https://<your-worker>.workers.dev/sse"
    },
    "cf-mcp-docker": {
      "command": "docker",
      "args": ["exec", "-i", "cf-mcp-service", "node", "dist/node-server.js"]
    }
  }
}

2. Cursor 配置

在 Cursor 介面中進入 Settings -> Features -> MCP Servers -> Add New MCP Server:

  • Name: cf-mcp-service
  • Type: sse
  • URL: http://localhost:3000/sse (本地 Docker) 或 https://<your-worker>.workers.dev/sse (遠端 Worker)

🧪 測試驗證範例

1. 測試 REST API 提問 (首次提問 - Cache MISS)

curl -X POST http://localhost:3000/api/ask \
  -H "Content-Type: application/json" \
  -d '{"question": "什麼是 MCP Skill?"}'

2. 測試相同提問 (重複提問 - Cache HIT ⚡)

curl -X POST http://localhost:3000/api/ask \
  -H "Content-Type: application/json" \
  -d '{"question": "什麼是 MCP Skill?"}'

3. 查看快取統計

curl http://localhost:3000/api/cache/stats

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured