Interactive AI travel planner
Multi-agent orchestration with LangGraph • Azure LLMs • React • FastAPI • MongoDB
An AI‑powered travel planning app. Users chat with an assistant to design multi‑city trips, receive a day‑by‑day itinerary, hotel suggestions, and an inter‑city transport plan. Backend: FastAPI + MongoDB. Frontend: React + Material UI.
- Multi‑agent itinerary generation (destination selection, routing, detection/modification, itinerary writer)
- Transport plan with realistic durations and heuristic costs between cities
- Hotel suggestions generated in background after itinerary changes
- Real‑time chat over WebSocket with streaming assistant messages
- JWT authentication and protected routes (bypassed in demo)
- Modern React + MUI interface with tabs: Chat, Itinerary, Hotels, Transport
1) Login (mock bypassed in demo)
2) Trip configuration (hidden in demo, auto‑seeded)
3) Chat with the AI assistant
Powered by a GPT‑class Large Language Model (LLM) that performs intent detection and conversation orchestration.
User requests (e.g., "cultural trip", "add beach days at the end") trigger the workflow to either create a fresh plan or modify the existing one.
The assistant streams responses through WebSocket and persists messages linked to the current travel_id.
4) Itinerary: dates and cities
The itinerary is produced by a LangGraph orchestrated pipeline coordinated by SmartItineraryWorkflow:
1) A Routing Agent builds a graph where nodes are cities (loaded with their coordinates from MongoDB) and edges represent geodesic distances.
2) The agent proposes a near‑optimal visiting order (shortest‑path / TSP‑like heuristic) across all requested cities.
3) An Itinerary Agent (LLM) writes the day‑by‑day plan aligning with the route and user preferences.
4) A Time Budget Scheduler assigns hours per city and feeds downstream services (hotels and transport).
In the UI you see each city with explicit date ranges (arrival → departure) derived from this schedule.
5) Hotels: suggestions per city window
A Hotel Suggestions Service calls an external provider API using the itinerary windows (city + check‑in/check‑out) and the user's preferences.
When the itinerary is changed from the chat (e.g., cities reordered or days shifted), the hotel suggestions are regenerated in the background and the UI reflects the new results.
In the demo (mock) build, these suggestions are deterministic and consistent with the displayed itinerary.
6) Transport: inter‑city plan
The transport plan is currently heuristic‑based but fully respects the itinerary's city sequence and durations.
It selects a mode per leg (car/bus/train/flight/boat) using distance thresholds and adds realistic overheads for total travel time; costs are computed with simple per‑km + fixed‑fee models.
Future work can plug real providers without changing the frontend.
The demo runs entirely on the frontend with predefined data. No backend or database required.
- From the repo root:
cd frontendnpm installREACT_APP_MOCK=true npm start
- The app opens at
http://localhost:3000and skips login, going straight to the chat.
- Frontend: set
REACT_APP_MOCK=trueto enable demo mocks. The app seedslocalStorage(token/user) and bypasses login. - Backend: set
MOCK_MODE=trueto return predefined responses (optional; not needed for the GitHub Pages demo).
Deployment to GitHub Pages (gh-pages workflow) is already configured in .github/workflows/gh-pages.yml.
- Routers under
/api, CORS/security middlewares, async Mongo (Motor) - Multi‑agent orchestration with LangGraph:
SmartItineraryWorkflow: coordinates itinerary detection/modification, DB reads, routing, itinerary creationRoutingAgent: builds a graph and proposes the route order (distance heuristics / TSP‑like)ItineraryAgent: generates day‑by‑day plans from the route + preferencesTimeBudgetScheduler: allocates hours per city using total days and transport matrixTransportPlanService: creates the inter‑city plan after itinerary changes
- Background jobs: hotel suggestions + transport plan generation after itinerary updates
- WebSocket:
/api/travels/{travel_id}/wsfor live chat
MainCanvaslayout with tabs: Chat, Itinerary, Hotels, Transport- In demo mode the app intercepts
fetchand WebSocket to serve mock data - HashRouter +
homepagesupport for GitHub Pages
- Python 3.10+
- Node.js 18+
- MongoDB (local or remote)
- Azure OpenAI credentials (if not using mock)
cd backendpip install -r requirements.txt- Create
.envwith at least:HOST=0.0.0.0,PORT=8000,SECRET_KEY=change_meMONGODB_URL=mongodb://localhost:27017,DATABASE_NAME=travel_appAZURE_OPENAI_*variables (omit ifMOCK_MODE=true)MOCK_MODE=false(ortruefor a backend demo)
- Start:
uvicorn app.main:app --host 0.0.0.0 --port 8000 --reload
cd frontendnpm installnpm start(orREACT_APP_MOCK=true npm startfor demo‑only)
This repository uses a gh-pages branch deployment:
- Workflow:
.github/workflows/gh-pages.yml - Build command:
npm ci && REACT_APP_MOCK=true npm run build(infrontend/) - Output:
frontend/build→ published togh-pages - SPA fallback:
404.htmlcopiesindex.html
Public link: https://amarkosmarkos.github.io/TravelApp/
All endpoints are under /api (JWT‑based auth in routers/auth.py). Highlights:
- Travels:
GET/POST /api/travels,GET/PUT/DELETE /api/travels/{id} - Itinerary:
GET/POST /api/travels/{id}/itinerary - Hotels:
GET /api/travels/{id}/hotels/suggestions - Transport:
GET /api/travels/{id}/transport-plan - WebSocket:
GET /api/travels/{id}/ws?token=...
After itinerary changes, background tasks regenerate hotels and transport automatically.
This work is licensed under the Creative Commons Attribution‑NonCommercial 4.0 International License (CC BY‑NC 4.0).
© 2024 All rights reserved.




