智能旅行助手

原文：Hello-Agents · 第十三章 智能旅行助手 · 在线阅读

一句话

构建一个基于多智能体协作的智能旅行助手，实现行程规划、地图可视化、预算计算、行程编辑和导出功能。

什么时候翻这页

需要构建完整的AI应用，特别是多智能体协作的Web应用时；需要设计数据模型和前后端分离架构时；需要集成外部API和实现用户交互功能时。

核心概念

• 多智能体协作：将复杂任务分解为多个简单任务，不同Agent各司其职
• Pydantic数据模型：用于数据验证、序列化和类型安全
• MCP工具集成：通过Model Context Protocol集成外部API
• 前后端分离架构：前端Vue3+TypeScript，后端FastAPI
• 数据模型设计：自底向上设计Location、Attraction、DayPlan等模型
• Agent角色设计：AttractionSearchAgent、WeatherQueryAgent、HotelAgent、PlannerAgent
• 预算计算：自动计算景点门票、酒店、餐饮、交通费用
• 加载进度条：提升用户体验，显示系统处理状态
• 行程编辑：支持添加、删除、调整景点顺序
• 导出功能：支持导出为PDF或图片
• 侧边导航：实现长页面的锚点跳转

怎么做

1. 项目架构设计：采用前后端分离架构，分为前端层、后端层、智能体层和外部服务层
2. 数据模型设计：使用Pydantic定义Location、Attraction、Meal、Hotel、Budget、DayPlan、TripPlan等模型
3. 多智能体协作设计：设计四个专门Agent，按顺序协作完成旅行规划任务
4. MCP工具集成：集成高德地图MCP服务器，提供16种工具供Agent调用
5. 前端开发：使用Vue3+TypeScript开发表单和结果展示页面
6. 功能实现：实现预算计算、加载进度条、行程编辑、导出功能和侧边导航

命令 / 代码速查

启动后端

cd helloagents-trip-planner/backend
pip install -r requirements.txt
cp .env.example .env
# 编辑.env文件，填入API密钥
uvicorn app.api.main:app --reload

启动前端

cd helloagents-trip-planner/frontend
npm install
npm run dev

Pydantic模型定义

from pydantic import BaseModel, Field
from typing import Optional, List

class Location(BaseModel):
    longitude: float = Field(..., description="经度", ge=-180, le=180)
    latitude: float = Field(..., description="纬度", ge=-90, le=90)

class Attraction(BaseModel):
    name: str = Field(..., description="景点名称")
    address: str = Field(..., description="地址")
    location: Location = Field(..., description="经纬度坐标")
    visit_duration: int = Field(..., description="建议游览时间(分钟)", gt=0)
    description: str = Field(..., description="景点描述")
    category: Optional[str] = Field(default="景点", description="景点类别")
    rating: Optional[float] = Field(default=None, ge=0, le=5, description="评分")
    image_url: Optional[str] = Field(default=None, description="图片URL")
    ticket_price: int = Field(default=0, ge=0, description="门票价格(元)")

MCP工具创建

from hello_agents.tools import MCPTool
from app.config import get_settings

settings = get_settings()

mcp_tool = MCPTool(
    name="amap_mcp",
    command="npx",
    args=["-y", "@sugarforever/amap-mcp-server"],
    env={"AMAP_API_KEY": settings.amap_api_key},
    auto_expand=True
)

前端API调用

import axios from 'axios'
import type { TripPlanRequest, TripPlan } from '../types'

const api = axios.create({
  baseURL: 'http://localhost:8000/api',
  timeout: 120000,
  headers: { 'Content-Type': 'application/json' }
})

export const generateTripPlan = async (request: TripPlanRequest): Promise<TripPlan> => {
  const response = await api.post<TripPlan>('/trip/plan', request)
  return response.data
}

导出功能实现

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

const exportAsImage = async () => {
  const element = document.getElementById('trip-plan-content')
  const canvas = await html2canvas(element, { scale: 2 })
  const link = document.createElement('a')
  link.download = `${tripPlan.value.city}旅行计划.png`
  link.href = canvas.toDataURL()
  link.click()
}

const exportAsPDF = async () => {
  const element = document.getElementById('trip-plan-content')
  const canvas = await html2canvas(element, { scale: 2 })
  const imgData = canvas.toDataURL('image/png')
  const pdf = new jsPDF('p', 'mm', 'a4')
  const imgWidth = 210
  const imgHeight = (canvas.height * imgWidth) / canvas.width
  pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight)
  pdf.save(`${tripPlan.value.city}旅行计划.pdf`)
}

与 Python / Claude Code 手册的联系

• 使用Python的Pydantic库进行数据验证和类型安全
• 使用Claude Code中的SimpleAgent和ReAct范式构建多智能体系统
• 通过MCP协议集成外部API，扩展Agent能力
• 使用FastAPI构建后端API，与Python Web开发相关

初学者易错点

1. 数据模型设计不当：未使用Pydantic导致类型不安全，字段不一致
2. 多智能体协作流程混乱：Agent间信息传递不畅，结果整合困难
3. MCP工具集成错误：未正确配置环境变量或工具参数
4. 前后端数据类型不一致：TypeScript类型与Python模型不匹配
5. 导出功能中的地图处理：html2canvas处理嵌套Canvas存在兼容性问题
6. Agent提示词过于复杂：导致LLM理解困难，输出不符合预期

相关词条

• 多智能体系统
• Pydantic
• MCP (Model Context Protocol)
• 前后端分离
• 数据模型
• Agent协作
• ReAct
• FastAPI
• Vue3
• TypeScript