13.1.1 为什么需要智能旅行助手
规划一次旅行是一件既令人兴奋又令人头疼的事情。你需要在网上搜索景点信息，对比不同的攻略，查看天气预报，预订酒店，计算预算，规划路线。这个过程可能需要花费几个小时甚至几天的时间。而且即使花了这么多时间，你也不确定规划的行程是否合理，是否遗漏了什么重要的景点，预算是否准确。
传统的旅行规划方式有几个痛点。首先是信息分散。景点信息在旅游网站上，天气信息在天气网站上，酒店信息在预订网站上，你需要在多个网站之间切换，手动整合这些信息。其次是缺少个性化。大部分攻略都是通用的，不考虑你的个人偏好、预算限制、出行时间等因素。最后是难以调整。当你想修改行程时，可能需要重新规划整个行程，因为景点的顺序、时间安排、预算都是相互关联的。
AI 技术为解决这些问题提供了新的可能。想象一下，你只需要告诉系统"我想去北京玩 3 天，喜欢历史文化，预算中等"，系统就能自动为你生成一个完整的行程计划，包括每天去哪些景点、在哪里吃饭、住哪个酒店、需要多少预算。而且这个计划是可以调整的，你可以删除不喜欢的景点，调整游览顺序，系统会自动更新地图和预算。
这就是我们要构建的智能旅行助手。它不仅仅是一个技术演示，而是一个真正有用的应用。通过这个项目，你会学到如何将 AI 技术应用到实际问题中，如何设计多智能体系统，如何构建完整的 Web 应用。
13.1.2 技术架构概览
系统采用经典的前后端分离架构，分为四个层次，如图 13.1 所示：
图 13.1 智能旅行助手技术架构
（1）前端层 (Vue3+TypeScript)：负责用户交互和数据展示，包括表单输入、结果展示、地图可视化。
（2）后端层 (FastAPI)：负责 API 路由、数据验证、业务逻辑。
（3）智能体层 (HelloAgents)：负责任务分解、工具调用、结果整合。包含 4 个专门的 Agent。
（4）外部服务层：提供数据和能力，包括高德地图 API、Unsplash API、LLM API。
数据流转过程如下：用户在前端填写表单 → 后端验证数据 → 调用智能体系统 → 智能体依次调用景点搜索、天气查询、酒店推荐、行程规划 Agent → 每个 Agent 通过 MCP 协议调用外部 API → 整合结果返回前端 → 前端渲染展示。
项目的结构参考如下，提供便于定位源码：
helloagents-trip-planner/
├── backend/ # 后端代码
│ ├── app/
│ │ ├── agents/ # 智能体实现
│ │ ├── api/ # API路由
│ │ ├── models/ # 数据模型
│ │ ├── services/ # 服务层
│ │ └── config.py # 配置文件
│ └── requirements.txt # Python依赖
│
└── frontend/ # 前端代码
├── src/
│ ├── views/ # 页面组件
│ ├── services/ # API服务
│ ├── types/ # 类型定义
│ └── router/ # 路由配置
└── package.json # npm依赖
详细的架构设计和数据流转将在后续章节中介绍。
13.1.3 快速体验：5 分钟运行项目
在深入学习实现细节之前，让我们先把项目跑起来，看看最终的效果。这样你会对整个系统有一个直观的认识。
环境要求：
- Python 3.10 或更高版本
- Node.js 16.0 或更高版本
- npm 8.0 或更高版本
获取 API 密钥：
你需要准备以下 API 密钥：
- LLM 的 API(OpenAI、DeepSeek 等)
- 高德地图 Web 服务 Key：访问 https://console.amap.com/ 注册并创建应用
- Unsplash Access Key：访问 https://unsplash.com/developers 注册并创建应用
将所有 API 密钥放入.env文件。
启动后端：
# 1. 进入后端目录
cd helloagents-trip-planner/backend
# 2. 安装依赖
pip install -r requirements.txt
# 3. 配置环境变量
cp .env.example .env
# 编辑.env文件，填入你的API密钥
# 4. 启动后端服务
uvicorn app.api.main:app --reload
# 或者
python run.py
成功启动后，访问 http://localhost:8000/docs 可以看到 API 文档。
打开新的终端窗口：
# 1. 进入前端目录
cd helloagents-trip-planner/frontend
# 2. 安装依赖
npm install
# 3. 启动前端服务
npm run dev
成功启动后，访问 http://localhost:5173 即可使用应用。
体验核心功能：
首先需在首页表单中填写目的地城市、旅行日期、偏好、预算、交通及住宿类型等信息。点击“开始规划”按钮后，系统会显示加载进度条，并很快生成结果页面，如图 13.2 所示。
图 13.2 旅行助手规划进行页面
随后加载成功，该页面会清晰展示行程概览、预算明细、景点地图、每日行程详情和天气信息，如图 13.3，13.4 所示。
图 13.3 旅行助手规划完成页面
图 13.4 旅行助手规划完成页面
如果用户需要个性化调整，可以点击“编辑行程”按钮，自由调整景点顺序或删除某个景点，如图 13.5 所示。规划完成后，通过“导出行程”下拉菜单，即可将最终方案轻松保存为图片或 PDF 文件，方便随时查阅。
图 13.5 旅行助手规划完成页面