企业官网建设流程全解析

1. 拿到 Offer 之后，租房这件事为什么值得用 MCP 重做一遍

拿到 Offer 的兴奋劲通常撑不过三天，因为紧接着就是租房。公司地址在哪个地铁站、周边一公里有没有靠谱小区、通勤 40 分钟以内能覆盖哪些板块、预算 3500 能不能租到带独卫的主卧——这些问题如果靠人肉在多个 App 之间来回切，光是信息对齐就能耗掉一个周末。

我这次想做的事情很具体：把「高德地图 MCP」和「腾讯云 EdgeOne Pages MCP」串到 Cursor 里，让模型先帮我做地理信息检索和通勤分析，再把结果直接生成一个可视化网页并部署到公网，发给家人或室友一起看。高德 MCP 负责「找得到、算得准」，EdgeOne Pages MCP 负责「看得见、发得出」，Cursor 负责把这两件事编排成一条工作流。

适合谁跟做：刚拿到 Offer 的应届生、要换城市工作的开发者、以及想练手 MCP 编排但不想碰生产库的人。整条链路只读公开地理数据、只部署静态页面，不涉及任何敏感系统。下面从环境准备开始，一步步把配置、验证、排障全部走完。

2. 前置准备：TaoToken 统一 Key 与 Cursor 环境

2.1 为什么需要一个统一 Key 层

MCP 工具本身不负责模型调用，但 Cursor 里的对话需要模型来驱动工具选择。如果每个模型供应商都单独配 Key，切换模型时就要改配置，很容易乱。我的做法是用 TaoToken 做统一接入层，一个 Key 覆盖模型对话和后续的 coding 场景，MCP 配置里只关心工具本身，不关心模型从哪来。

TaoToken 的定位是模型 API 聚合接入，官网在 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 入口是 https://taotoken.net/api 。注册后在控制台创建 API Key，后面 Cursor 的模型配置和 MCP 里的模型调用都指向它。

2.2 Cursor 里配置模型接入

打开 Cursor，进入 Settings，找到 Models 区域，把 OpenAI Base URL 改成 TaoToken 的 API 地址，填入刚创建的 Key。模型名按控制台里可用的填，比如 claude-3-7-sonnet 这类。保存后新建一个对话，随便问一句「你好」，能正常返回就说明模型层通了。

这一步很关键，因为后面 MCP 工具调用是模型发起的，模型层不通，MCP 配得再对也不会触发。如果你更习惯用命令行验证，也可以先用 curl 打一次：

curl https://taotoken.net/api/v1/chat/completions \ -H "Authorization: Bearer $TAOTOKEN_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "model": "claude-3-7-sonnet", "messages": [{"role": "user", "content": "ping"}] }'

返回里有 choices 字段就说明 Key 和网络都正常。这一步过了再往下走，能省掉后面一半的排障时间。

3. 可复制配置：高德 MCP 与 EdgeOne Pages MCP 接入 Cursor

3.1 高德地图 MCP 配置

高德地图 MCP 提供地理编码、周边搜索、路径规划等工具。在 Cursor 里打开 MCP 配置入口（Settings 里的 MCP 区域，或直接编辑全局 mcp.json），加入下面这段：

{ "mcpServers": { "amap-maps": { "command": "npx", "args": ["-y", "@amap/amap-maps-mcp-server"], "env": { "AMAP_MAPS_API_KEY": "你在高德开放平台申请的Key" } } } }

高德 Key 需要去高德开放平台申请，选 Web 服务类型即可。申请时注意把 Key 的权限范围勾上地理编码和周边搜索，否则调用会返回权限错误。保存配置后，Cursor 的 MCP 列表里 amap-maps 前面应该出现绿色状态点。

3.2 EdgeOne Pages MCP 配置

EdgeOne Pages MCP 的作用是把一段 HTML 内容直接部署成公网可访问的页面，返回一个临时链接。配置更简单，不需要额外 Key：

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

两个 MCP 合并后的完整配置如下，直接复制到 mcp.json 即可：

{ "mcpServers": { "amap-maps": { "command": "npx", "args": ["-y", "@amap/amap-maps-mcp-server"], "env": { "AMAP_MAPS_API_KEY": "你的高德Key" } }, "edgeone-pages-mcp-server": { "command": "npx", "args": ["edgeone-pages-mcp"] } } }

保存后回到 MCP 面板，两个服务都显示绿色就说明配置成功。如果某个服务一直转圈或报红，先看下一节的排障部分。

4. 验证请求：从地址解析到通勤分析再到页面部署

4.1 第一步：让模型做地址解析和板块推荐

在 Cursor 新建对话，模型选 claude-3-7-sonnet，输入下面这段需求：

我刚拿到 offer，公司在杭州的算力小镇。 帮我推荐几个可以住宿的板块，通行时间两小时以内， 并给出板块的具体信息，包括位置、交通、周边设施、房源情况、租金。

模型会先调用高德 MCP 的地理编码工具把「算力小镇」解析成经纬度，再调用周边搜索和路径规划工具，按通勤时间筛出候选板块。实测下来，这一步会连续触发三到四次工具调用，返回结果里通常包含板块名称、距离、预计通勤方式和租金区间。

这里有个细节值得注意：通勤时间要明确是「驾车」还是「公共交通」，否则模型可能默认按直线距离估算。我一般会在提示词里补一句「按公共交通和驾车分别给出时间」，结果会更贴近实际。

4.2 第二步：生成可视化 HTML 页面

拿到板块推荐结果后，紧接着发第二条指令：

请生成一个包含上面推荐内容的 HTML 页面，用好看的图像化表达出来。 页面使用 Bootstrap 5 布局，包含： 1. 头部：标题「算力小镇住宿板块推荐」、副标题、更新时间 2. 地图：嵌入高德地图，标注推荐板块位置，宽度 100%，高度 400px 3. 板块列表：卡片形式，每行 4 个，包含位置、评分、交通、周边设施、租金、特色 4. 交通分析：从板块到算力小镇的交通建议和预计时间 5. 页脚：版权信息 使用响应式布局，确保不同设备正常显示。

模型会生成一份完整的 HTML，包含 Bootstrap CDN 引用、卡片布局和地图 iframe。生成后先别急着部署，在本地用浏览器打开看一眼，重点检查地图 iframe 的 src 是否带了正确的经纬度和标注参数。如果地图区域空白，多半是 iframe 的 src 格式不对，让模型重新生成一次即可。

4.3 第三步：部署到 EdgeOne Pages

页面确认没问题后，发第三条指令：

将代码部署到 EdgeOne Pages 并生成公开访问链接

EdgeOne Pages MCP 会接管这个 HTML，上传后返回一个形如 https://mcp.edgeone.app/share/xxxx 的公网链接。打开链接能看到完整页面，说明端到端流程跑通了。这个链接可以直接发给家人或室友，他们不需要装任何东西就能看。

整个流程从地址解析到拿到公网链接，熟练之后十分钟以内能走完。第一次做可能会在 Key 申请和 MCP 配置上多花点时间，但配置是一次性的，后面每次换城市或换公司地址，只需要改提示词里的地址就行。

5. 本篇常见错排查

5.1 MCP 服务显示红色或一直加载

最常见的原因是 npx 拉包失败。先在终端手动跑一次npx -y @amap/amap-maps-mcp-server，看是否能正常启动。如果卡在下载，检查 npm 源是否可用，必要时换成国内镜像源。另一个原因是 Node 版本过低，EdgeOne Pages MCP 要求 Node 18 以上，用node -v确认一下。

5.2 高德 MCP 调用返回权限错误

高德 Key 分 Web 端和 Web 服务两种，MCP 用的是 Web 服务类型。如果申请时选错了类型，或者权限范围没勾地理编码，调用会直接报错。去高德开放平台控制台检查 Key 的类型和权限，改完保存后重启 Cursor 里的 MCP 服务。

5.3 模型不调用 MCP 工具，直接编答案

这种情况通常是模型层没走通，或者提示词太模糊。先确认 Cursor 的模型配置指向 TaoToken 且能正常对话，然后在提示词里明确说「使用高德地图 MCP 查询」，模型会更倾向于触发工具调用。如果还是不行，检查 MCP 配置里的服务名是否和模型看到的一致。

5.4 部署后页面地图不显示

EdgeOne Pages 部署的是静态 HTML，地图 iframe 依赖外部 CDN。如果页面其他部分正常但地图空白，检查 iframe 的 src 是否被转义或截断。让模型重新生成一次地图部分，确保 src 是完整的 URL 字符串。另外，部分浏览器会拦截混合内容，确认 iframe 用的是 https。

5.5 通勤时间算出来明显不对

高德 MCP 的路径规划默认可能按驾车算，如果你想要公共交通时间，需要在提示词里明确指定出行方式。另外，起终点如果只给了板块名没给具体坐标，模型可能用板块中心点估算，误差会偏大。让模型先解析具体小区坐标再算路径，结果会准很多。

6. 把这条工作流用起来：从租房到更多场景

跑通一次之后，这套配置的价值就不止于租房了。同样的高德 MCP 加 EdgeOne Pages MCP 组合，可以拿来做出差住宿筛选、周末周边游规划、甚至门店选址的初步分析。核心逻辑是一样的：地理信息检索交给高德 MCP，结果可视化交给 EdgeOne Pages MCP，模型负责编排。

如果你后面要长期做这类编码和 Agent 编排，建议把模型接入切到 Coding Plan，额度和稳定性更适合高频调用。配置入口在 https://taotoken.net/api-keys ，接入文档在 https://taotoken.net/doc ，里面有各语言 SDK 的调用示例。想先验证模型效果的话，可以直接在模型对话页面试几条提示词，确认工具调用行为符合预期再写进 Cursor 配置。

我自己的习惯是：每次换城市或换公司，先把地址丢给模型跑一遍板块推荐，拿到公网链接后发给室友一起筛，筛完再实地看房。整个过程里最耗时的其实是实地看房，前面的信息筛选已经被压缩到十分钟以内。这套流程你照着配一遍，后面每次复用只需要改一个地址。