EdgeOne Pages MCP 入门教程

news2025/5/13 19:36:54

什么是MCP？

MCP (Model Context Protocol) 是一个开放协议，允许 AI 模型安全地与本地和远程资源进行交互。通过在支持 MCP 的客户端（如 Cline、Cursor、Claude 等）上进行统一配置，可以让 AI 访问更多资源并使用更多工具。

EdgeOne Pages Deploy MCP 简介

EdgeOne Pages Deploy MCP 是腾讯云推出的一项革命性服务，可以通过一句话指令快速将 Web 静态资源内容部署到 EdgeOne Pages，并生成公共访问链接。这使您能够在项目构建后立即预览和分享 AI 生成的网页内容或产品。

短短几秒钟内，AI 便能完成所有构建操作，这或许是目前全球最简便的建站方案！

借助 CDN 网络与边缘计算技术，EdgeOne Pages MCP 显著简化了传统 Web 开发的繁复流程：

CDN加速：通过全球分布的节点，缓存网站各类静态资源（如 JS、CSS、图片、视频等），当访客请求数据时，可直接从最近节点获取资源，大幅提升网站加载速度
边缘计算：将业务代码部署至全球 CDN 节点，当访客访问网站时，地理位置最近的节点立即响应请求并执行代码，确保极低的延迟和稳定的高可用性

腾讯云 EdgeOne 的优势

在中国境内部署了超过 2,300 个边缘节点，访问速度远胜海外同类服务
在全球 70 多个国家设有节点分布，确保全球范围内的访问速度同样出色
实测全节点平均响应时间仅为 0.15秒，而同类产品如 Cloudflare 约为 1.13秒
目前处于 Beta 版免费公测阶段，无需 API Key 即可使用

部署模式：

部署单个 HTML 文件

快速开始

1. 环境准备

开始使用前，需要安装 NodeJS 运行环境，因为 MCP Server 本质上是一段运行在个人电脑上的 Node 程序。

2. 配置 MCP

在支持 MCP 的客户端（例如 Cursor）中，新增MCP server：

在这里插入图片描述

macOS/Linux 用户配置

在这里插入图片描述

{
  "mcpServers": {
    "edgeone-pages-mcp-server": {
      "command": "npx",
      "args": ["edgeone-pages-mcp"]
    }
  }
}

Windows 用户配置

Windows 用户需要做一点额外调整：将 npx 移至 args 数组中，同时将 command 改为 cmd，并添加 /c 参数行：

{
  "mcpServers": {
    "edgeone-pages-mcp-server": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "edgeone-pages-mcp"
      ]
    }
  }
}

配置自动执行(推荐)

为了更流畅的体验，建议开启 auto-run mode 配置。该配置开启后，AI助手会自动调用所需的 MCP 工具，无需经过手动确认。

以 Cursor 为例，在配置的 Features 部分找到 auto-run mode 选项并勾选。
在这里插入图片描述

3. 实用案例展示

案例一：表白爱心网页

只需向AI助手说一句话：“做一个表白爱心网页，增加选择按钮，无论鼠标放在哪个按钮上，那个按钮都会变成“同意”并可点击，另一个则变为“不同意”且禁用，按钮位置也会互换。并更新网页内容并发布”，几秒钟后，AI就会生成一个浪漫的表白网页并部署到公网：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表白爱心</title>
  <style>
    body {
      background: #ffe6eb;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      font-family: '微软雅黑', sans-serif;
    }
    .heart {
      width: 200px;
      height: 180px;
      position: relative;
      margin-bottom: 40px;
      animation: pulse 1.2s infinite;
    }
    .heart::before,
    .heart::after {
      content: "";
      position: absolute;
      top: 0;
      left: 100px;
      width: 100px;
      height: 160px;
      background: #ff3366;
      border-radius: 100px 100px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    .heart::after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.08); }
      100% { transform: scale(1); }
    }
    .text {
      font-size: 2rem;
      color: #d72660;
      text-align: center;
      font-weight: bold;
      text-shadow: 0 2px 8px #fff, 0 1px 1px #ffb6c1;
    }
    .from {
      margin-top: 30px;
      font-size: 1.2rem;
      color: #a8325a;
      text-align: center;
    }
    .buttons {
      margin-top: 30px;
      display: flex;
      gap: 20px;
      justify-content: center;
    }
    .agree {
      background: #ff3366;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 10px 30px;
      font-size: 1.2rem;
      cursor: pointer;
      font-weight: bold;
      box-shadow: 0 2px 8px #ffb6c1;
      transition: background 0.2s;
    }
    .agree:hover {
      background: #d72660;
    }
    .disagree {
      background: #ccc;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 10px 30px;
      font-size: 1.2rem;
      font-weight: bold;
      cursor: not-allowed;
      opacity: 0.6;
    }
  </style>
</head>
<body>
  <div class="heart"></div>
  <div class="text">我喜欢你 ❤<br>愿意做我女朋友吗？</div>
  <div class="buttons" id="buttons">
    <button id="btn1" class="agree" onclick="alert('太好了！我也很开心！')">同意</button>
    <button id="btn2" class="disagree" disabled>不同意</button>
  </div>
  <div class="from">—— David</div>
  <script>
    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');

    function setAgree(btn) {
      btn.innerText = '同意';
      btn.classList.add('agree');
      btn.classList.remove('disagree');
      btn.disabled = false;
      btn.onclick = function() { alert('太好了！我也很开心！'); };
    }
    function setDisagree(btn) {
      btn.innerText = '不同意';
      btn.classList.add('disagree');
      btn.classList.remove('agree');
      btn.disabled = true;
      btn.onclick = null;
    }
    // 鼠标移到btn2（不同意）上时，两个按钮互换效果
    btn2.addEventListener('mouseenter', function() {
      setAgree(btn2);
      setDisagree(btn1);
    });
    btn2.addEventListener('mouseleave', function() {
      setAgree(btn1);
      setDisagree(btn2);
    });
    // 鼠标移到btn1（同意）上时，恢复原状
    btn1.addEventListener('mouseenter', function() {
      setAgree(btn1);
      setDisagree(btn2);
    });
  </script>
</body>
</html>