我用Trae 做了一个有意思的Agent「旅途规划」。 点击 s.trae.com.cn/a/3f08e8 立即复刻，一起来玩吧！在快节奏的生活中，旅行本该是放松身心的享受，可复杂的规划流程却常常让人望而却步。今天，我要为大家介绍一款由 Trae平台的12306 MCP、高德 MCP、EdgeOne-Pages MCP联动打造的旅途规划智能体，它就像一位贴心的旅行管家，让出行规划变得轻松又高效！
Agent 简介
这款旅途规划智能体是一个多模态协作的智能系统，它整合了三大核心模块的优势功能。12306 MCP 负责精准的票务信息处理，从实时余票查询到候补购票策略制定，都不在话下；高德 MCP 凭借强大的地理信息能力，规划出最优旅行路线，推荐特色景点和优质酒店；EdgeOne-Pages MCP 则将所有信息进行可视化呈现，生成精美且便捷的交互页面。三者紧密配合，从出行、游玩到展示，一站式满足用户的旅行规划需求。
Agent 创作构思
-
痛点分析
相信很多人都有过这样的困扰：在规划旅行时，需要在多个平台之间来回切换。用 12306 反复刷新车票，在高德地图上手动标记景点路线，再通过各种旅游攻略网站筛选酒店和美食，不仅耗费大量时间和精力，还容易遗漏重要信息。而且，各平台信息无法实时联动，一旦某个环节出现变动，整个行程都要重新调整，十分麻烦。
-
设计初衷
正是为了解决这些痛点，我萌生了开发这款智能体的想法。我希望打造一个能够整合多方资源、实现信息实时共享与协同的平台，让用户只需在一个界面输入需求，就能快速获得完整、精准且个性化的旅行方案，告别繁琐的手动规划，让旅行变得更简单、更美好。
-
技术实现原理
智能体的技术实现基于多模态交互与数据协同机制。12306 MCP 通过调用 12306 官方 API，实时获取票务数据，并运用算法对余票情况和票价走势进行分析；高德 MCP 借助高德地图丰富的地理信息数据和路径规划算法，结合用户的兴趣偏好，生成科学合理的行程框架；EdgeOne-Pages MCP 则采用响应式网页设计技术，将前两者提供的数据进行可视化处理，通过 HTML、CSS 和 JavaScript 实现页面的动态渲染和交互功能。三个 MCP 之间通过特定的数据流转协议（如 JSON-RPC 2.0 和 WebSocket）进行通信，确保信息实时同步，当某一环节数据发生变化时，其他模块能够及时响应并调整，从而保证整个行程规划的准确性和时效性。
Prompt
-
高德 amap-maps MCP 提示词
-
解析用户输入的时空信息（出发地/目的地/时间范围），生成多维度行程框架
-
基于用户偏好（历史遗迹/自然景观/美食等），调用高德地图API完成：
- 景点聚类分析（按兴趣点密度划分区域）
- 最优路线规划（考虑交通方式组合、时间成本、步行距离）
- 智能酒店推荐（基于景点分布、用户评分、价格区间）
- 输出结构化数据：
{
"行程框架": [
{
"日期": "2025-06-10",
"区域": "洛阳老城区",
"景点": [
{
"名称": "洛阳博物馆",
"位置": "112.453895,34.619702",
"开放时间": "9:00-17:00",
"评分": 4.8
}
],
"交通建议": [
{
"方式": "地铁",
"路线": "地铁2号线（洛阳火车站-文博园站）",
"耗时": "25分钟",
"费用": "4元"
}
],
"酒店推荐": [
{
"名称": "洛阳升龙广场亚朵酒店",
"位置": "112.453895,34.619702",
"星级": "四星",
"价格": "300-400元/晚",
"距离景点": "800米"
}
]
}
],
"全局交通网络": {
"高铁": {
"北京-洛阳": [
{
"车次": "G65",
"出发时间": "08:00",
"到达时间": "10:30",
"余票": "二等座23张"
}
]
}
}
}
-
预留与12306 MCP的交互接口，将高铁车次信息实时同步
-
生成可视化地图数据，供EdgeOne-Pages MCP渲染
-
12306 MCP 提示词
-
接收amap-maps MCP传递的交通需求（出发地/目的地/日期/车次偏好）
-
调用12306 API完成：
- 实时余票查询（支持多车次并行查询）
- 票价动态分析（历史价格走势预测）
- 候补策略建议（优先级排序）
- 输出结构化数据：
{
"车次信息": [
{
"车次": "G65",
"出发时间": "08:00",
"到达时间": "10:30",
"余票": {
"二等座": 23,
"一等座": 8,
"商务座": 2
},
"票价": {
"二等座": 320,
"一等座": 540,
"商务座": 1080
}
}
],
"购票建议": [
{
"优先级": 1,
"车次": "G65",
"座位类型": "二等座",
"策略": "立即购票"
},
{
"优先级": 2,
"车次": "G89",
"座位类型": "一等座",
"策略": "加入候补"
}
]
}
- 与amap-maps MCP建立双向通信：
- 当余票变化时触发行程优化建议
- 当用户调整行程时同步更新查询条件
- 支持多轮交互：用户可指定"优先车次""预算范围""出发时段"等约束条件
-
EdgeOne-Pages MCP 提示词
-
接收高德MCP的行程数据和12306 MCP的票务信息
-
生成响应式HTML页面：
- 采用网格布局（grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))）
- 实现景点卡片式展示（包含图片、评分、开放时间）
- 嵌入高德地图组件（支持点击地址跳转导航）
- 交互增强设计：
- 实时显示车次余票状态（绿色表示可购，红色表示售罄）
- 提供"一键复制行程""分享链接"功能
- 支持滑动切换日期视图
- 技术实现要求：
- 使用Flexbox和CSS Grid实现响应式布局
- 集成高德地图JavaScript API（版本2.0）
- 采用Webpack进行模块化打包
- 部署优化：
- 启用EdgeOne边缘节点加速（全球3200+节点）
- 静态资源缓存策略（设置Cache-Control: max-age=86400）
- 支持自定义域名绑定和HTTPS加密
效果展示
-
场景一：国内周末游
用户输入 “我想6月6号晚上从广州出发，6月9号晚上从成都返回，请帮我规划一下到达成都之后的旅游规划和酒店，喜欢偏自然风光，不太喜欢商业化的旅游景点，酒店预算每天在300-500之间，请给我推荐适合我的火车票，最好是卧铺，请给我2-3条游玩线路的结果，并用网页的形式来展示”。
第一次生成的网页效果如下：
我觉得这个UI界面不太好看，所以我进行了第二次的细化，提示词如下：
在上面的网页里面增加 实现景点卡片式展示（包含图片、评分、开放时间） - 嵌入高德地图组件（支持点击地址跳转导航）
3. 交互增强设计：
- 实时显示车次余票状态（绿色表示可购，红色表示售罄）
- 提供"一键复制行程""分享链接"功能
- 支持滑动切换日期视图
比第一次生成的UI界面美观多了，而且还能一键复制行程和分享！
详细的介绍视频可以看B站：www.bilibili.com/video/BV1Hw… #TraeAgent #AI编程@ Trae-Real AI Engineer
