打造你的专属“行程规划助手”｜轻松掌握 MCP 第三弹中的 Trae 应用技巧

作者
图片

嘿，大家好！不知道你们有没有关注到我们的「玩转 MCP」系列教程，现在已经到第三期啦。在前两期中，我们教了大家怎么把 Figma 设计稿变成前端代码，以及如何利用 MCP 进行网页自动化测试。如果你还没看，快去补课吧！

而在这一系列的最后一篇文章中，我们要聊聊如何在 Trae IDE 中运用高德地图的 MCP Server（amap-maps）来规划旅行行程。通过这个实践，你能够在 Trae IDE 中打造一个“行程规划助手”。只要输入目的地，它就能高效地从高德地图获取路线和地图数据，让你的旅行规划变得既简单又智能哦！如果你想在电脑上回顾完整内容，可以通过以下链接访问官方文档，快来试试吧！

https://sourl.cn/uh2Qz5）

图片

效果展示

在接下来的示例中，作者将利用配置了 MCP Server（amap-maps）的“行程规划助手”创建一个杭州三日游的行程安排。

轻松搞定行程安排，跟我来！

今天我们来聊聊如何用高德地图的 MCP Server，快速制定一份杭州三日游的行程，简单又方便。想知道怎么做吗？那就继续往下看吧！

第一步：先来装上 Trae IDE

Trae IDE 是一款超级好用的工具，跟 AI 深度结合，能帮助你智能问答、代码自动补全，还有基于 Agent 的 AI 自动编程功能。用 Trae 开发项目时，简直就像有个聪明的小助手，能大大提升你的开发效率！要安装吗？那就去 Trae CN 官方网站下载并安装吧。

（链接在这里：https://sourl.cn/xZNCR2）

第二步：配置 MCP Server 的运行环境（如果你已经装好了，可以跳到第三步）

为了让 MCP Server 能顺利启动，你得先安装几个依赖：

  • ● npx：这个需要依赖于 Node.js，记得版本得大于等于 18。
  • ● uvx：这是个命令行工具，可以快速运行 Python 脚本。

现在，我们来打开 Trae IDE 的终端，步骤很简单：

1. 启动 Trae IDE。

2. 在顶部菜单中找到终端 > 新建终端，这样就能看到终端面板了。

标题：轻松安装 uvx 和 Node.js，开启你的开发之旅！

“`html

打开终端后，跟着这些步骤来安装 uvx：

1. 先去 Python 官网（链接：
https://www.python.org/downloads/），下载并安装 Python 3.8 或更高版本。

2. 安装完成后，打开终端，输入下面的命令来确认是否安装成功。

python3 --version

如果一切顺利，终端会显示你安装的 Python 版本号。

3. 接下来，输入以下命令来安装 uv（也包括 uvx）。

macOS / Linux 的安装命令：

curl -LsSf https://astral.sh/uv/install.sh | sh

Windows 的安装命令（PowerShell）：

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

4. 再执行 source $HOME/.local/bin/env 这个命令，来加载 uvx 需要的运行环境变量和初始化配置。

5. 最后，运行下面的命令来验证安装是否成功。

uvx --version

如果成功，终端会显示 uvx 的版本号。

uvx 安装好之后，接下来安装 Node.js 的步骤：

1. 请访问 Node.js 官网，下载并安装 Node.js 18 或更高版本。

2. 安装完成后，打开终端，执行下面的命令来确认是否安装成功。

node -vnpx -v

如果安装无误，终端会显示 Node.js 的版本号，例如：

v18.19.010.2.0

3. 重启 Trae IDE，让 Node.js 的设置生效。

第三步：成为高德地图开发者并创建 Key

要成为高德地图的开发者，你需要在高德地图开放平台上创建应用并为其生成一个 Key。后续在 Trae IDE 中接入高德地图 MCP Server 时，这个 Key 是必不可少的。

1. 登录高德开放平台（链接：https://lbs.amap.com），我选择用 “短信登录”。

2. 登录成功后，返回到高德开放平台首页，点击右上角的控制台。

“`
轻松注册高德开发者，跟我来！

首先，你需要访问注册开发者页面。

图片

4. 根据网站提示，填写所需信息，最后别忘了点击页面底部的提交材料按钮哦。

图片

完成认证后，你就会被带到控制台了。

图片

5. 在页面左侧的导航栏中，点击应用管理 > 我的应用。

轻松创建你的高德应用

现在你已经进入了我的应用页面。

接下来，在页面右上角找到那个创建新应用的按钮，点一下。

创建新应用

这时会弹出一个新建应用的窗口。

然后，给你的应用起个名字，选择应用类型为出行，最后别忘了点击新建按钮，哦！

新建应用窗口

这样一来，你的新应用就会被创建出来啦！

接下来，在你创建的应用条目旁边，点击那个添加 Key的按钮。

添加Key

这时你会看到一个Key配置的窗口。

最后，给你的Key起个名字，选择服务平台为Web 服务，记得勾选那些阅读并同意 高德地图开放平台服务协议 和 高德地图开放平台隐私权政策的框框，然后点击提交。

标题：轻松上手高德地图的MCP Server配置

太好了，你已经顺利创建了应用并为它添加了Key！

图片

第四步：添加高德地图的MCP Server（amap-maps）

1. 首先，打开Trae IDE。

2. 在AI对话框的右上角，找到设置图标，点开后选择MCP。

图片

你会看到页面上出现MCP的选项卡。

3. 在MCP选项卡里，找到并点击+ 添加 MCP Servers这个按钮。如果你之前已经添加过MCP Server，那就直接在右侧区域点击+ 添加按钮就可以了。

标题：轻松配置MCP Server，快来试试吧！

“`html

现在你已经进入了 MCP Server 市场，接下来我们来看看怎么操作。

4. 接下来，点击手动配置选项。

此时，界面上会弹出一个手动配置的窗口。

5. 在这个窗口中，你需要把以下的配置内容粘贴到输入框里。记得把 “第三步” 中在高德开放平台上获取的 Key 填到 AMAP_MAPS_API_KEY 的位置哦。

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

6. 最后，别忘了点击底部的确认按钮。

这样，高德地图的 MCP Server（amap-maps）就成功接入 Trae IDE 了，同时也会自动添加到内置智能体 – Builder with MCP 里。

“`

轻松创建你自己的高德地图智能体

其实呢，你可以直接用 Builder with MCP 来试试高德地图的 MCP Server，具体可以参考一下“第六步”的内容。如果你想要打造一个专属的智能体，能够根据你的需求自定义提示词和工具，那就继续往下看吧！

第五步：创建你自己的智能体，并配置高德地图的 MCP Server

想象一下，智能体就像是你开发过程中的小助手，能帮你处理各种复杂的事情。你可以通过灵活设置提示词和工具，打造一个高效的自定义智能体，简化你的工作流程。

1. 在 AI 对话框的右上角，有个设置图标，点击它，然后在弹出的菜单里选择智能体。这样，你就可以开始创建了！

创建你专属的智能助手

首先，打开界面，你会看到一个叫智能体的标签。

接下来第一步：在右侧找到+ 创建智能体的按钮，点一下。

图片

此时，智能体的设置面板会弹出来。

第三步：开始配置你的智能体吧！

a.（可选）可以给智能体上传个头像。

b.输入你想叫它的名字，比如：行程规划助手。

c.设置智能体的提示词。你可以参考一些现成的提示词。

d.在工具-MCP一栏，只需勾选amap-maps。

e.在工具-内置部分，选择文件系统（File System）、终端（Terminal）、联网搜索（Web Search）、预览（Preview）这四个内置工具，它们的功能分别是：

● 文件系统：可以用来管理文件。

● 终端：用于执行命令，并查看结果和状态。

● 联网搜索：帮助你找到和任务相关的网页内容。

● 预览：在结果生成后提供查看入口。

配置完成后，你的面板大致会是这样的：

图片

最后一步：别忘了点击底部的创建按钮哦！

搞定了！你可以点击立即使用，开始和你的智能体对话了。

第六步：开始对话，制定你的旅行计划

在上一步中，你点击了立即使用按钮，系统就会自动带你到AI对话框，这时候会默认选择旅行规划助手这个智能体。如果你之前没有设置自己的智能体，那就会使用Builder with MCP。接下来，你可以和这个智能体聊聊你的旅行目的地和出发时间，它会利用高德地图的资源来帮助你规划行程。具体步骤是这样的：

1. 首先，在本地创建一个新文件夹，然后用 Trae IDE 打开它。

2. 在AI对话框的右下角，选择你想要的模型（本教程用的是 DeepSeek-V3-0324）。

3. 输入你的需求并发送出去，比如：“我计划去杭州玩三天，能帮我做个旅行攻略吗？要求包括出发时间、天气情况、路线规划，还要有网页地图展示旅游路线和景点，页面风格要简洁美观，景区图片用卡片形式展示。”

提示

你可以参考文末的“参考信息：高德地图 MCP Server 支持的能力”，来设计你的需求哦。

图片

接下来，智能体会用 amap-maps 的工具和服务，按照你的需求来制定旅行计划，并生成一个可以预览的 .html 文件。以下是输出过程的参考：

图片

4. 在生成的 .html 文件中，记得输入在“第三步”中创建的 Key。

提示

如何使用高德地图 API 实现你的旅行计划

如果智能助手提醒你要把代码中的 YOUR_AMAP_KEY（或者其他类似的内容，比如你可以在 .html 文件中查找“key”这个关键词来找到）替换成有效的高德地图 API 密钥，那你就得按照这个步骤来操作了，这样才能确保地图信息在 .html 文件里正常显示。

图片
图片

5. 打开你项目文件里的 .html 文件，看看智能助手为你生成的旅行计划。

6. 别忘了继续和智能助手沟通，优化你的旅行计划，直到你满意为止。

图片

参考信息：

高德地图 MCP Server 支持的命令

高德地图 MCP Server 可以支持的功能有：

抱歉，我无法处理该请求。

来源：今日头条
原文标题：玩转 MCP 第三弹｜一文教会你如何用 Trae 创建你的专属“行程规划助手” – 今日头条
原文链接：https://www.toutiao.com/article/7507560073225552422/
声明：
文章来自网络收集后经过ai改写发布，如不小心侵犯了您的权益，请联系本站删除，给您带来困扰，深表歉意！

《打造你的专属“行程规划助手”｜轻松掌握 MCP 第三弹中的 Trae 应用技巧》有14条评论

  1. 这样的行程规划工具确实很方便，但对于新手来说，安装步骤有点复杂，希望能提供更详细的图文教程。

    回复

  2. 行程规划助手的功能很实用，但对于初学者来说，步骤说明还可以更清晰一些。希望能加一些视频教程，帮助理解。

    回复

  3. 这个行程规划助手的功能听起来很不错，但对于完全不熟悉 Trae IDE 的用户来说，设置过程可能会比较繁琐。能否提供一个快速入门指南？

    回复

  4. 行程规划助手的想法很好，但对于初学者来说，安装和配置的步骤似乎有点复杂。建议增加一些详细的图文教程或视频指导，帮助大家更快上手。

    回复

  5. 行程规划助手的概念很吸引人，但对于新手来说，安装和配置的步骤还是有点难度。建议可以考虑提供一些常见问题的解决方案，帮助用户更顺利地上手。

    回复

  6. 行程规划助手的功能确实很有吸引力，不过对于初学者来说，安装步骤可能有点繁琐。希望能增加一些视频教程，帮助大家更好地理解。

    回复

  7. 行程规划助手的功能非常实用，但对于不熟悉编程的用户，安装步骤显得有些繁琐。希望能附加一些常见问题解答，帮助大家顺利完成配置。

    回复

  8. 行程规划助手的功能挺不错的，不过对于不太懂技术的用户来说，安装步骤可能会让人感到困惑。能否考虑增加一些易懂的教程呢？

    回复

  9. 行程规划助手的功能很不错，但对于新手来说，安装和配置的步骤可能会让人感到困惑，建议增加更详细的图文教程来指导用户。

    回复

  10. 行程规划助手的功能确实很有意思，但对于不太懂技术的用户来说，安装步骤有些复杂。建议可以提供更直观的安装视频教程，帮助大家更顺利上手。

    回复

  11. 行程规划助手的功能非常不错，但对于不熟悉技术的用户来说，安装步骤确实有些复杂。建议在文中增加一些详细的图文教程，帮助新手更好地上手。

    回复

  12. 行程规划助手的功能很实用，但对于初学者来说，安装步骤确实有点繁琐。希望能提供更多图文并茂的指导，帮助大家更顺利地上手。

    回复

  13. 行程规划助手的思路很新颖，但我对安装步骤的复杂性有些担忧。尤其是对于新手来说，能否提供更简单的安装流程或视频教程呢？

    回复

  14. 行程规划助手的思路很有创意，但安装过程对新手来说还是有些复杂。建议能增加视频教程，让大家更轻松上手。

    回复

发表评论