当前位置：首页 > news >正文

登顶中国：基于 Trae AI与 EdgeOne MCP 的全国各省最高峰攀登攻略博客构建实践

news 来源：原创 2025/8/14 13:17:32

一、背景与目标

随着户外运动和登山活动的日益流行，越来越多的人希望挑战自然，体验登顶的乐趣。中国幅员辽阔，34个省级行政区（包括23个省、5个自治区、4个直辖市和2个特别行政区）拥有众多壮丽的山峰，其中每个省份都有其地理意义上的“最高峰”。这些高峰不仅代表了自然景观的极致，也成为了许多登山爱好者的向往之地。

项目目标：创建一个包含全国各省最高峰攻略的在线博客，涵盖每个省最高峰的简介、攀登行程、注意事项、费用等信息，且页面布局优美，并成功部署在 EdgeOne。

明确受众：登山爱好者、旅行规划者、地理探索者等，他们需要详细准确的攀登信息来辅助自己的户外活动决策。

二、方案概述

大模型发展如火如荼，各种AI工具在内容创作和网站开发中的应用越来越广泛。为了更好地利用这些先进技术，Model Context Protocol（模型上下文协议，简称MCP）提供了一种开放的协议框架，使得AI模型能够安全地与本地及远程资源进行交互。本方案通过AI IDE工具结合EdgeOne Pages Deploy MCP服务，来快速部署全国各省最高峰攻略博客，并生成公开访问链接，为户外爱好者提供在线服务。

（一）什么是MCP？

MCP是一种开放协议，旨在让AI模型能够安全且高效地与本地和远程资源进行交互。它允许开发者定义和控制模型执行环境，包括数据源、计算资源以及输出格式等关键参数。通过MCP，可以确保AI模型不仅能够在受控环境下运行，还能动态适应不同的应用场景需求。

（二）什么是EdgeOne Pages？

EdgeOne Pages是一项专用服务，它能够将HTML内容快速部署到网络边缘节点上，从而实现高速加载和全球访问。该服务特别适合用于展示静态网页内容，如博客文章、产品页面等等。

（三）什么是Trae？

Trae，致力于成为真正的 AI 工程师（The Real Al Engineer）。Trae 旗下的 AI IDE 产品，以智能生产力为核心，无缝融入你的开发流程，与你默契配合，更高质量、高效率完成每一个任务。

三、准备工作

在开始构建行程攻略网页之前，我们需要做一些准备工作，下载AI IDE工具并配置EdgeOne MCP服务。

（一）安装AI IDE工具

根据自己的系统选择相应的版本)进行下载，我这里使用windows版本。

请在此添加图片描述

（二）配置EdgeOne MCP服务

点击在右上角选择MCP。

请在此添加图片描述

然后点击“添加”，选择手动配置，填入如下配置。

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

请在此添加图片描述

检查下是否状态是否可用。

请在此添加图片描述

（三）配置EdgeOne的智能体

将 MCP Server 添加至智能体，让其调用 MCP Server 中的工具来更好地处理需求。

点击添加智能体，选择edgeone-pages-mcp-server，然后保存即可。

请在此添加图片描述

四、在AI IDE中开启交互式对话构建博客

选择edgeone智能体，内置模型选择deepseek-v3-0324。如下图所示：

请在此添加图片描述

在对话框中输入如下的指令：

你是一个旅游数据收集与网页开发助手，请按以下步骤完成任务：第一步：数据收集
收集中国所有省份（含自治区、直辖市、特别行政区）的最高峰名称、海拔高度、地理位置、简介（包括所属山脉、自然保护区等）、是否对外开放等信息。
对于每座山峰，整理如下内容：
名称（中英文）
海拔
所在省/市/区
地理坐标
简介（历史、地质、生态等）
推荐攀登路线（起点、天数、难度等级）
最佳攀登季节
注意事项（天气、装备、许可、安全等）
费用预估（交通、住宿、门票、向导、装备等）第二步：网页设计
创建一个响应式网页，包含以下页面元素：
首页：展示全国地图或列表，点击进入对应省份详情。
山峰详情页：展示上述收集的信息，格式美观、图文结合。
导航栏：支持搜索、筛选（如按海拔、难度、季节等）。
移动端适配：确保在手机和平板上良好显示。
使用现代前端技术（HTML5 + CSS3 + JS），不依赖框架（如React/Vue），保持轻量简洁。
布局风格要求：干净、大气、有户外探险感，可参考国家地理或登山类博客网站。第三步：部署与发布
将网页打包为静态资源（index.html, css/, js/, images/）部署至EdgeOne。提供EdgeOne的访问链接。请现在开始执行以上任务。

请在此添加图片描述

接下来，AI就开始自行工作。生成好之后，点击“全部接受”。

请在此添加图片描述

使用EdgeOne Pages服务部署网页内容。

请在此添加图片描述

查看下最终的部署效果如何？

请在此添加图片描述

点击每个省之后，还可以查看到详细的信息。

请在此添加图片描述

可以继续在对话框输入如下指令：

重新调整下每个省内部的展示格式，优美些。

查看效果，这里AI无法自动添加图片。

请在此添加图片描述

还可以根据自己的想法继续和AI进行对话，让AI来辅助你完成工作。不过有时候未必一次就能到达想要的效果。

五、方案总结

在使用 EdgeOne Pages 和 Model Context Protocol (MCP) 构建网页的过程中，

在快速构建全国各省最高峰攻略博客过程中，AI IDE可以自动从网络上收集有关中国各省最高峰的相关信息，并进行结构化处理。这包括山峰名称、海拔高度、地理位置、攀登路线等重要信息。

然后调用EdgeOne Pages MCP服务，无需大量人力投入即可完成高质量的网站建设，降低了初期投资。

每次提交代码后，EdgeOne Pages 会立即生成一个公开访问链接，可以即时查看网页效果。能够快速验证设计和功能是否符合预期，再进行修改。

后面可以通过不断与AI进行对话来优化整个博客，使得网页开发更加智能化，不过要开发出一个自己满意的网页还是比较耗时的。

总体而言，采用AI IDE 结合 EdgeOne MCP 服务构建全国各省最高峰攻略博客，不仅能加速项目的实施进度，还能保证最终产品的质量和安全性，同时为用户提供优秀的访问体验。这种组合非常适合希望快速上线并长期稳定运行的小型至中型企业级项目。

一、背景与目标

二、方案概述

（一）什么是MCP？

（二）什么是EdgeOne Pages？

（三）什么是Trae？

三、准备工作

（一）安装AI IDE工具

（二）配置EdgeOne MCP服务

（三）配置EdgeOne的智能体

四、在AI IDE中开启交互式对话构建博客

五、方案总结

相关文章：