Skip to content

README.md

Latest commit

 

History

History
99 lines (77 loc) · 2.04 KB

README.md

File metadata and controls

99 lines (77 loc) · 2.04 KB

Frontend - Flight Search UI

Next.js frontend with dual search modes: AI chat and classic form-based search.

Tech Stack

  • Next.js 16 + React 19 + TypeScript 5
  • Tailwind CSS 4
  • MCP SDK for protocol communication

Quick Start

npm install
npm run dev  # Starts on http://localhost:3000

Scripts

npm run dev        # Development server
npm run build      # Production build
npm start          # Start production server
npm run lint       # Run linter
npm run clean      # Clean build artifacts
npm run rebuild    # Full rebuild

Environment Variables

Create .env file (optional):

NEXT_PUBLIC_MCP_SERVER_URL=http://localhost:8080/mcp
NEXT_PUBLIC_AI_CHAT_URL=http://localhost:8081/api/chat

Project Structure

frontend/
├── app/
│   ├── page.tsx                   # Main page
│   └── api/flights/search/        # API route
├── components/
│   ├── AiChatSearch.tsx          # AI search interface
│   ├── ClassicFlightSearch.tsx   # Form-based search
│   └── FlightResults.tsx         # Results display
├── lib/
│   ├── aiChatClient.ts           # AI chat client
│   ├── mcpClient.ts              # MCP SDK client
│   └── airportCodes.ts           # Airport utilities
└── types/                        # TypeScript types

Features

AI Search

  • Natural language queries powered by Claude
  • Chat memory (20 messages)
  • Automatic tool selection

Classic Search

  • Traditional form interface
  • Direct MCP connection
  • Structured results

API Endpoint

POST /api/flights/search

{
  "origin": "Frankfurt/Main International",
  "destination": "Berlin - Brandenburg",
  "departureDate": "2025-12-01",
  "returnDate": "2025-12-08",
  "tripType": "roundTrip",
  "travelClass": "Economy",
  "travelers": 1
}

Troubleshooting

Cannot connect to MCP server

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

Port 3000 in use

PORT=3001 npm run dev

Build errors

npm run rebuild