Pages MCP Server + cursor，一句话完成旅游出行规划

admin管理员组

文章数量:1438983

Pages MCP Server + cursor，一句话完成旅游出行规划

前言

最近 MCP 爆火，MCP 的出现让大模型瞬间打通了任督二脉，开启了“万物互联”的新篇章，于是我开始沉迷于研究各种各样的 MCP Server，最近开始研究EdgeOne Pages Deploy MCP，这个 MCP Server，能够将 HTML 内容快速部署到 EdgeOne Pages 并生成公开访问链接，与cursor协作能够立即预览和分享 AI 生成的网页内容。

这不禁让我想起很多年前，一个网友问我干啥的，在得知我是程序员之后他就问我会不会写网页。当时只会Java，但是死要面子地从网上找个一个H5，然后保存为 HTML 扔到了 Tomcat 的 ROOT 目录下，最后潇洒地将 URL 扔给了他。

如今，这样的问题也会出现在我的身边，例如个人出行路线规划，或者朋友问我济南有什么好玩的，某某某景区有什么好吃的等，现在这些问题对我来说已经不是难题了， cursor + 三个 mcp server 轻松搞定。

1. Pages MCP Server：部署页面到公网
2. edgeone-geo-mcp-server：获取当前位置
3. amap-maps：高德地图mcp server，实现路线规划、位置搜索等。

MCP Server

如今，我只需一句话就能让 cursor 使用大模型帮我生成我想要的任何页面，并自动调用 ，Pages MCP Server，利用无服务器边缘计算能力和 KV 存储，通过 API 接收 HTML 内容，即可自动生成即时生效的公共访问链接，并实现秒级静态页面部署并内置错误处理机制。

Pages MCP Server

那么如何使用 Pages MCP Server。在 Cursor 的 Cursor Settings 中找到 MCP。

点击右侧上方的 Add new global MCP server 按钮，便自动打开 .local 目录下的 mcp.json 文件。在这个json文件中，我们将下面的 Pages MCP Server 的信息粘贴进去。

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

这样，我们返回 MCP 页面，便可以看到配置好的 edgeone-pages-mcp-server。

如上图我们可以看到，edgeone-pages-mcp-server 只有一个名为 deploy_html 的 tool，在 edgeone-pages-mcp 源码中也可以看到 deploy_html 的代码实现。

我们在使用的时候，不需要去管代码实现，配置完成之后，cursor 中的大模型便拥有了 Pages MCP Server 的 deploy_html 自动部署的能力。

edgeone-geo-mcp-server

edgeone-geo-mcp-server 可以获取我们当前的位置，我们需要本地部署这个 mcp server。EdgeOne Pages 提供了丰富的模版，我们登录EdgeOne控制台。

在 Pages 页面下选择 从模版开始。

搜索edgeone-geo，然后点击部署。

选择 gitee 或者 github 作为git平台，开始进行部署。

部署完成之后，edgeone-geo 就会部署到 edgeone 平台上，并返回一个公共url。

点击url，我们可以访问到 edgeone-geo 的页面信息。

点击函数，我们可以看到部署的路由信息。

这里是有一个 get_geo 的路由，通过公共url + 路由即可调用获取当前位置的服务。同时在 gitee 上也看到了 edgeone 的仓库。

将这个仓库下载到本地，然后复制目录路径，将 mcp server 信息复制到 mcp.json 中。

"edgeone-geo-mcp-server": {
      "command": "tsx",
      "args": ["/Users/aqi/app/ai/mcp/mcp-geo/index.ts"]
    }

这样，在 cursor 中，就可以调用 edgeone-geo-mcp-server。

同时也可以看到 edgeone-geo-mcp-server 只有一个 get_location 的 tool。那么，这里就会有一个疑问，只是使用 mcp server 的话，为什么要部署 edgeone-geo-mcp-server，直接下载源码到本地不就可以吗？

确实如此，但是如果想要让页面实现定位使用者位置，并规划路线的话，就需要使用接口调用，这样调用 get_geo 这个路由即可。

amap-maps

最后就是配置高德地图的 mcp server，我们首先去高德开放平台获取应用key。

在这里要注意的是，mcp server 使用的是 web应用 类型的key，html 中应该使用 JavaScript 类型的key。在申请完key之后，我们复 mcp server 配置到 mcp.json 中。

{
    "mcpServers": {
        "amap-maps": {
            "command": "npx",
            "args": [
                "-y",
                "@amap/amap-maps-mcp-server"
            ],
            "env": {
                "AMAP_MAPS_API_KEY": "您在高德官网上申请的key"
            }
        }
    }
}

这样，就能看到 amap-maps 的 tools 信息。

指针放在上面可以看到对应tool的详细信息。

路线规划

在三个 mcp server 配置好了之后，我们就可以在 curssor 中调用。在对话框中选择 Agent，然后选择输入以下提示词：

获取我当前位置，搜索济南的景区位置，并规划路线，然后本地生成一个html页面，集成高德地图，然后点击每个景区，在页面上方都会显示高德地图，并高亮路线

然后就开始调用 edgeone-geo-mcp-server 的 get_geolocation 工具来定位以当前的信息。

然后调用高德地图的 amap-maps mcp sever 的 maps_text_search 来搜索附近的景区。

在收到高德地图返回的景区信息之后，就要调用 maps_search_detail 来查询每个景区的详细信息。

详细信息如下：

{
	  "id": "B021305SHC",
	  "name": "趵突泉",
	  "location": "117.015893,36.661087",
	  "address": "趵突泉南路1号",
	  "business_area": "共青团路",
	  "city": "济南市",
	  "type": "风景名胜;风景名胜;国家级景点",
	  "alias": "趵突泉公园",
	  "cost": "20.00",
	  "opentime2": "周一至周日 07:00-19:00",
	  "level": "AAAAA",
	  "rating": "4.9",
	  "open_time": "07:00-19:00",
	  "ticket_ordering": "0"
}

其中包括位置、经纬度、票价等信息。然后 cursor 会根据上面两个 mcp server 获取的数据，生成一个页面。

然后我们使用 Pages MCP Server 来完成部署。

大模型调用 deploy_html 部署完成之后，edgeone page 会返回一个 url，我们在浏览器中进行访问。

同时，点击下方景区的卡片，地图就会跟着切换路线。

餐厅推荐

如果想要生成餐厅推荐，可以在cursor中继续对话调用工具。

最后也会调用 Pages MCP Server 完成部署。如图，生成了某个地点附近景区的餐厅推荐。

结语

通过 cursor + Pages MCP Server ，从开发到部署实现了AI自动化。几句话完成开发，然后我只需要把 url 发给朋友，就可以轻松实现吃喝玩乐的可视化推荐。

本文标签： Pages MCP Servercursor，一句话完成旅游出行规划