使用说明

航班搜索MCP

全栈航班搜索应用程序演示了模型上下文协议（MCP）和实时谷歌航班数据。

概述

这是一个单回购，具有Next.js前端和Spring Boot MCP服务器，使用SerpAPI的Google Flights API提供实时航班搜索功能。

技术栈：

前端：Next.js 16+React 19+TypeScript+顺风CSS
后端：Spring Boot 3.4.5+Spring AI 1.1.0+Java 17
- MCP飞行服务器（端口8080）-飞行搜索工具
- MCP客户端服务（端口8081）-AI聊天集成
协议：HTTP流媒体上的模型上下文协议（MCP）
人工智能：克劳德十四行4.5
API：SerpAPI谷歌航班

快速开始

先决条件

前端：Node.js 18+和npm
后端Java 17+和Maven 3.6+
API密钥:
- SerpAPI密钥（从以下位置获取蛇网)
- 无烟煤API密钥（在 console.anthropic.com)

设置

克隆存储库：

git clone https://github.com/apappascs/mcp-flight-search.git
cd flight-search-mcp

设置环境变量：

export SERP_GOOGLE_FLIGHTS_API_KEY=your_serpapi_key_here
export ANTHROPIC_API_KEY=your_anthropic_key_here

开始一切（推荐）：
```
./start-all.sh
```
此脚本将：
- 验证两个API密钥
- 在端口8080上启动MCP飞行服务器
- 在端口8081上启动MCP客户端服务
- 在端口3000上启动前端
- 自动打开浏览器
- 实时显示日志

手动启动

1号航站楼-MCP飞行服务器：

cd backend/mcp-flight-server
./mvnw spring-boot:run

终端2-MCP客户端服务：

cd backend/mcp-client-service
./mvnw spring-boot:run

3号航站楼-前端：

cd frontend
npm install  # First time only
npm run dev

浏览器：

open http://localhost:3000

项目结构

flight-search-mcp/
├── frontend/                        # Next.js application (port 3000)
│   ├── app/                        # App router pages
│   ├── components/                 # React components
│   ├── lib/                        # MCP & AI chat clients
│   ├── types/                      # TypeScript types
│   └── README.md                   # Frontend documentation
│
├── backend/
│   ├── mcp-flight-server/          # MCP Flight Server (port 8080)
│   │   ├── src/main/java/          # Flight search service
│   │   ├── src/main/resources/     # Configuration
│   │   └── README.md               # Server documentation
│   │
│   └── mcp-client-service/         # MCP Client Service (port 8081)
│       ├── src/main/java/          # AI chat integration
│       ├── src/main/resources/     # Configuration
│       └── README.md               # Client documentation
│
├── start-all.sh                    # One-command launcher
├── logs/                           # Application logs
├── README.md                       # This file
└── CLAUDE.md                       # Claude Code guide

特性

双搜索模式：经典的基于表单的搜索+由Claude提供支持的AI聊天
MCP飞行服务器：通过模型上下文协议提供航班搜索工具
人工智能集成：使用Claude Sonnet 4.5进行自然语言航班查询
实时数据：通过SerpAPI从Google Flights获取实时航班信息
汉莎航空焦点：针对汉莎航空集团航空公司进行了优化

发展

前端脚本

cd frontend

npm run dev      # Start development server
npm run build    # Build for production
npm run lint     # Run linter
npm run clean    # Clean build artifacts
npm run rebuild  # Full rebuild

后端脚本

cd backend/mcp-flight-server

./mvnw clean package        # Build
./mvnw spring-boot:run      # Run server
./start-server.sh           # Run with startup script

测试

健康检查

# Backend health
curl http://localhost:8080/actuator/health

# Frontend API health
curl http://localhost:3000/api/flights/search

示例搜索

搜索法兰克福（FRA）到柏林（BER）：

curl -X POST http://localhost:3000/api/flights/search \
  -H "Content-Type: application/json" \
  -d '{
    "origin": "Frankfurt/Main International",
    "destination": "Berlin - Brandenburg",
    "departureDate": "2025-12-01",
    "returnDate": "2025-12-08",
    "tripType": "roundTrip",
    "travelClass": "Economy",
    "travelers": 1
  }'

建筑

经典搜索流

User Browser (localhost:3000)
    ↓ HTTP POST
Next.js API Route
    ↓ MCP over HTTP Streaming
MCP Flight Server (localhost:8080)
    ↓ REST API
SerpAPI (Google Flights)

AI聊天搜索流程

User Browser (localhost:3000)
    ↓ HTTP POST
Next.js API Route
    ↓ HTTP
MCP Client Service (localhost:8081)
    ↓ Anthropic API
Claude Sonnet 4.5
    ↓ MCP Tool Calls
MCP Flight Server (localhost:8080)
    ↓ REST API
SerpAPI (Google Flights)

配置

前端

无需配置。默认MCP服务器： http://localhost:8080/mcp

后端

编辑 backend/mcp-flight-server/src/main/resources/application.properties:

server.port=8080
spring.ai.mcp.server.path=/mcp
serpapi.api.key=${SERP_GOOGLE_FLIGHTS_API_KEY}
serpapi.localization.country=de
serpapi.localization.language=en
serpapi.localization.currency=EUR

故障排除

API关键问题

# Verify keys are set
echo $SERP_GOOGLE_FLIGHTS_API_KEY
echo $ANTHROPIC_API_KEY

# Set if missing
export SERP_GOOGLE_FLIGHTS_API_KEY=your_serpapi_key
export ANTHROPIC_API_KEY=your_anthropic_key

端口冲突

# Check if ports are in use
lsof -i :3000  # Frontend
lsof -i :8080  # MCP Flight Server
lsof -i :8081  # MCP Client Service

# Kill processes if needed
kill -9 <PID>

构建问题

# Frontend
cd frontend
npm run clean
npm install
npm run build

# Backend
cd backend/mcp-flight-server
./mvnw clean package

连接问题

在启动前端之前，确保后端正在运行：

curl http://localhost:8080/actuator/health

文档

前端自述 -前端设置和开发
MCP飞行服务器自述 -航班搜索MCP工具
MCP客户端服务自述 -AI聊天集成

这是一个展示MCP集成模式的演示项目。您可以将其作为构建自己的MCP应用程序的参考。