腾讯云EdgeOnePages推出MCP Server：一句话生成并部署HTML页面

腾讯云EdgeOnePages推出MCP Server，腾讯EdgeOne Pages是什么？推出的MCP Server又是干啥用的呢？

本文章（包括MCP Server）部署流程我们一一为小伙伴们详细说明。

简单来说，EdgeOne Pages是给咱们前端开发小伙伴准备的一款前端开发和部署平台，能够用它来快速构建、部署静态站点和无服务器应用。



EdgeOne Pages有哪些优势呢？

全球加速：借助腾讯云的全球分发网络，能够将静态资源缓存到离用户最近的边缘节点，确保用户在访问时获得流畅体验，提升网站性能。

简化部署：部署流程缩短从代码编写到部署上线的时间，保证项目的快速迭代，这能够帮助企业迅速应对市场需求。

边缘 Serverless：不需要配置和管理服务器等基础设施，通过 JS 在靠近用户的边缘的节点编写超低延时的服务端逻辑。

EdgeOne Pages适用场景有哪些？

静态与动态网站托管：适合使用静态生成器，如 Next.js、Hexo 等构建的网站，以及使用 React、Vue 等现代前端框架构建的单页应用。

全栈项目开发：通过支持 Pages Functions 、KV 等能力，开发者可以在不依赖传统服务器情况下，在边缘实现轻量化的动态服务。

快速部署与迭代：通过 GitHub 等代码管理平台集成，在每次代码提交时自动构建和部署网站，简化开发部署流程，提升研发效率。

EdgeOne Pages支持哪些前端框架，如何部署？

EdgeOne Pages支持多种流行的前端框架，开发小伙伴可以使用从 Next.js 到 SvelteKit 的各种框架构建 Web 应用程序，并且在许多情况下，无需进行任何前期配置就能够完成部署。

为了帮助大家更快速地开始，EdgeOne Pages提供了一些现成的模板，创建项目时大家可以一键部署，轻松构建您的应用程序。



接下来，我们展示每个框架的基本配置，帮助大家快速在 EdgeOne Pages 上进行部署。

• Next.js

特点：Next.js 是一个基于 React 的框架，支持静态生成（SSG），非常适合构建高性能的 Web 应用和网站。

默认构建设置如下：

编译命令: npm run build

输出目录: out

在开发过程中，可以使用npm run dev启动本地开发服务器，Next.js 提供了强大的路由功能和 API 路由，适合构建复杂的应用，确保在构建前配置好 next.config.js 文件，以满足特定需求。

这里要注意，Pages 目前支持的 Next.js 需配置为静态导出模式，可尝试修改 next.config.js 如下：

/** @type {import('next').NextConfig} */const nextConfig = {  output: 'export',  // 启用静态导出  images: {    unoptimized: true  // 静态导出时需要禁用图片优化  },  trailingSlash: true,  // 添加尾部斜杠，提高兼容性};

• React.js

特点：React.js 是一个用于构建用户界面的 JavaScript 库，适合构建单页应用（SPA）和复杂的用户界面。

默认构建设置如下：

编译命令: npm run build

输出目录: build

注意：确保在构建前安装所有依赖，并使用 npm start 进行本地开发。

• Vue.js

特点：Vue.js 是一个渐进式框架，易于上手，适合快速开发和原型设计。

默认构建设置如下：

编译命令: npm run build

输出目录: dist

说明：使用 Vue CLI 创建项目，可以自动配置构建设置。

• Nuxt.js

特点：Nuxt.js 是一个基于 Vue.js 的框架，支持服务器端渲染（SSR）和静态站点生成。

默认构建设置如下：

编译命令: npm run generate

输出目录: dist

补充：适合需要 SEO 优化的项目，确保在生成前配置好路由。

• Astro

特点：Astro 是一个现代静态站点生成器，支持多种前端框架，注重性能。

默认构建设置如下：

编译命令:npm run build

输出目录: dist

补充：利用 Astro 的组件系统，可以轻松集成 React、Vue 等框架。

• Docusaurus

特点：Docusaurus 是一个专注于文档网站的框架，提供了良好的默认样式和功能。

默认构建设置如下：

编译命令:npm run build

输出目录:build

补充：适合构建技术文档和博客，使用 Markdown 格式编写内容。

• Angular

特点：Angular 是一个功能强大的前端框架，适合构建大型企业级应用。

默认构建设置如下：

编译命令: npm run build

输出目录: dist/angular/browser

补充：使用 Angular CLI 创建项目，确保遵循最佳实践。

• Gatsby

特点：Gatsby 是一个基于 React 的静态站点生成器，注重性能和 SEO。

默认构建设置如下：

编译命令:npm run build

输出目录:public

补充：利用丰富的插件生态系统，增强站点功能。

• Hexo

特点：Hexo 是一个快速、简洁的博客框架，基于 Node.js。

默认构建设置如下：

编译命令: hexo generate

输出目录: public

使用建议：使用主题和插件自定义博客外观和功能。

• Qwik

特点：Qwik 是一个新兴的框架，专注于极致的性能和快速加载。

默认构建设置如下：

编译命令:npm run build

输出目录:dist

使用建议：适合需要高性能的应用，关注用户体验。

• Remix

特点：Remix 是一个现代的 React 框架，支持服务器端渲染和数据获取。

默认构建设置如下：

编译命令: npm run build

输出目录: build/client

使用建议：利用 Remix 的数据加载功能，优化页面性能。

• Solid

特点：Solid 是一个高性能的前端框架，注重响应式编程。

默认构建设置如下：

编译命令: npm run build

输出目录: dist

使用建议：适合需要高效渲染的应用，关注组件的性能。

• Svelte

特点：Svelte 是一个新颖的框架，编译时将组件转换为高效的 JavaScript 代码。

默认构建设置如下：

编译命令: npm run build

输出目录: build

EdgeOne Pages MCP Server提供具体的功能和服务

EdgeOne Pages MCP Server 是一个用于将 HTML 内容部署到 Pages 并获取公开访问 URL 的 MCP 服务。

简单来说：使用了 Pages MCP Server 后，咱们只要在代码编辑器里用普通话跟大模型说：“帮我生成一个 xxxx 的页面并帮我直接部署”，大模型就可以一键生成并进行部署。

整个过程不需要离开编辑器，也不需要在 Pages 的控制台进行操作，在编辑器跟 AI 的对话框里用一句话即可快速生成 HTML 并部署。

无论你是编程新手还是经验丰富的开发者，整个过程都会变得非常的简单和高效。

配置方法

在 Cursor 中配置：

Step1. 转到设置 → MCP

Step2. 添加新的 MCP 服务器：

名称：edgeone-pages-mcp-server

类型：command

命令：npx edgeone-pages-mcp

在任何支持 MCP 的客户端中，都可以使用以下 JSON 配置： { "mcpServers": {

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

技术原理

Pages MCP Server 利用无服务器边缘计算能力和 KV 存储，通过 API 接收 HTML 内容，即可自动生成即时生效的公共访问链接，实现秒级静态页面部署并内置错误处理机制。

构建自己的 MCP 服务

大家可以参考腾讯云的地理位置 MCP 示例项目，构建自己的服务：MCP with Pages Functions: Geo Location Demo

简单来说，MCP 允许 AI 在对话过程中调用外部服务。比如，当 AI 需要获取用户地理位置时，可以通过 get_geo 接口接口自动获取这些信息，然后推荐附近的餐厅或景点。

在支持 MCP 的客户端中，我们可以添加如下 JSON 配置:{

  "mcpServers": {    "edgeone-geo-mcp-server": {      "command": "tsx",      "args": ["path/to/mcp-server/index.ts"]    }  }}

写在最后

EdgeOne Pages MCP Server 早期主要依赖本地运行环境（如 Node.js、Python 或 Docker），这种模式对技术栈的硬性要求导致其应用场景受限，用户群体相对集中。

然而，随着远程 MCP Server 协议的逐步推广，该服务已突破环境限制，通过标准化接口实现跨平台兼容，显著降低了使用门槛，为更广泛的大模型用户提供了便利。